diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 5fa70ce..d26f29d 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -99,9 +99,12 @@ jobs: distribution: temurin java-version: '17' - uses: android-actions/setup-android@v3 + # arm64-v8a only. The 32-bit armv7 ABI breaks llama-cpp-sys-2's build script + # (Cargo doesn't set CARGO_CFG_TARGET_FEATURE for it), and aarch64 covers the + # overwhelming majority of real Android devices. - uses: dtolnay/rust-toolchain@stable with: - targets: aarch64-linux-android,armv7-linux-androideabi,i686-linux-android,x86_64-linux-android + targets: aarch64-linux-android - uses: swatinem/rust-cache@v2 with: workspaces: src-tauri @@ -113,7 +116,7 @@ jobs: echo "ANDROID_NDK_ROOT=$ANDROID_SDK_ROOT/ndk/$NDK_VERSION" >> "$GITHUB_ENV" - run: bun install --frozen-lockfile - - run: bun run android:build:apk + - run: bun run tauri android build --apk --target aarch64 - uses: actions/upload-artifact@v4 with: diff --git a/.gitignore b/.gitignore index 51c74a4..5b34653 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,5 @@ aether-ds/* .design-sync/* .ds-sync/ ds-bundle/ + +design-assets diff --git a/README.md b/README.md index 2a338a7..31615d9 100644 --- a/README.md +++ b/README.md @@ -411,7 +411,7 @@ Saved iCE behavior: ### AiON -AiON is the local intelligence sidepanel. +AiON is the local wisdom sidepanel. **Ask mode**: diff --git a/build/icon.ico b/build/icon.ico new file mode 100644 index 0000000..f848680 Binary files /dev/null and b/build/icon.ico differ diff --git a/package.json b/package.json index 530c6ee..b0151db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aether-browser", - "version": "1.0.0", + "version": "1.0.1", "productName": "ÆTHER", "description": "Local AI-powered browser and knowledge hub", "author": "canpixel.com", diff --git a/public/Image.png b/public/Image.png deleted file mode 100644 index 6c1d277..0000000 Binary files a/public/Image.png and /dev/null differ diff --git a/public/aether-crystal.svg b/public/aether-crystal.svg deleted file mode 100644 index 95191e8..0000000 --- a/public/aether-crystal.svg +++ /dev/null @@ -1,201 +0,0 @@ - - Aether crystal mark - A faceted icy hexagonal crystal with a luminous spiraling aperture core. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/aether-crystal2.svg b/public/aether-crystal2.svg deleted file mode 100644 index 53aab4a..0000000 --- a/public/aether-crystal2.svg +++ /dev/null @@ -1,140 +0,0 @@ - - Aether crystal mark - A faceted icy hexagonal crystal with a spiraling aperture and dark luminous core. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/aether-plusless-crystal-favicon.ico b/public/aether-plusless-crystal-favicon.ico deleted file mode 100644 index 01731c0..0000000 Binary files a/public/aether-plusless-crystal-favicon.ico and /dev/null differ diff --git a/public/aether-plusless-crystal-favicon.png b/public/aether-plusless-crystal-favicon.png deleted file mode 100644 index ef65ebf..0000000 Binary files a/public/aether-plusless-crystal-favicon.png and /dev/null differ diff --git a/public/icy-batch005.png b/public/icy-batch005.png deleted file mode 100644 index ae07751..0000000 Binary files a/public/icy-batch005.png and /dev/null differ diff --git a/public/icy-kankn005.png b/public/icy-kankn005.png deleted file mode 100644 index beed1cb..0000000 Binary files a/public/icy-kankn005.png and /dev/null differ diff --git a/public/icy-pokak005.png b/public/icy-pokak005.png deleted file mode 100644 index ceea9d7..0000000 Binary files a/public/icy-pokak005.png and /dev/null differ diff --git a/public/icy-skill003.png b/public/icy-skill003.png deleted file mode 100644 index f2ba2ba..0000000 Binary files a/public/icy-skill003.png and /dev/null differ diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 8929886..4c92676 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "aether" -version = "1.0.0" +version = "1.0.1" description = "Local AI-powered browser and knowledge hub" authors = ["canpixel.com"] edition = "2021" diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 8182dfb..58e9987 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -1,3 +1,5 @@ +#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] + fn main() { aether_lib::run() } diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 88c9381..31be31d 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "ÆTHER", - "version": "1.0.0", + "version": "1.0.1", "identifier": "com.canur.aether", "build": { "beforeDevCommand": "bun run dev:vite", @@ -27,11 +27,13 @@ }, "bundle": { "active": true, - "targets": ["app"], + "targets": [ + "app" + ], "icon": [ "../resources/icon.png", "../build/icon.icns", - "../public/aether-plusless-crystal-favicon.ico" + "../build/icon.ico" ], "macOS": { "minimumSystemVersion": "10.15", diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css index 5ca645c..5371822 100644 --- a/src/renderer/src/assets/main.css +++ b/src/renderer/src/assets/main.css @@ -1,10283 +1,14 @@ @import './base.css'; - -:root { - --rail-width: 76px; - --titlebar-height: 24px; - --nav-height: 116px; - --top-bar-height: 150px; - --panel-width: 404px; - --panel-collapsed-width: 58px; - --ink: #17243a; - --soft-ink: #344766; - --muted: #71819a; - --faint: #9daabe; - --line: rgba(123, 158, 190, 0.28); - --line-strong: rgba(72, 143, 179, 0.34); - --glass: rgba(255, 255, 255, 0.72); - --glass-strong: rgba(255, 255, 255, 0.9); - --cloud: #f7fbff; - --aura: #dff8ff; - --accent: #4eb8df; - --accent-strong: #247fa7; - --prism: #8f72cf; - --aurora: #62d8c6; - --glint: #f1c66b; - --success: #2b9270; - --danger: #b85b59; - --shadow: 0 18px 55px rgba(51, 103, 137, 0.16); - --soft-shadow: 0 10px 30px rgba(62, 132, 163, 0.11); - - --font-ice: 'Cinzel', 'Cormorant Garamond', Georgia, serif; - --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; - --font-old: 'New York', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; - --font-alt: - Didot, 'Bodoni 72', 'Bodoni 72 Smallcaps', 'Baskerville', 'Iowan Old Style', Georgia, serif; -} - -html, -body, -#root { - width: 100%; - height: 100%; - overflow: hidden; -} - -body { - margin: 0; - color: var(--ink); - background: - radial-gradient(circle at 18% 14%, rgba(204, 247, 255, 0.74), transparent 30%), - radial-gradient(circle at 84% 10%, rgba(235, 224, 255, 0.7), transparent 32%), - radial-gradient(circle at 75% 78%, rgba(255, 235, 179, 0.26), transparent 28%), - linear-gradient(135deg, #fbfdff 0%, #edfaff 44%, #f9fcff 100%); - user-select: none; -} - -* { - scrollbar-width: thin; - scrollbar-color: rgba(122, 220, 255, 0.88) rgba(5, 18, 32, 0.2); -} - -*::-webkit-scrollbar { - width: 12px; - height: 12px; - background: rgba(7, 22, 38, 0.14); -} - -*::-webkit-scrollbar-track { - border: 1px solid rgba(168, 232, 255, 0.22); - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(116, 205, 255, 0.2)), - rgba(7, 22, 38, 0.16); - box-shadow: inset 0 0 10px rgba(136, 221, 255, 0.12); -} - -*::-webkit-scrollbar-thumb { - min-height: 42px; - border: 3px solid rgba(5, 18, 32, 0.28); - border-radius: 999px; - background: - linear-gradient( - 180deg, - rgba(255, 255, 255, 0.96), - rgba(119, 220, 255, 0.82) 44%, - rgba(28, 127, 190, 0.76) - ), - rgba(122, 220, 255, 0.76); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.86), - 0 0 14px rgba(83, 212, 255, 0.4); - /* filter + box-shadow DO animate smoothly in WebKit, gradient backgrounds don't. - Drive the hover response off those so it's a visible color/glow change. */ - filter: saturate(1) brightness(1); - transition: - border-width 160ms ease, - box-shadow 200ms ease, - filter 200ms ease; -} - -*::-webkit-scrollbar-thumb:hover { - border-width: 2px; - filter: saturate(1.3) brightness(1.12); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.94), - 0 0 22px rgba(101, 226, 255, 0.75); -} - -*::-webkit-scrollbar-thumb:active { - border-width: 1px; - filter: saturate(1.5) brightness(1.22); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 1), - 0 0 30px rgba(120, 232, 255, 0.9); -} - -body::before { - position: fixed; - inset: 0; - pointer-events: none; - content: ''; - opacity: 0.22; - background-image: - radial-gradient(circle, rgba(77, 128, 197, 0.26) 0 1px, transparent 1.2px), - radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.4px); - background-position: - 0 0, - 18px 22px; - background-size: - 56px 56px, - 86px 86px; -} - -button, -input, -select, -textarea { - font: inherit; -} - -button { - cursor: pointer; -} - -button:disabled { - cursor: not-allowed; - opacity: 0.44; - filter: grayscale(0.55) saturate(0.68); -} - -.aether-shell { - position: relative; - display: grid; - grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--panel-width); - width: 100%; - height: 100%; - overflow: hidden; - background: - radial-gradient(circle at 48% -8%, rgba(255, 255, 255, 0.9), transparent 28%), - radial-gradient(circle at 26% 94%, rgba(195, 249, 240, 0.34), transparent 34%), - radial-gradient(circle at 96% 62%, rgba(143, 114, 207, 0.12), transparent 24%); - transition: grid-template-columns 600ms cubic-bezier(0.25, 1.25, 0.4, 1); -} - -.aether-shell.panel-collapsed { - grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--panel-collapsed-width); -} - -.window-titlebar { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 10; - display: grid; - grid-template-columns: 1fr; - align-items: center; - height: var(--titlebar-height); - padding: 0 18px; - border-bottom: 1px solid rgba(143, 165, 196, 0.12); - background: rgba(255, 255, 255, 0.44); - backdrop-filter: blur(20px) saturate(1.18); - -webkit-app-region: drag; -} - -.window-titlebar strong { - justify-self: center; - color: rgba(23, 36, 58, 0.82); - font-family: var(--font-old); - font-size: 14px; - font-weight: 600; - letter-spacing: 0.18em; -} - -.aether-shell::after { - position: absolute; - inset: 0; - pointer-events: none; - content: ''; - background: - linear-gradient(90deg, transparent 0 34%, rgba(255, 255, 255, 0.36) 50%, transparent 70%), - radial-gradient(circle at 72% 34%, rgba(117, 167, 232, 0.16), transparent 18%); - mix-blend-mode: screen; -} - -.app-rail { - position: relative; - z-index: 5; - display: flex; - flex-direction: column; - align-items: center; - gap: 18px; - height: 100%; - /* Bottom padding reserves room for the absolutely-pinned settings button. */ - padding: calc(var(--titlebar-height) + 28px) 10px 86px; - border-right: 1px solid rgba(143, 165, 196, 0.18); - background: rgba(255, 255, 255, 0.48); - box-shadow: 12px 0 38px rgba(105, 137, 181, 0.08); - backdrop-filter: blur(26px) saturate(1.3); -} - -.traffic-spacer { - display: none; -} - -.brand-mark, -.app-button { - display: grid; - place-items: center; - border: 1px solid rgba(125, 158, 205, 0.24); - border-radius: 18px; - padding: 0; - color: #5f88c7; - line-height: 0; - box-shadow: var(--soft-shadow); - transition: - transform 160ms ease, - box-shadow 160ms ease, - border-color 160ms ease, - background 160ms ease, - color 160ms ease; -} - -.wavy-lines { - position: absolute; - width: 100%; - left: 0; - z-index: -1; - pointer-events: none; - user-select: none; - -webkit-user-drag: none; -} -.wavy-lines-start-page { - position: absolute; - top: clamp(-110px, -14vh, -44px); - left: clamp(-280px, -18vw, -96px); - width: max(150%, 1180px); - height: 120%; - z-index: -20; - object-fit: cover; - opacity: 0.72; - pointer-events: none; - user-select: none; - -webkit-user-drag: none; -} - -.brand-mark { - position: relative; - width: 52px; - height: 52px; - background: - radial-gradient(circle at 44% 28%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(219, 246, 255, 0.74)); - overflow: visible; -} - -/* ÆTHER logo as dashboard button icon */ -.brand-mark-image { - display: block; - width: 47px; - height: 47px; - object-fit: contain; - filter: drop-shadow(0 8px 16px rgba(65, 140, 174, 0.2)); -} - -.brand-mark > svg { - display: block; - width: 32px; - height: 32px; -} - -.app-button > svg, -.app-initial svg { - display: block; - width: 28px; - height: 28px; -} - -.app-button:not(.active) > svg { - transform: translateY(1px); -} - -/* The iCE snowflake sits a touch smaller and higher than the Web View globe - below it, so it reads as snow 'raining' down onto the globe. */ -.ice-button > svg { - width: 23px; - height: 23px; -} - -.flow-button > svg { - width: 25px; - height: 25px; - stroke-width: 1.9; -} - -.air-button > svg { - width: 24px; - height: 24px; - stroke-width: 1.9; -} - -.brand-mark.active, -.brand-mark:hover, -.app-button:hover, -.app-button.active { - border-color: rgba(72, 125, 205, 0.38); - background: - radial-gradient(circle at 30% 20%, #ffffff, transparent 45%), - radial-gradient(circle at 72% 82%, rgba(98, 216, 198, 0.32), transparent 42%), - linear-gradient(145deg, #effcff, #ffffff); - color: var(--accent-strong); - box-shadow: - 0 16px 36px rgba(62, 132, 163, 0.2), - 0 0 0 5px rgba(126, 215, 237, 0.08); - transform: translateY(-1px); -} - -.app-list { - display: flex; - flex: 1; - flex-direction: column; - gap: 12px; - width: 100%; -} - -.app-button { - display: grid; - place-items: center; - position: relative; - width: 50px; - height: 50px; - margin: 0 auto; - background: - radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.98), transparent 42%), - linear-gradient(145deg, #ffffff, #dbeeff); -} - -/* Pin the settings button to the bottom-left of the rail so it stays put - regardless of window height instead of being pushed past the bottom edge. */ -.settings-button { - position: absolute; - left: 0; - right: 0; - bottom: 18px; - width: 50px; - height: 50px; - margin: 0 auto; - color: #6f82a0; -} - -.tooltip-host { - position: relative; -} - -.tooltip-host::after, -.tooltip-host::before { - position: absolute; - z-index: 80; - pointer-events: none; - opacity: 0; - transition: - opacity 90ms ease, - transform 90ms ease; - content: ''; -} - -.tooltip-host::after { - content: attr(data-tooltip); - min-width: max-content; - max-width: 180px; - border: 1px solid rgba(130, 163, 207, 0.3); - border-radius: 11px; - padding: 4px 8px; - color: #3d5b84; - font-size: 11px; - font-weight: 760; - line-height: 1.2; - background: - radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.98), transparent 45%), - linear-gradient(145deg, #ffffff, #e8f2ff); - box-shadow: 0 10px 24px rgba(82, 126, 188, 0.18); -} - -.tooltip-host::before { - width: 8px; - height: 8px; - border-left: 1px solid rgba(130, 163, 207, 0.3); - border-bottom: 1px solid rgba(130, 163, 207, 0.3); - background: linear-gradient(145deg, #ffffff, #edf5ff); -} - -.tooltip-host:not([data-tooltip])::after, -.tooltip-host:not([data-tooltip])::before { - display: none; -} - -.tooltip-host[data-tooltip-side='right']::after { - top: 50%; - left: calc(100% + 10px); - transform: translateY(-50%) translateX(-2px); -} - -.tooltip-host[data-tooltip-side='right']::before { - top: 50%; - left: calc(100% + 7px); - transform: translateY(-50%) rotate(45deg); -} - -.tooltip-host[data-tooltip-side='left']::after { - top: 50%; - right: calc(100% + 10px); - transform: translateY(-50%) translateX(2px); -} - -.tooltip-host[data-tooltip-side='left']::before { - top: 50%; - right: calc(100% + 7px); - transform: translateY(-50%) rotate(-135deg); -} - -.tooltip-host:not([data-tooltip-side])::after { - bottom: calc(100% + 9px); - left: 50%; - transform: translateX(-50%) translateY(2px); -} - -.tooltip-host:not([data-tooltip-side])::before { - bottom: calc(100% + 5px); - left: 50%; - transform: translateX(-50%) rotate(-45deg); -} - -.tooltip-host:hover::after, -.tooltip-host:hover::before, -.tooltip-host:focus-visible::after, -.tooltip-host:focus-visible::before { - opacity: 1; -} - -.tooltip-host[data-tooltip-side='right']:hover::after, -.tooltip-host[data-tooltip-side='right']:focus-visible::after { - transform: translateY(-50%) translateX(0); -} - -.tooltip-host[data-tooltip-side='left']:hover::after, -.tooltip-host[data-tooltip-side='left']:focus-visible::after { - transform: translateY(-50%) translateX(0); -} - -.tooltip-host:not([data-tooltip-side]):hover::after, -.tooltip-host:not([data-tooltip-side]):focus-visible::after { - transform: translateX(-50%) translateY(0); -} - -.app-initial { - display: grid; - place-items: center; -} - -.app-button .app-dot { - position: absolute; - display: none; - right: -9px; - width: 5px; - top: 11px; - height: 28px; - border-radius: 6px; - background: linear-gradient(#95c3ff, #5b91e1); - box-shadow: 0 0 18px rgba(85, 137, 217, 0.45); -} - -.app-button.active .app-dot { - display: block; -} - -.workspace { - position: relative; - z-index: 1; - min-width: 0; - height: 100%; - padding-top: var(--top-bar-height); -} - -.workspace.dashboard-open { - padding-top: 95px; -} - -.workspace::before { - position: absolute; - inset: var(--top-bar-height) 0 0; - pointer-events: none; - content: ''; - background: - radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.9), transparent 19%), - radial-gradient(circle at 88% 78%, rgba(207, 229, 255, 0.48), transparent 28%); -} - -.workspace.dashboard-open::before { - inset: 95px 0 0; -} - -.address-bar { - position: absolute; - top: var(--titlebar-height); - right: 0; - left: 0; - z-index: 4; - display: grid; - grid-template-columns: 78px 142px minmax(0, 1fr) 58px; - align-items: center; - gap: 10px; - height: var(--nav-height); - padding: 10px 16px; - border-bottom: 1px solid rgba(143, 165, 196, 0.22); - background: rgba(255, 255, 255, 0.58); - backdrop-filter: blur(24px) saturate(1.35); -} - -.history-controls { - display: flex; - gap: 7px; -} - -.history-controls button { - display: grid; - place-items: center; - width: 36px; - height: 36px; - padding: 0; - border-color: rgba(125, 158, 205, 0.24); - background: - radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 44%), - linear-gradient(145deg, #f2f8ff, #d9eaff); - color: #5f88c7; -} - -.history-controls svg { - width: 18px; - height: 18px; -} - -.active-app { - display: flex; - min-width: 0; - flex-direction: column; - line-height: 1.1; -} - -.active-app span { - overflow: hidden; - color: var(--ink); - font-size: 13px; - font-weight: 780; - text-overflow: ellipsis; - white-space: nowrap; -} - -.active-app small { - color: var(--muted); - font-size: 11px; - font-weight: 680; -} - -input, -select, -textarea { - width: 100%; - border: 1px solid var(--line); - border-radius: 10px; - background: rgba(255, 255, 255, 0.82); - color: var(--ink); - outline: none; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); -} - -input, -textarea, -[contenteditable='true'], -[contenteditable='plaintext-only'] { - -webkit-user-select: text; - user-select: text; -} - -input:focus, -select:focus, -textarea:focus { - border-color: rgba(78, 134, 215, 0.48); - box-shadow: - 0 0 0 4px rgba(106, 159, 233, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -.address-bar input, -.capture-row select, -.search-form input, -.collection-form input { - height: 36px; - padding: 0 12px; - font-size: 13px; -} - -button { - height: 36px; - border: 1px solid rgba(104, 140, 190, 0.24); - border-radius: 10px; - padding: 0 14px; - background: rgba(255, 255, 255, 0.78); - color: var(--soft-ink); - font-size: 13px; - font-weight: 760; - box-shadow: 0 8px 22px rgba(94, 132, 185, 0.08); -} - -.address-bar button, -.start-search button, -.capture-row button, -.search-form button, -.chat-form button, -.semantic-trail-form button, -.collection-form button, -.new-collection-button, -.save-page-button { - border-color: rgba(67, 128, 182, 0.34); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%), - linear-gradient(145deg, #dff3ff, #76b8df 52%, #3f7fbd); - color: #ffffff; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(28, 89, 142, 0.18), - 0 9px 18px rgba(47, 115, 172, 0.14); - text-shadow: 0 1px 2px rgba(26, 70, 112, 0.22); - font-family: var(--font-ice); - font-weight: 600; - font-size: 15px; -} - -.address-bar button:hover, -.start-search button:hover, -.capture-row button:hover, -.search-form button:hover, -.chat-form button:hover, -.semantic-trail-form button:hover, -.collection-form button:hover, -.new-collection-button:hover, -.save-page-button:hover { - border-color: rgba(54, 122, 178, 0.42); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 46%), - linear-gradient(145deg, #e8f7ff, #6fb5dd 52%, #3678b7); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.58), - inset 0 -1px 0 rgba(28, 89, 142, 0.16), - 0 11px 22px rgba(47, 115, 172, 0.18); -} - -.save-page-button { - transition: - transform 170ms ease, - border-color 170ms ease, - background 170ms ease, - box-shadow 170ms ease; -} - -.save-page-button:hover { - transform: translateY(-1px); -} - -.save-page-button:active { - transform: translateY(0); -} - -.address-bar .history-controls button { - border-color: rgba(125, 158, 205, 0.24); - background: - radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 44%), - linear-gradient(145deg, #f2f8ff, #d9eaff); - color: #5f88c7; -} - -.address-bar .history-controls button:hover { - background: - radial-gradient(circle at 35% 24%, #ffffff, transparent 44%), - linear-gradient(145deg, #eaf4ff, #cfe5ff); - color: var(--accent-strong); -} - -.danger-button { - border-color: rgba(184, 91, 89, 0.2); - background: rgba(255, 255, 255, 0.72); - color: var(--danger); -} - -.webview-underlay { - position: absolute; - inset: var(--top-bar-height) 0 0; - display: grid; - place-items: center; - color: rgba(93, 118, 154, 0.62); - font-size: 12px; - font-weight: 760; - letter-spacing: 0.1em; - text-transform: uppercase; -} - -.dashboard { - position: relative; - height: calc(100vh - var(--top-bar-height)); - overflow: auto; - padding: 0 34px 34px; -} - -.workspace.dashboard-open .dashboard { - height: calc(100vh - 95px); -} - -.flow-view { - position: relative; - z-index: 1; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - height: calc(100vh - 95px); - overflow: hidden; - padding: 20px 24px 24px; - background: - radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.94), transparent 18%), - radial-gradient(circle at 78% 18%, rgba(147, 239, 255, 0.18), transparent 26%), - radial-gradient(circle at 48% 84%, rgba(73, 167, 174, 0.1), transparent 32%), - linear-gradient(180deg, rgba(250, 254, 255, 0.78), rgba(235, 248, 252, 0.56)); -} - -.flow-view::before { - position: absolute; - inset: 0; - pointer-events: none; - content: ''; - background-image: - linear-gradient(rgba(77, 143, 180, 0.045) 1px, transparent 1px), - linear-gradient(90deg, rgba(77, 143, 180, 0.035) 1px, transparent 1px); - background-size: 56px 56px; - mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.72), transparent 76%); -} - -.air-view { - position: relative; - z-index: 1; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - height: calc(100vh - 95px); - overflow: hidden; - padding: 20px 24px 24px; - background: - radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.96), transparent 20%), - radial-gradient(circle at 82% 14%, rgba(162, 224, 255, 0.24), transparent 26%), - radial-gradient(circle at 48% 92%, rgba(116, 216, 198, 0.14), transparent 34%), - linear-gradient(180deg, rgba(250, 254, 255, 0.8), rgba(235, 247, 252, 0.58)); -} - -.air-view::before { - position: absolute; - inset: 0; - pointer-events: none; - content: ''; - opacity: 0.58; - background-image: - linear-gradient(rgba(66, 133, 172, 0.07) 1px, transparent 1px), - linear-gradient(90deg, rgba(66, 133, 172, 0.06) 1px, transparent 1px); - background-size: 34px 34px; - mask-image: linear-gradient(180deg, #000 0%, transparent 82%); -} - -.air-hero { - position: relative; - z-index: 2; - display: flex; - min-width: 0; - align-items: center; - justify-content: space-between; - gap: 18px; - margin-bottom: 18px; -} - -.air-identity { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 12px; -} - -.air-mark { - display: grid; - flex: 0 0 auto; - place-items: center; - width: 48px; - height: 48px; - border: 1px solid rgba(84, 143, 184, 0.22); - border-radius: 8px; - background: - radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), transparent 44%), - linear-gradient(145deg, rgba(235, 250, 255, 0.96), rgba(118, 202, 226, 0.62)); - color: #226f96; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 16px 32px rgba(64, 139, 172, 0.14); -} - -.air-mark svg { - width: 25px; - height: 25px; -} - -.air-identity h1 { - margin: 0; - color: #123955; - font-size: 30px; - font-weight: 880; - line-height: 1; -} - -.air-identity p { - margin: 5px 0 0; - color: #52728d; - font-size: 12px; - font-weight: 760; -} - -.air-output-note { - min-width: 0; - max-width: 48%; - overflow: hidden; - border: 1px solid rgba(84, 143, 184, 0.16); - border-radius: 8px; - padding: 8px 11px; - background: rgba(255, 255, 255, 0.64); - color: #4f718c; - font-size: 11px; - font-weight: 740; - text-overflow: ellipsis; - white-space: nowrap; -} - -.air-grid { - position: relative; - z-index: 1; - display: grid; - min-height: 0; - grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); - grid-template-rows: auto minmax(0, 1fr); - gap: 14px; -} - -.air-panel { - min-width: 0; - min-height: 0; - border: 1px solid rgba(87, 150, 184, 0.18); - border-radius: 8px; - background: - radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92), transparent 42%), - rgba(255, 255, 255, 0.62); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.72), - 0 18px 34px rgba(58, 112, 152, 0.09); -} - -.air-lens-panel, -.air-actions-panel { - padding: 14px; -} - -.air-lens-form { - display: grid; - gap: 8px; -} - -.air-lens-form label, -.air-section-heading h2, -.air-actions-panel h2 { - color: #143b55; - font-size: 13px; - font-weight: 860; -} - -.air-search-row { - display: grid; - grid-template-columns: 20px minmax(0, 1fr) auto; - align-items: center; - gap: 8px; - height: 44px; - border: 1px solid rgba(93, 154, 190, 0.2); - border-radius: 8px; - padding: 0 7px 0 12px; - background: - radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(219, 245, 255, 0.58)); -} - -.air-search-row svg { - color: #3d8fab; -} - -.air-search-row input, -.air-search-row select { - min-width: 0; - height: 32px; - border: 0; - padding: 0; - background: transparent; - color: #173f5a; - font-size: 13px; - font-weight: 720; - box-shadow: none; -} - -.air-search-row select { - overflow: hidden; - text-overflow: ellipsis; -} - -.air-search-row input:focus, -.air-search-row select:focus { - box-shadow: none; -} - -.air-search-row button, -.air-action-buttons button, -.air-history-row button { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 8px; -} - -.air-search-row button { - height: 30px; - padding: 0 14px; -} - -.air-lens-buttons { - display: grid; - grid-template-columns: repeat(5, minmax(0, 1fr)); - gap: 8px; - margin-top: 12px; -} - -.air-lens-buttons button { - display: grid; - min-width: 0; - height: 48px; - grid-template-columns: 18px minmax(0, 1fr); - gap: 6px; - align-items: center; - border-radius: 8px; - padding: 0 10px; - background: rgba(255, 255, 255, 0.58); - color: #426985; - font-size: 11px; - font-weight: 820; -} - -.air-lens-buttons button.active, -.air-lens-buttons button:hover { - border-color: rgba(42, 141, 172, 0.3); - background: - radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.96), transparent 42%), - rgba(229, 250, 255, 0.72); - color: #226f96; -} - -.air-lens-buttons svg, -.air-action-buttons svg, -.air-history-row button svg { - width: 16px; - height: 16px; -} - -.air-lens-buttons span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.air-lens-meta { - display: flex; - min-width: 0; - flex-wrap: wrap; - gap: 8px; - margin-top: 10px; - color: #5e7d94; - font-size: 11px; - font-weight: 760; -} - -.air-lens-meta span { - min-width: 0; - max-width: 100%; - overflow: hidden; - border: 1px solid rgba(69, 145, 174, 0.14); - border-radius: 999px; - padding: 4px 8px; - background: rgba(234, 251, 255, 0.65); - text-overflow: ellipsis; - white-space: nowrap; -} - -.air-actions-panel { - display: grid; - grid-template-columns: minmax(0, 1fr); - align-content: start; - gap: 10px; -} - -.air-actions-panel p, -.air-section-heading p { - margin: 4px 0 0; - color: #5c7c93; - font-size: 12px; - font-weight: 650; -} - -.air-action-buttons { - display: grid; - grid-template-columns: 1fr; - gap: 8px; -} - -.air-action-buttons button { - min-height: 38px; - gap: 8px; - padding: 0 12px; - font-size: 12px; - font-weight: 820; -} - -.air-preview-panel { - grid-row: 2; - overflow: hidden; - padding: 14px; -} - -.air-history-panel { - grid-row: 2; - display: grid; - grid-template-rows: auto minmax(0, 1fr); - overflow: hidden; - padding: 14px; -} - -.air-section-heading { - display: flex; - min-width: 0; - align-items: start; - justify-content: space-between; - gap: 12px; - margin-bottom: 12px; -} - -.air-section-heading > div { - min-width: 0; -} - -.air-section-heading > span, -.air-section-heading > svg { - flex: 0 0 auto; - color: #5e7d94; - font-size: 11px; - font-weight: 760; -} - -.air-preview-layout { - display: grid; - min-height: 0; - height: calc(100% - 52px); - grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr); - gap: 12px; -} - -.air-source-stack, -.air-history-list, -.air-markdown-preview { - min-height: 0; - overflow-x: hidden; - overflow-y: auto; -} - -.air-source-stack, -.air-history-list { - display: grid; - align-content: start; - gap: 8px; - padding-right: 4px; -} - -.air-source-row { - display: grid; - min-width: 0; - grid-template-columns: 34px minmax(0, 1fr); - gap: 9px; - border: 1px solid rgba(80, 151, 183, 0.16); - border-radius: 8px; - padding: 9px; - background: rgba(255, 255, 255, 0.62); -} - -.air-source-row > span { - display: grid; - place-items: center; - width: 32px; - height: 32px; - border: 1px solid rgba(43, 146, 112, 0.2); - border-radius: 999px; - background: rgba(225, 249, 242, 0.7); - color: #2b9270; - font-size: 13px; - font-weight: 880; -} - -.air-source-row div, -.air-history-row div:first-child { - min-width: 0; -} - -.air-source-row strong, -.air-history-row strong { - display: block; - overflow: hidden; - color: #143b55; - font-size: 13px; - font-weight: 860; - text-overflow: ellipsis; - white-space: nowrap; -} - -.air-source-row p { - display: -webkit-box; - margin: 4px 0; - overflow: hidden; - color: #416177; - font-size: 12px; - font-weight: 620; - line-height: 1.4; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; -} - -.air-source-row small, -.air-history-row small, -.air-history-row span { - display: block; - overflow: hidden; - color: #638199; - font-size: 10px; - font-weight: 780; - text-overflow: ellipsis; - white-space: nowrap; -} - -.air-markdown-preview { - margin: 0; - border: 1px solid rgba(80, 151, 183, 0.16); - border-radius: 8px; - padding: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 251, 253, 0.72)), - rgba(255, 255, 255, 0.7); - color: #243b55; - font-family: 'SFMono-Regular', 'SF Mono', Consolas, monospace; - font-size: 11px; - line-height: 1.55; - white-space: pre-wrap; - user-select: text; -} - -.air-history-row { - display: grid; - min-width: 0; - grid-template-columns: minmax(0, 1fr) auto; - gap: 10px; - align-items: center; - border: 1px solid rgba(80, 151, 183, 0.16); - border-radius: 8px; - padding: 10px; - background: rgba(255, 255, 255, 0.62); -} - -.air-history-row > div:last-child { - display: flex; - flex: 0 0 auto; - gap: 6px; -} - -.air-history-row button { - width: 30px; - height: 30px; - padding: 0; - background: rgba(255, 255, 255, 0.66); - color: #377188; -} - -.air-empty-state { - display: grid; - min-height: 160px; - place-content: center; - padding: 20px; - color: #5c7c93; - font-size: 13px; - font-weight: 680; - line-height: 1.45; - text-align: center; -} - -.flow-header { - position: relative; - z-index: 2; - display: grid; - grid-template-columns: minmax(220px, auto) minmax(280px, 520px); - gap: 18px; - align-items: center; - justify-content: space-between; - margin-bottom: 18px; -} - -.flow-brand { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 12px; -} - -.flow-brand-mark { - display: grid; - flex: 0 0 auto; - place-items: center; - width: 48px; - height: 48px; - border: 1px solid rgba(76, 160, 194, 0.24); - border-radius: 16px; - background: - radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.98), transparent 44%), - linear-gradient(145deg, rgba(216, 252, 255, 0.94), rgba(91, 179, 213, 0.72)); - color: #2a7f9d; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.8), - 0 16px 32px rgba(64, 139, 172, 0.16); -} - -.flow-brand h1 { - margin: 0; - color: #123955; - font-size: 30px; - font-weight: 880; - line-height: 1; -} - -.flow-brand p { - margin: 5px 0 0; - color: #52728d; - font-size: 12px; - font-weight: 760; -} - -.flow-search { - display: grid; - grid-template-columns: 20px minmax(0, 1fr) 74px; - align-items: center; - gap: 8px; - height: 44px; - border: 1px solid rgba(93, 154, 190, 0.2); - border-radius: 14px; - padding: 0 7px 0 13px; - background: - radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(219, 245, 255, 0.58)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 14px 28px rgba(59, 121, 162, 0.1); -} - -.flow-search svg { - color: #3d8fab; -} - -.flow-search input { - height: 32px; - border: 0; - padding: 0; - background: transparent; - color: #173f5a; - font-size: 13px; - font-weight: 720; - box-shadow: none; -} - -.flow-search input:focus { - box-shadow: none; -} - -.flow-search button { - display: inline-flex; - align-items: center; - justify-content: center; - height: 30px; - border-radius: 10px; - padding: 0 14px; -} - -.flow-stage { - position: relative; - z-index: 1; - display: grid; - min-height: 0; - grid-template-columns: minmax(0, 1fr) 320px; - gap: 18px; -} - -.flow-canvas { - position: relative; - min-width: 0; - min-height: 0; - overflow: hidden; - border: 1px solid rgba(97, 158, 196, 0.18); - border-radius: 8px; - background: - radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.88), transparent 22%), - radial-gradient(circle at 76% 72%, rgba(144, 228, 220, 0.14), transparent 32%), - linear-gradient(145deg, rgba(251, 254, 255, 0.76), rgba(224, 242, 249, 0.4)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.74), - 0 22px 46px rgba(51, 108, 154, 0.12); -} - -.flow-graph { - display: block; - width: 100%; - height: 100%; - min-height: 520px; -} - -.flow-current-field path { - fill: none; - stroke: rgba(42, 132, 166, 0.105); - stroke-linecap: round; - stroke-width: 7; - stroke-dasharray: 1 24; -} - -.flow-current-field path:nth-child(2n) { - stroke: rgba(74, 162, 182, 0.075); - stroke-width: 5; - stroke-dasharray: 1 30; -} - -.flow-edge { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; - vector-effect: non-scaling-stroke; - transition: - opacity 160ms ease, - stroke-width 160ms ease; -} - -.flow-edge { - stroke-width: calc(0.7px + var(--edge-strength) * 0.9px); - opacity: calc(0.16 + var(--edge-strength) * 0.18); -} - -.flow-edge.contains { - stroke: rgba(65, 139, 172, 0.18); -} - -.flow-edge.semantic { - stroke: rgba(40, 148, 174, 0.3); -} - -.flow-edge.query-match { - stroke: rgba(42, 151, 126, 0.38); -} - -.flow-edge.selected { - opacity: 0.74; - stroke-width: calc(1.1px + var(--edge-strength) * 1.2px); -} - -.flow-node { - cursor: grab; - outline: none; - transition: opacity 160ms ease; -} - -.flow-node:active { - cursor: grabbing; -} - -.flow-node:hover .flow-node-aura { - fill: rgba(78, 195, 218, 0.22); - stroke: rgba(45, 148, 190, 0.4); -} - -.flow-node.muted { - opacity: 0.34; -} - -.flow-node-aura { - fill: rgba(126, 224, 240, 0.08); - stroke: rgba(73, 156, 186, 0.16); - stroke-width: 1.2; -} - -.flow-node-core { - stroke: rgba(255, 255, 255, 0.88); - stroke-width: 1.6; -} - -.flow-node.hub .flow-node-core { - fill: url('#flow-node-hub'); -} - -.flow-node.source .flow-node-core { - fill: url('#flow-node-source'); -} - -.flow-node.query .flow-node-core { - fill: url('#flow-node-query'); -} - -.flow-node.selected .flow-node-aura { - fill: rgba(78, 195, 218, 0.18); - stroke: rgba(45, 148, 190, 0.42); - stroke-width: 2.2; -} - -.flow-node:focus-visible .flow-node-aura { - stroke: rgba(34, 129, 192, 0.72); - stroke-width: 3; -} - -/* Sources that matched the typed query: a teal ring ties them to the query node's current. */ -.flow-node.matched .flow-node-aura { - fill: rgba(46, 166, 135, 0.2); - stroke: rgba(46, 166, 135, 0.46); - stroke-width: 2; -} - -.flow-node.matched .flow-node-core { - stroke: rgba(204, 246, 232, 0.92); - stroke-width: 2; -} - -.flow-node-label { - fill: #244e68; - font-size: 12px; - font-weight: 820; - letter-spacing: 0; - paint-order: stroke; - pointer-events: none; - stroke: rgba(250, 254, 255, 0.86); - stroke-linejoin: round; - stroke-width: 5px; - text-anchor: middle; -} - -.flow-empty-state { - position: absolute; - inset: 0; - display: grid; - place-content: center; - justify-items: center; - gap: 10px; - padding: 24px; - color: #426985; - text-align: center; -} - -.flow-empty-state svg { - color: #2f91aa; -} - -.flow-empty-state strong { - color: #163b55; - font-size: 18px; - font-weight: 860; -} - -.flow-empty-state span { - max-width: 320px; - color: #5c7c93; - font-size: 13px; - font-weight: 650; - line-height: 1.4; -} - -.flow-empty-state button { - margin-top: 4px; -} - -.flow-inspector { - display: grid; - min-width: 0; - min-height: 0; - max-height: 100%; - grid-template-rows: auto auto minmax(0, 1fr) auto; - gap: 12px; - overflow: hidden; -} - -.flow-stats { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; -} - -.flow-stats span { - display: grid; - min-width: 0; - gap: 2px; - border: 1px solid rgba(85, 149, 184, 0.16); - border-radius: 8px; - padding: 10px; - background: rgba(255, 255, 255, 0.58); - box-shadow: 0 12px 24px rgba(66, 128, 166, 0.08); -} - -.flow-stats strong { - color: #173f5a; - font-size: 18px; - font-weight: 880; -} - -.flow-stats small { - color: #5e7d94; - font-size: 10px; - font-weight: 820; - text-transform: uppercase; -} - -.flow-node-detail, -.flow-recommendations, -.flow-matches, -.flow-omitted { - border: 1px solid rgba(87, 150, 184, 0.18); - border-radius: 8px; - background: - radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.92), transparent 42%), - rgba(255, 255, 255, 0.58); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.72), - 0 18px 34px rgba(58, 112, 152, 0.09); -} - -.flow-node-detail { - min-height: 0; - overflow: hidden; - padding: 14px; -} - -.flow-node-detail header { - display: grid; - grid-template-columns: 34px minmax(0, 1fr); - gap: 10px; - align-items: start; -} - -.flow-node-detail header > span { - display: grid; - place-items: center; - width: 34px; - height: 34px; - border-radius: 10px; - background: - radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98), transparent 45%), - linear-gradient(145deg, rgba(222, 252, 255, 0.95), rgba(97, 180, 213, 0.64)); - color: #287d9d; -} - -.flow-node-detail small { - display: block; - overflow: hidden; - color: #5b7a92; - font-size: 11px; - font-weight: 780; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-node-detail h2 { - display: -webkit-box; - margin: 3px 0 0; - overflow: hidden; - color: #143b55; - font-size: 17px; - font-weight: 860; - line-height: 1.18; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; -} - -.flow-node-detail p { - display: -webkit-box; - margin: 12px 0 0; - overflow: hidden; - color: #415f76; - font-size: 12px; - font-weight: 620; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 4; - line-clamp: 4; -} - -.flow-node-meta { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 11px; -} - -.flow-node-meta span { - min-width: 0; - max-width: 100%; - overflow: hidden; - border: 1px solid rgba(69, 145, 174, 0.16); - border-radius: 999px; - padding: 4px 8px; - background: rgba(234, 251, 255, 0.7); - color: #377188; - font-size: 10px; - font-weight: 820; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-node-detail footer { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-top: 12px; -} - -.flow-node-detail footer button { - display: inline-flex; - align-items: center; - gap: 6px; - height: 30px; - border-radius: 9px; - padding: 0 10px; - color: #2e7591; - font-size: 11px; -} - -.flow-node-detail footer button svg { - flex: 0 0 auto; -} - -.flow-node-detail.empty { - display: grid; - justify-items: start; - gap: 8px; - color: #55768f; -} - -.flow-node-detail.empty strong { - color: #173f5a; - font-size: 15px; - font-weight: 840; -} - -.flow-node-detail.empty span { - font-size: 12px; - font-weight: 640; - line-height: 1.4; -} - -.flow-recommendations { - display: grid; - gap: 8px; - padding: 12px; -} - -.flow-recommendations strong { - color: #173f5a; - font-size: 12px; - font-weight: 860; -} - -.flow-recommendations button { - justify-content: flex-start; - height: 30px; - border-radius: 9px; - color: #52728c; - font-size: 11px; - box-shadow: none; -} - -.flow-hint { - color: #5c7c93; - font-size: 12px; - font-weight: 640; - line-height: 1.4; -} - -.flow-matches { - display: grid; - min-height: 0; - grid-template-rows: auto minmax(0, 1fr); - gap: 12px; - overflow: hidden; - padding: 14px; -} - -.flow-matches > strong { - overflow: hidden; - color: #173f5a; - font-size: 12px; - font-weight: 860; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-match-list { - display: grid; - align-content: start; - gap: 10px; - min-height: 0; - margin: -4px; - padding: 4px 6px 4px 4px; - overflow-y: auto; - scrollbar-color: rgba(82, 178, 219, 0.38) transparent; - scrollbar-width: thin; -} - -.flow-match { - display: grid; - grid-template-columns: 42px minmax(0, 1fr); - align-items: center; - gap: 12px; - width: 100%; - min-height: 96px; - height: 96px; - overflow: hidden; - border: 1px solid rgba(87, 150, 184, 0.16); - border-radius: 11px; - padding: 10px 12px 10px 10px; - background: rgba(255, 255, 255, 0.62); - text-align: left; - cursor: pointer; - transition: - border-color 140ms ease, - background 140ms ease; -} - -.flow-match:hover { - border-color: rgba(46, 166, 135, 0.4); - background: rgba(232, 251, 246, 0.82); -} - -.flow-match.active { - border-color: rgba(46, 166, 135, 0.64); - background: rgba(224, 248, 240, 0.92); -} - -.flow-match-score { - display: grid; - align-self: center; - place-items: center; - width: 40px; - height: 40px; - border-radius: 999px; - border: 1px solid rgba(46, 166, 135, 0.28); - background: - radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95), transparent 52%), - rgba(46, 166, 135, 0.14); - color: #1b7259; - font-size: 13px; - font-weight: 880; - font-variant-numeric: tabular-nums; -} - -.flow-match-copy { - display: grid; - min-width: 0; - max-height: 76px; - gap: 4px; - overflow: hidden; -} - -.flow-match-meta { - overflow: hidden; - color: #5e7d94; - font-size: 10px; - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-match-copy strong { - display: block; - overflow: hidden; - color: #173f5a; - font-size: 13px; - font-weight: 840; - line-height: 1.18; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-match-excerpt { - display: block; - overflow: hidden; - margin-top: 1px; - color: #41566c; - font-size: 11px; - font-weight: 560; - line-height: 1.25; - text-overflow: ellipsis; - white-space: nowrap; -} - -.flow-match-tags { - display: flex; - min-width: 0; - flex-wrap: nowrap; - align-items: center; - gap: 6px; - overflow: hidden; - margin-top: 1px; -} - -.flow-match-strength { - border: 1px solid rgba(46, 166, 135, 0.22); - border-radius: 999px; - padding: 2px 8px; - background: rgba(224, 248, 240, 0.8); - color: #1b7259; - font-size: 9.5px; - font-weight: 820; -} - -.flow-match-open { - display: inline-flex; - flex: 0 0 auto; - align-items: center; - gap: 3px; - border-radius: 999px; - padding: 2px 7px; - color: #2f7591; - font-size: 9.5px; - font-weight: 800; - cursor: pointer; - transition: background 140ms ease; -} - -.flow-match-open:hover { - background: rgba(228, 245, 252, 0.9); -} - -.flow-omitted { - padding: 10px 12px; - color: #5a768d; - font-size: 11px; - font-weight: 680; - line-height: 1.35; -} - -.dashboard-hero, -.dashboard-grid, -.recent-captures { - position: relative; - z-index: 1; -} - -.dashboard-hero { - position: relative; - display: flex; - min-height: 294px; - align-items: center; - justify-content: space-between; - margin: 0 -34px 1px; - overflow: hidden; - padding: 68px 74px 48px; - border-bottom: 1px solid rgba(143, 165, 196, 0.16); - background: - radial-gradient(circle at 52% 14%, rgba(255, 255, 255, 0.92), transparent 18%), - radial-gradient(circle at 72% 54%, rgba(126, 218, 238, 0.28), transparent 22%), - radial-gradient(circle at 86% 24%, rgba(143, 114, 207, 0.12), transparent 18%), - linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0)); -} - -.dashboard-hero::before { - position: absolute; - right: 24%; - bottom: -32px; - width: 560px; - height: 218px; - border-radius: 50%; - background: - radial-gradient(circle at 18% 58%, rgba(255, 255, 255, 0.95), transparent 28%), - radial-gradient(circle at 48% 42%, rgba(221, 249, 255, 0.82), transparent 34%), - radial-gradient(circle at 77% 54%, rgba(255, 255, 255, 0.9), transparent 30%); - content: ''; - filter: blur(5px); -} - -.dashboard-hero::after { - position: absolute; - inset: 0; - pointer-events: none; - content: ''; - background-image: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 1.2px, transparent 1.5px); - background-size: 64px 64px; - mask-image: linear-gradient(to bottom, #000, transparent 86%); -} - -.dashboard-hero p, -.panel-header p { - color: black; - font-size: 22px; - font-family: var(--font-display); - letter-spacing: 0; - line-height: 1.45; - text-transform: none; -} -.panel-header p span { - font-family: var(--font-ice); - font-size: 14px; -} -.panel-header h2 { - font-family: var(--font-old); - font-size: 12px; - color: var(--muted); - margin-top: 1px; - line-height: 1; -} - -.hero-copy { - position: relative; - z-index: 2; -} - -.hero-copy p { - margin-left: 30px; -} - -.hero-copy h1 { - font-size: 4rem; - font-weight: 800; - line-height: 1.1; - color: #000; - - /* Icy Gradient Fill */ - background: linear-gradient(135deg, #000000 15%, #bbf1fa 70%, #7ed7ed 100%); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - - /* Layered Text Glow (Chilled Haze) */ - text-shadow: - 0 0 10px rgba(255, 255, 255, 0.6), - /* Crisp white core */ 0 0 25px rgba(126, 215, 237, 0.5), - /* Mid-tone icy blue mist */ 0 0 50px rgba(58, 146, 196, 0.3); /* Deep ambient arctic haze */ -} - -.start-page-hero-copy { - position: relative; - display: grid; - place-items: center; -} - -.start-page-hero-copy::before, -.start-page-hero-copy::after { - position: absolute; - pointer-events: none; - content: ''; -} - -.start-page-hero-copy::before { - inset: -20px -52px; - z-index: -1; - border-radius: 999px; - background: - radial-gradient(circle at 24% 50%, rgba(103, 232, 249, 0.18), transparent 34%), - radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.44), transparent 36%), - radial-gradient(circle at 78% 54%, rgba(143, 114, 207, 0.12), transparent 34%); - filter: blur(11px); - opacity: 0.58; - animation: discoverGlow 18s ease-in-out infinite alternate; -} - -.start-page-hero-copy::after { - right: 12%; - bottom: -10px; - left: 12%; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(80, 162, 196, 0.42), transparent); -} - -.start-page-hero-copy h1 { - --discover-gradient: linear-gradient( - 105deg, - #071121 10%, - #102846 20%, - #1f7f9a 38%, - #e9fbff 50%, - #5eddec 60%, - #6657c8 76%, - #102846 90%, - #071121 100% - ); - - position: relative; - font-family: var(--font-display); - margin: 0; - font-size: clamp(33px, min(4.2vw, 6.2vh), 20px); - font-weight: 600; - line-height: 0.86; - letter-spacing: 0.064em; - color: #0a172b; - - background: var(--discover-gradient); - background-size: 260% 100%; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - animation: discoverTextFlow 24s cubic-bezier(0.45, 0, 0.2, 1) infinite; - - filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) - drop-shadow(0 8px 16px rgba(8, 25, 49, 0.16)) drop-shadow(0 0 14px rgba(103, 232, 249, 0.16)); -} - -@keyframes discoverTextFlow { - 0%, - 100% { - background-position: 6% 50%; - } - - 50% { - background-position: 94% 50%; - } - - 72% { - background-position: 72% 50%; - } -} - -@keyframes discoverGlow { - 0% { - opacity: 0.48; - transform: translate3d(-4px, 1px, 0) scale(0.98); - } - - 50% { - opacity: 0.82; - transform: translate3d(3px, -1px, 0) scale(1.02); - } - - 100% { - opacity: 0.62; - transform: translate3d(5px, 2px, 0) scale(1); - } -} - -.custom-font { - font-family: var(--font-old); -} - -.dashboard-hero h1 { - max-width: 680px; - margin: 0; - color: #14233c; - font-family: var(--font-old); - font-size: 66px; - font-weight: 600; - letter-spacing: 0.12em; - line-height: 1; - text-shadow: 0 18px 40px rgba(67, 127, 154, 0.12); -} - -.dashboard-hero p { - margin-top: 16px; - color: #6f7fa0; -} - -.hero-orb { - position: absolute; - right: 12%; - top: -12px; - z-index: 2; - display: grid; - place-items: center; - width: 320px; - height: 320px; - pointer-events: none; - user-select: none; - -webkit-user-drag: none; - animation: heroOrbFloat 8.5s ease-in-out infinite; -} - -.hero-orb::before { - position: absolute; - inset: -54px; - border-radius: 999px; - content: ''; - background: - radial-gradient(circle at 48% 44%, rgba(255, 255, 255, 0.74), transparent 30%), - radial-gradient(circle at 50% 50%, rgba(186, 230, 253, 0.38), transparent 48%), - radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.14), transparent 66%); - filter: blur(5px); - opacity: 0.82; - animation: heroOrbHalo 7.5s ease-in-out infinite; -} - -.hero-orb img { - position: relative; - z-index: 2; - width: 300px; - height: 300px; - object-fit: contain; - filter: drop-shadow(0 26px 32px rgba(58, 115, 146, 0.2)) - drop-shadow(0 0 28px rgba(255, 255, 255, 0.86)); - pointer-events: none; - user-select: none; - -webkit-user-drag: none; - animation: heroOrbSpin 200s linear infinite; -} - -.hero-orb-aura { - position: absolute; - inset: 30px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.72); - border-radius: 999px; - background: - radial-gradient(circle at 36% 25%, rgba(255, 255, 255, 0.92), transparent 22%), - radial-gradient(circle at 66% 70%, rgba(98, 216, 198, 0.16), transparent 36%), - radial-gradient(circle, rgba(126, 215, 237, 0.18), transparent 62%); - - box-shadow: - inset 0 0 40px rgba(255, 255, 255, 0.6), - /* Brightened inner frost */ 0 0 20px rgba(255, 255, 255, 0.4), - /* Core white intense glow */ 0 0 60px rgba(185, 226, 250, 0.5), - /* Vivid icy cyan mid-glow */ 0 0 120px rgba(58, 146, 196, 0.3), - /* Deep arctic blue wide haze */ 0 30px 80px rgba(0, 0, 0, 0.15); /* Subtle grounding shadow */ - animation: heroOrbGlow 6.75s ease-in-out infinite; -} - -.hero-orb-aura::before, -.hero-orb-aura::after { - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - mix-blend-mode: screen; - content: ''; -} - -.hero-orb-aura::before { - background: - radial-gradient(circle at 38% 14%, rgba(255, 255, 255, 0.96), transparent 26%), - conic-gradient( - from 30deg, - transparent 0deg, - rgba(255, 255, 255, 0.58) 26deg, - rgba(125, 211, 252, 0.24) 58deg, - transparent 100deg, - transparent 360deg - ); - opacity: 0.7; - animation: heroOrbSheen 12s linear infinite; -} - -.hero-orb-aura::after { - inset: 12px; - border: 1px solid rgba(255, 255, 255, 0.38); - background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), transparent 36%); - opacity: 0.54; - animation: heroOrbSheen 18s linear infinite reverse; -} - -@keyframes heroOrbFloat { - 0%, - 100% { - transform: translateY(0) scale(1); - } - 50% { - transform: translateY(-10px) scale(1.012); - } -} - -@keyframes heroOrbSpin { - to { - transform: rotate(360deg); - } -} - -@keyframes heroOrbSheen { - to { - transform: rotate(360deg); - } -} - -@keyframes heroOrbHalo { - 0%, - 100% { - opacity: 0.68; - transform: scale(0.98); - } - 50% { - opacity: 0.98; - transform: scale(1.04); - } -} - -@keyframes heroOrbGlow { - 0%, - 100% { - box-shadow: - inset 0 0 40px rgba(255, 255, 255, 0.6), - 0 0 20px rgba(255, 255, 255, 0.4), - 0 0 60px rgba(185, 226, 250, 0.5), - 0 0 120px rgba(58, 146, 196, 0.3), - 0 30px 80px rgba(0, 0, 0, 0.15); - } - 50% { - box-shadow: - inset 0 0 48px rgba(255, 255, 255, 0.74), - 0 0 34px rgba(255, 255, 255, 0.86), - 0 0 88px rgba(185, 226, 250, 0.76), - 0 0 150px rgba(58, 146, 196, 0.44), - 0 34px 88px rgba(0, 0, 0, 0.12); - } -} - -.start-orb { - position: relative; - z-index: 2; - display: grid; - place-items: center; - width: 100%; - height: 100%; - pointer-events: none; - user-select: none; - -webkit-user-drag: none; - animation: startOrbFloat 7.5s ease-in-out infinite; -} - -.start-orb-bloom, -.start-orb-rays, -.start-orb-spark { - position: absolute; - pointer-events: none; - content: ''; -} - -.start-orb-bloom { - inset: -40%; - border-radius: 999px; - background: - radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.78), transparent 21%), - radial-gradient(circle at 42% 52%, rgba(125, 211, 252, 0.44), transparent 38%), - radial-gradient(circle at 62% 60%, rgba(45, 212, 191, 0.24), transparent 52%), - radial-gradient(circle, rgba(120, 119, 255, 0.12), transparent 66%); - filter: blur(10px); - opacity: 0.95; - animation: startOrbBloom 6.8s ease-in-out infinite; -} - -.start-orb-rays { - inset: -30%; - border-radius: 999px; - background: conic-gradient( - from 24deg, - transparent 0deg, - rgba(255, 255, 255, 0.46) 20deg, - rgba(125, 211, 252, 0.22) 48deg, - transparent 84deg, - transparent 132deg, - rgba(186, 230, 253, 0.24) 164deg, - transparent 206deg, - transparent 360deg - ); - filter: blur(3px); - opacity: 0.5; - animation: startOrbRays 24s linear infinite; -} - -.start-orb img { - position: relative; - z-index: 2; - width: 100%; - height: 100%; - object-fit: contain; - filter: drop-shadow(0 26px 32px rgba(58, 115, 146, 0.2)) - drop-shadow(0 0 28px rgba(255, 255, 255, 0.86)); - pointer-events: none; - user-select: none; - -webkit-user-drag: none; - animation: heroOrbSpin 200s linear infinite; -} - -.start-orb-aura { - position: absolute; - inset: 13%; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.72); - border-radius: 999px; - background: - radial-gradient(circle at 36% 25%, rgba(255, 255, 255, 0.92), transparent 22%), - radial-gradient(circle at 66% 70%, rgba(98, 216, 198, 0.16), transparent 36%), - radial-gradient(circle, rgba(126, 215, 237, 0.18), transparent 62%); - - box-shadow: - inset 0 0 40px rgba(255, 255, 255, 0.6), - /* Brightened inner frost */ 0 0 20px rgba(255, 255, 255, 0.84), - /* Core white intense glow */ 0 0 60px rgba(185, 226, 250, 0.75), - /* Vivid icy cyan mid-glow */ 0 0 120px rgba(58, 146, 196, 0.63), - /* Deep arctic blue wide haze */ 0 30px 80px rgba(0, 0, 0, 0.15); /* Subtle grounding shadow */ - animation: startOrbBreath 6.5s ease-in-out infinite; -} - -.start-orb-spark { - z-index: 3; - width: 7px; - height: 7px; - border-radius: 999px; - background: radial-gradient(circle, #ffffff 0 24%, rgba(125, 211, 252, 0.8) 38%, transparent 72%); - filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.9)); - animation: startOrbSpark 4.8s ease-in-out infinite; -} - -.start-orb-spark-1 { - top: 18%; - left: 21%; -} - -.start-orb-spark-2 { - top: 29%; - right: 15%; - animation-delay: -1.1s; -} - -.start-orb-spark-3 { - right: 25%; - bottom: 20%; - animation-delay: -2.2s; -} - -.start-orb-spark-4 { - bottom: 32%; - left: 14%; - animation-delay: -3.3s; -} - -/* Two slowly rotating layers give the orb life: an orbiting inner glimmer and a - sweeping conic sheen. Clipped to the circle by the aura's overflow + radius. */ -.start-orb-aura::before, -.start-orb-aura::after { - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - mix-blend-mode: screen; - content: ''; -} - -.start-orb-aura::before { - background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.9), transparent 38%); - opacity: 0.85; - animation: startOrbOrbit 16s linear infinite; -} - -.start-orb-aura::after { - background: conic-gradient( - from 0deg, - transparent 0deg, - rgba(255, 255, 255, 0.5) 36deg, - transparent 96deg, - transparent 360deg - ); - opacity: 0.55; - animation: startOrbSheen 11s linear infinite reverse; -} - -@keyframes startOrbFloat { - 0%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(-9px); - } -} - -@keyframes startOrbBloom { - 0%, - 100% { - opacity: 0.72; - transform: scale(0.95); - } - - 50% { - opacity: 1; - transform: scale(1.06); - } -} - -@keyframes startOrbRays { - to { - transform: rotate(360deg); - } -} - -@keyframes startOrbSpark { - 0%, - 100% { - opacity: 0.28; - transform: translateY(0) scale(0.72); - } - - 45% { - opacity: 1; - transform: translateY(-7px) scale(1.2); - } -} - -@keyframes startOrbOrbit { - to { - transform: rotate(360deg); - } -} - -@keyframes startOrbSheen { - to { - transform: rotate(360deg); - } -} - -@keyframes startOrbBreath { - 0%, - 100% { - box-shadow: - inset 0 0 40px rgba(255, 255, 255, 0.6), - 0 0 20px rgba(255, 255, 255, 0.78), - 0 0 60px rgba(185, 226, 250, 0.62), - 0 0 120px rgba(58, 146, 196, 0.5), - 0 30px 80px rgba(0, 0, 0, 0.15); - } - 50% { - box-shadow: - inset 0 0 48px rgba(255, 255, 255, 0.72), - 0 0 32px rgba(255, 255, 255, 0.96), - 0 0 86px rgba(185, 226, 250, 0.92), - 0 0 160px rgba(58, 146, 196, 0.82), - 0 30px 80px rgba(0, 0, 0, 0.15); - } -} - -@media (prefers-reduced-motion: reduce) { - .start-page-hero-copy::before, - .start-page-hero-copy h1, - .start-orb, - .start-orb-bloom, - .start-orb-rays, - .start-orb-spark, - .start-orb-aura, - .start-orb-aura::before, - .start-orb-aura::after { - animation: none; - } -} - -.dashboard-grid { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 0; - min-height: 0; - padding: 0 2px; -} - -.collections-pane, -.panel-section { - border: 1px solid var(--line); - border-radius: 16px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62)), - rgba(255, 255, 255, 0.7); - box-shadow: var(--shadow); - backdrop-filter: blur(22px) saturate(1.26); -} - -.collections-pane { - min-height: 0; - padding: 26px 28px; -} - -.pane-heading, -.section-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; -} - -.pane-heading { - margin-bottom: 22px; -} - -.concept-heading { - display: grid; - grid-template-columns: 44px minmax(0, 1fr) auto; - justify-content: stretch; -} - -.heading-icon { - display: grid; - place-items: center; - width: 38px; - height: 38px; - border: 1px solid rgba(107, 140, 190, 0.24); - border-radius: 999px; - color: #5b80b7; - background: rgba(255, 255, 255, 0.72); -} - -.heading-icon svg, -.recent-heading svg { - width: 23px; - height: 23px; -} - -.pane-heading h2, -.section-heading h2 { - color: var(--ink); - font-size: 14px; - font-weight: 820; -} - -.pane-heading span, -.section-heading span { - overflow: hidden; - color: var(--muted); - font-size: 11px; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.collection-form { - display: grid; - gap: 9px; - margin-bottom: 14px; -} - -.collection-form.compact { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - margin-bottom: 18px; -} - -.new-collection-button { - width: 168px; - padding: 0 18px; -} - -.collection-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - margin-bottom: 16px; - border: 1px solid rgba(145, 166, 195, 0.2); - border-radius: 14px; - padding: 12px 14px; - background: rgba(255, 255, 255, 0.5); -} - -.collection-toolbar span { - min-width: 0; - overflow: hidden; - color: var(--muted); - font-size: 12px; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.collection-toolbar strong { - color: var(--ink); -} - -.collection-toolbar div { - display: flex; - flex: 0 0 auto; - gap: 8px; -} - -.collection-toolbar button { - height: 30px; - padding: 0 10px; - box-shadow: none; -} - -.collection-list, -.results-list { - display: flex; - flex-direction: column; - gap: 9px; -} - -.collection-list { - max-height: 430px; - overflow: auto; -} - -.collection-accordion { - overflow: hidden; - border: 1px solid rgba(145, 166, 195, 0.16); - border-radius: 14px; - background: rgba(255, 255, 255, 0.34); - transition: - border-color 180ms ease, - background 180ms ease, - box-shadow 180ms ease, - transform 180ms ease; -} - -.collection-accordion.dragging { - opacity: 0.56; - transform: scale(0.992); -} - -.collection-accordion.drop-target { - border-color: rgba(78, 178, 210, 0.44); - background: - radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9), transparent 34%), - rgba(231, 249, 255, 0.72); - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0.72), - 0 18px 38px rgba(68, 153, 197, 0.14); - transform: translateY(-1px); -} - -.collection-accordion.reorder-target { - border-color: rgba(116, 145, 218, 0.42); - background: - radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.92), transparent 34%), - rgba(235, 242, 255, 0.74); - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0.72), - 0 16px 34px rgba(86, 111, 178, 0.13); - transform: translateY(-1px); -} - -.collection-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - width: 100%; - align-items: center; - gap: 8px; - border: 0; - padding: 8px 10px 8px 0; - background: transparent; - box-shadow: none; -} - -.collection-toggle { - display: grid; - grid-template-columns: 48px minmax(0, 1fr) 118px 20px; - min-height: 74px; - align-items: center; - gap: 12px; - min-width: 0; - border: 0; - padding: 10px 0 10px 16px; - background: transparent; - box-shadow: none; - text-align: left; -} - -.collection-toggle > svg { - width: 18px; - height: 18px; - color: var(--muted); - transition: transform 180ms ease; -} - -.collection-accordion.open .collection-toggle > svg { - transform: rotate(90deg); -} - -.collection-row-actions { - display: flex; - gap: 6px; -} - -.collection-row-actions button { - height: 28px; - border-radius: 8px; - padding: 0 9px; - font-size: 11px; - box-shadow: none; - transition: - transform 140ms ease, - border-color 140ms ease, - background 140ms ease, - color 140ms ease, - box-shadow 140ms ease; -} - -.collection-row-actions button:hover { - border-color: rgba(79, 174, 202, 0.28); - background: - radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 40%), - rgba(236, 249, 255, 0.76); - color: var(--accent-strong); - box-shadow: 0 8px 18px rgba(74, 145, 194, 0.1); - transform: translateY(-1px); -} - -.danger-button:hover { - border-color: rgba(184, 91, 89, 0.25); - background: rgba(255, 239, 239, 0.72); - color: var(--danger); -} - -.collection-captures { - border-top: 1px solid rgba(145, 166, 195, 0.15); - padding: 14px; - background: rgba(249, 252, 255, 0.42); -} - -.collection-capture-list { - display: grid; - max-height: 392px; - gap: 8px; - overflow-x: hidden; - overflow-y: auto; - padding: 2px 6px 2px 2px; - scroll-behavior: smooth; -} - -.collection-glyph { - display: grid; - place-items: center; - width: 42px; - height: 42px; - border-radius: 10px; - background: linear-gradient(145deg, #edf6ff, #ffffff); - color: #5c91dd; -} - -.collection-glyph svg { - width: 23px; - height: 23px; -} - -.collection-main, -.collection-meta { - display: grid; - gap: 4px; -} - -.collection-main { - min-width: 0; -} - -.collection-main strong, -.collection-meta strong { - overflow: hidden; - color: var(--ink); - font-size: 13px; - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.collection-meta { - justify-items: start; -} - -.collection-row.active, -.collection-row:hover { - border-color: rgba(86, 139, 218, 0.36); - background: - radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.95), transparent 35%), - linear-gradient(135deg, rgba(233, 244, 255, 0.9), rgba(255, 255, 255, 0.78)); -} - -.collection-row span, -.result-item h3 { - overflow: hidden; - color: var(--ink); - font-size: 13px; - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; -} - -.capture-link-button { - cursor: pointer; - height: auto; - max-width: 100%; - overflow: hidden; - border: 0; - padding: 0; - background: transparent; - color: var(--accent-strong); - font-size: 11px; - font-weight: 760; - box-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; -} - -.capture-link-button:hover { - text-decoration: underline; -} - -.recent-captures { - margin-top: 28px; - padding: 26px 28px; -} - -.recent-heading { - display: flex; - align-items: flex-start; - justify-content: space-between; - margin-bottom: 16px; -} - -.recent-heading div { - display: grid; - grid-template-columns: 34px minmax(0, 1fr); - column-gap: 8px; - align-items: center; -} - -.recent-heading svg { - grid-row: span 2; - color: #8aa6ce; -} - -.recent-heading h2 { - color: var(--ink); - font-size: 18px; - font-weight: 820; -} - -.recent-heading p { - color: var(--muted); - font-size: 13px; -} - -.recent-card-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 14px; -} - -.recent-card { - min-height: 148px; - border: 1px solid rgba(145, 166, 195, 0.22); - border-radius: 14px; - padding: 14px; - background: rgba(255, 255, 255, 0.62); - cursor: grab; - transition: - transform 150ms ease, - border-color 150ms ease, - background 150ms ease, - box-shadow 150ms ease, - opacity 150ms ease; -} - -.recent-card:hover { - border-color: rgba(79, 174, 202, 0.25); - background: - radial-gradient(circle at 22% 15%, rgba(255, 255, 255, 0.9), transparent 32%), - rgba(248, 253, 255, 0.78); - box-shadow: 0 14px 30px rgba(71, 122, 174, 0.12); - transform: translateY(-2px); -} - -.recent-card.dragging { - border-color: rgba(79, 174, 202, 0.34); - opacity: 0.55; - cursor: grabbing; - transform: scale(0.985); -} - -/* Insertion highlight when reordering a source within its own hub. Scoped to the - capture list so it overrides the list's flatter card style. */ -.collection-capture-list .recent-card.reorder-target { - border-color: rgba(116, 145, 218, 0.5); - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0.7), - 0 12px 26px rgba(86, 111, 178, 0.16); - transform: translateY(-2px); -} - -.recent-source, -.recent-card .data-badges { - display: flex; - align-items: center; - justify-content: space-between; - color: var(--muted); - font-size: 11px; - font-weight: 700; -} - -.recent-delete { - display: grid; - place-items: center; - width: 28px; - height: 28px; - border-color: rgba(145, 166, 195, 0.18); - border-radius: 9px; - padding: 0; - background: rgba(255, 255, 255, 0.58); - color: #7b8ba6; - box-shadow: none; -} - -.recent-delete:hover { - border-color: rgba(184, 91, 89, 0.24); - color: var(--danger); -} - -.recent-delete svg { - width: 15px; - height: 15px; -} - -.recent-placeholder-mark { - width: 28px; - height: 28px; -} - -.recent-card h3 { - margin-top: 12px; - color: var(--ink); - font-size: 14px; - font-weight: 820; -} - -.recent-card-title-row { - display: flex; - min-width: 0; - align-items: center; - gap: 10px; - margin-top: 10px; -} - -.recent-card-title-row h3 { - flex: 1 1 auto; - min-width: 0; - margin-top: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Keep the date/chunk badges intact and let the title truncate, rather than letting - the badges wrap or spill past the card edge in a narrow hub. */ -.recent-card-title-row .data-badges { - flex: 0 0 auto; - white-space: nowrap; -} - -.capture-hub-row { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.capture-hub-row span { - display: inline-flex; - max-width: 100%; - align-items: center; - gap: 5px; - overflow: hidden; - border: 1px solid rgba(113, 159, 203, 0.18); - border-radius: 999px; - padding: 3px 8px; - background: rgba(234, 247, 252, 0.7); - color: #54718e; - font-size: 10px; - font-weight: 760; - text-overflow: ellipsis; - white-space: nowrap; -} - -.capture-hub-row svg { - width: 12px; - height: 12px; - flex: 0 0 auto; -} - -.recent-card p { - display: -webkit-box; - margin-top: 8px; - overflow: hidden; - color: #647895; - font-size: 12px; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; -} - -.recent-card .data-badges span { - border-radius: 7px; - padding: 3px 8px; - background: rgba(233, 241, 253, 0.9); - color: var(--accent); -} -.recent-card .data-badges time { - border-radius: 7px; - padding: 3px 8px; - margin: 0 5px; - background: rgba(233, 241, 253, 0.9); - color: #5c85be; -} - -.collection-capture-list .recent-card { - min-height: 0; - border-radius: 11px; - padding: 10px 12px; - background: rgba(255, 255, 255, 0.72); - box-shadow: none; -} - -.collection-capture-list .recent-card:hover { - box-shadow: 0 10px 22px rgba(71, 122, 174, 0.1); -} - -.collection-capture-list .recent-source { - gap: 10px; -} - -.collection-capture-list .capture-link-button { - min-width: 0; -} - -.collection-capture-list .recent-delete { - width: 24px; - height: 24px; - border-radius: 8px; -} - -.collection-capture-list .capture-hub-row { - flex: 0 1 auto; - margin-top: 0; - overflow: hidden; - flex-wrap: nowrap; -} - -.collection-capture-list .capture-hub-row span { - min-width: 0; - font-size: 8px; -} - -.collection-row small, -.capture-note, -.panel-footer, -.answer-card footer { - color: var(--muted); - font-size: 12px; - font-weight: 650; -} - -.result-item, -.answer-card { - border: 1px solid rgba(145, 166, 195, 0.22); - border-radius: 12px; - background: rgba(255, 255, 255, 0.68); -} - -.empty-state { - display: grid; - min-height: 220px; - place-items: center; - padding: 24px; - color: var(--muted); - text-align: center; -} - -.empty-state h2, -.empty-state h3 { - color: var(--ink); - font-weight: 840; -} - -.empty-state p { - max-width: 420px; - margin-top: 8px; - font-size: 13px; - line-height: 1.45; -} - -.empty-state.large { - min-height: 500px; -} - -.intelligence-panel { - z-index: 5; - min-width: 0; - height: 100%; - overflow-x: hidden; - overflow-y: auto; - border-left: 1px solid rgba(143, 165, 196, 0.22); - background: rgba(255, 255, 255, 0.48); - box-shadow: -16px 0 46px rgba(104, 137, 184, 0.08); - backdrop-filter: blur(28px) saturate(1.34); - overscroll-behavior: contain; - scroll-padding-bottom: 28px; - scrollbar-color: rgba(82, 178, 219, 0.38) transparent; - scrollbar-width: thin; - transition: - background 420ms ease, - box-shadow 520ms ease, - border-color 420ms ease; -} - -.intelligence-panel::-webkit-scrollbar { - width: 7px; -} - -.intelligence-panel::-webkit-scrollbar-track { - background: transparent; -} - -.intelligence-panel::-webkit-scrollbar-thumb { - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.22)), - rgba(82, 178, 219, 0.38); -} - -.intelligence-panel.collapsed { - width: var(--panel-collapsed-width); - z-index: 26; - overflow: hidden; - border-left-color: rgba(204, 238, 247, 0.42); - background: rgba(255, 255, 255, 0.28); - box-shadow: - -12px 0 42px rgba(116, 196, 224, 0.12), - inset 1px 0 0 rgba(255, 255, 255, 0.52); -} - -.intelligence-panel::before, -.intelligence-panel::after { - position: absolute; - inset: var(--titlebar-height) 0 0; - pointer-events: none; - content: ''; - opacity: 0; - transition: - opacity 520ms ease, - transform 680ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.intelligence-panel::before { - background: - radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.86), transparent 20%), - radial-gradient(circle at 28% 46%, rgba(188, 245, 255, 0.42), transparent 32%), - linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(220, 249, 255, 0.18)); - filter: blur(10px); - transform: translateX(20px) scaleX(0.9); -} - -.intelligence-panel::after { - background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px); - background-size: 42px 42px; - mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, transparent 94%); - transform: translateY(18px); -} - -.intelligence-panel.collapsed::before { - opacity: 0.94; - transform: translateX(0) scaleX(1); -} - -.intelligence-panel.collapsed::after { - opacity: 0.46; - transform: translateY(0); - animation: panelStardust 5.8s linear infinite; -} - -.panel-toggle { - position: absolute; - top: calc(var(--titlebar-height) + 16px); - right: 10px; - z-index: 8; - height: 32px; - min-width: 42px; - background: rgba(255, 255, 255, 0.82); - color: var(--muted); - font-size: 12px; - font-weight: 760; -} - -.panel-content { - display: flex; - position: relative; - min-height: 100%; - flex-direction: column; - gap: 12px; - padding: calc(var(--titlebar-height) + 24px) 16px 26px; - overflow: visible; - opacity: 1; - transform: translateX(0); - filter: blur(0); - transition: - opacity 300ms ease, - filter 300ms ease, - transform 550ms cubic-bezier(0.25, 1.3, 0.4, 1); -} - -.intelligence-panel.collapsed .panel-content { - pointer-events: none; - opacity: 0; - filter: blur(4px); - transform: translateX(25px) scale(0.93); -} - -.panel-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - padding-right: 58px; -} - -.panel-header h1 { - margin-top: 6px; - color: var(--ink); - font-size: 13px; - font-weight: 840; - line-height: 1.35; -} - -.status-pill { - display: inline-flex; - align-items: center; - height: 26px; - padding: 0 10px; - border: 1px solid rgba(105, 139, 190, 0.18); - border-radius: 999px; - font-size: 11px; - font-weight: 800; -} - -.status-pill.online { - background: rgba(43, 146, 112, 0.1); - color: var(--success); -} - -.status-pill.offline { - background: rgba(184, 91, 89, 0.1); - color: var(--danger); -} - -.status-pill.neutral { - background: rgba(255, 255, 255, 0.72); - color: var(--muted); -} - -.status-toast { - display: inline-flex; - position: fixed; - top: calc(var(--titlebar-height) + 14px); - right: calc(var(--panel-width) + 18px); - z-index: 80; - max-width: min(420px, calc(100vw - 140px)); - align-items: center; - gap: 10px; - border: 1px solid rgba(111, 157, 209, 0.24); - border-radius: 10px; - padding: 10px 13px; - background: rgba(248, 252, 255, 0.94); - color: var(--ink); - box-shadow: 0 16px 44px rgba(64, 105, 146, 0.18); - backdrop-filter: blur(18px); -} - -.status-toast span { - width: 9px; - height: 9px; - flex: 0 0 auto; - border-radius: 999px; - background: var(--accent-strong); - box-shadow: 0 0 0 5px rgba(75, 158, 215, 0.13); -} - -.status-toast strong { - overflow: hidden; - font-size: 12px; - font-weight: 820; - line-height: 1.35; - text-overflow: ellipsis; - white-space: nowrap; -} - -.status-toast.info span { - animation: statusPulse 1.05s ease-in-out infinite; -} - -.status-toast.success span { - background: var(--success); - box-shadow: 0 0 0 5px rgba(42, 148, 111, 0.13); -} - -.status-toast.error { - border-color: rgba(184, 91, 89, 0.28); -} - -.status-toast.error span { - background: var(--danger); - box-shadow: 0 0 0 5px rgba(184, 91, 89, 0.13); -} - -.aether-shell.panel-collapsed .status-toast { - right: calc(var(--panel-collapsed-width) + 18px); -} - -.find-bar { - position: fixed; - z-index: 120; - top: calc(var(--titlebar-height) + 48px); - right: calc(var(--panel-width) + 24px); - display: grid; - grid-template-columns: 18px minmax(150px, 240px) auto auto 30px; - align-items: center; - gap: 8px; - box-sizing: border-box; - height: 42px; - border: 1px solid rgba(41, 132, 202, 0.42); - border-radius: 12px; - padding: 6px 8px 6px 10px; - background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 42%), - linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 246, 255, 0.96)), - rgba(255, 255, 255, 0.96); - box-shadow: - 0 0 0 4px rgba(67, 158, 221, 0.12), - 0 18px 48px rgba(82, 125, 176, 0.24); - backdrop-filter: blur(18px); -} - -.aether-shell.panel-collapsed .find-bar { - right: calc(var(--panel-collapsed-width) + 24px); -} - -.find-bar svg { - width: 16px; - height: 16px; - color: var(--accent-strong); -} - -.find-bar input { - min-width: 0; - height: 28px; - border: 0; - padding: 0 2px; - background: transparent; - color: #18324b; - font: inherit; - font-size: 13px; - font-weight: 720; - outline: none; -} - -.find-bar input::placeholder { - color: rgba(86, 107, 134, 0.68); -} - -.find-count { - min-width: 38px; - text-align: center; - font-size: 12px; - font-weight: 720; - font-variant-numeric: tabular-nums; - color: #56708c; - white-space: nowrap; -} - -.find-count.is-empty { - color: #d2604b; -} - -.find-nav { - display: inline-flex; - align-items: center; - gap: 4px; -} - -.find-nav-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - border: 1px solid rgba(116, 143, 180, 0.18); - border-radius: 9px; - padding: 0; - background: rgba(255, 255, 255, 0.62); - color: #6d7f99; - line-height: 1; - box-shadow: none; - cursor: pointer; -} - -.find-nav-button svg { - width: 16px; - height: 16px; -} - -.find-nav-button:hover:not(:disabled) { - border-color: rgba(67, 145, 204, 0.28); - background: rgba(232, 247, 255, 0.9); - color: var(--accent-strong); -} - -.find-nav-button:disabled { - opacity: 0.4; - cursor: default; -} - -.find-close-button { - width: 28px; - height: 28px; - border: 1px solid rgba(116, 143, 180, 0.18); - border-radius: 9px; - padding: 0; - background: rgba(255, 255, 255, 0.62); - color: #6d7f99; - font-size: 19px; - font-weight: 540; - line-height: 1; - box-shadow: none; -} - -.find-close-button:hover { - border-color: rgba(67, 145, 204, 0.28); - background: rgba(232, 247, 255, 0.9); - color: var(--accent-strong); -} - -.panel-section { - padding: 14px; -} - -.panel-section.mode-section { - display: flex; - flex: 0 0 auto; - min-height: 0; - flex-direction: column; -} - -.panel-section.mode-section.collapsed { - flex: 0 0 auto; -} - -.section-heading { - transition: transform 2s ease; -} - -.field-label { - display: block; - margin-bottom: 6px; - color: var(--muted); - font-size: 11px; - font-weight: 760; -} - -.capture-row, -.search-form { - display: grid; - grid-template-columns: minmax(0, 1fr) 82px; - gap: 8px; -} - -.capture-note { - margin-top: 9px; -} - -.results-list { - max-height: 220px; - margin-top: 10px; - overflow: auto; -} - -.result-item { - padding: 10px; -} - -.result-item span { - color: var(--muted); - font-size: 10px; - font-weight: 700; -} - -.result-item p { - display: -webkit-box; - margin-top: 6px; - overflow: hidden; - color: #3e526f; - font-size: 12px; - line-height: 1.45; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - line-clamp: 3; -} - -.chat-section { - flex: 0 0 auto; - min-height: 0; - transition: - background 300ms ease, - border-color 300ms ease; -} - -.chat-section.open { - flex: 0 0 auto; -} - -.answer-section { - flex: 0 0 auto; - overflow: hidden; -} - -.accordion-heading { - width: 100%; - height: auto; - border: 0; - padding: 0; - background: transparent; - box-shadow: none; - text-align: left; -} - -.accordion-heading h2 { - font-family: var(--font-ice); - font-size: 16px; -} -.accordion-heading span { - font-family: var(--font-old); - font-size: 12px; -} - -.accordion-heading > svg { - width: 15px; - height: 15px; - color: var(--muted); - transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); -} - -.accordion-heading[aria-expanded='true'] > svg { - transform: rotate(90deg); -} - -.flow-heading-icon { - display: inline-grid; - width: 30px; - height: 24px; - place-items: center; - margin-left: auto; - border: 1px solid rgba(90, 185, 224, 0.18); - border-radius: 999px; - color: var(--accent-strong); - background: - radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.9), transparent 42%), - linear-gradient(180deg, rgba(235, 251, 255, 0.86), rgba(182, 234, 250, 0.42)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.86), - 0 6px 16px rgba(64, 154, 205, 0.12); -} - -.flow-heading-icon svg { - width: 17px; - height: 17px; - stroke-width: 2.35; -} - -.ask-panel-body { - display: grid; - min-height: 0; - transform-origin: top center; - overflow: hidden; - - transition: - max-height 500ms cubic-bezier(0.25, 1.4, 0.5, 1), - transform 500ms cubic-bezier(0.25, 1.4, 0.5, 1), - opacity 400ms ease, - margin-bottom 500ms cubic-bezier(0.25, 1.4, 0.5, 1); -} - -.ask-panel-body.is-open { - max-height: 400px; - transform: scale(1) translateY(0); - opacity: 1; - margin-bottom: 10px; -} - -.ask-panel-body.is-closed { - max-height: 0; - transform: scale(0.94) translateY(-12px); - opacity: 0; - margin-bottom: 0; -} - -.ask-context-controls { - display: grid; - flex: 0 0 auto; - grid-template-rows: auto minmax(0, auto); - gap: 9px; - min-height: 0; - margin-bottom: 10px; -} - -.ask-context-controls.has-many-hubs { - flex: 0 0 auto; - grid-template-rows: auto minmax(0, auto); -} - -.ask-current-button, -.ask-hub-picker button, -.ask-current-default { - min-width: 0; - box-shadow: none; -} - -.ask-current-default { - display: flex; - height: 32px; - align-items: center; - justify-content: center; - border-radius: 10px; - color: var(--muted); - font-size: 12px; - font-weight: 780; - margin-top: 2px; -} - -.ask-current-button { - display: flex; - align-items: center; - gap: 10px; - width: 99%; - padding: 24px 8px; - border-radius: 12px; - border-color: rgba(133, 158, 193, 0.16); - background: rgba(255, 255, 255, 0.42); - margin-top: 2px; - text-align: left; - transition: - border-color 0.16s ease, - background 0.16s ease; -} - -.ask-current-button:disabled { - cursor: not-allowed; - opacity: 0.7; -} - -.ask-current-badge { - flex: 0 0 auto; - display: grid; - place-items: center; - width: 38px; - height: 38px; - border-radius: 9px; - border: 1px solid rgba(133, 158, 193, 0.16); - background: rgba(255, 255, 255, 0.6); -} - -.flow-current-text { - display: flex; - flex-direction: column; - gap: 1px; - min-width: 0; - flex: 1 1 auto; -} -.flow-current-text strong { - font-weight: 800; - font-size: 13px; - line-height: 1.2; -} - -.ask-current-text { - display: flex; - flex-direction: column; - gap: 1px; - min-width: 0; - flex: 1 1 auto; -} -.ask-current-text strong { - font-weight: 800; - font-size: 13px; - line-height: 1.2; -} -.ask-current-text small { - font-size: 10px; - line-height: 1.2; - color: var(--muted); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - margin-left: 1px; -} - -.ask-current-radio { - flex: 0 0 auto; - display: grid; - place-items: center; - width: 18px; - height: 18px; - border-radius: 50%; - border: 2px solid rgba(133, 158, 193, 0.45); - transition: border-color 0.16s ease; -} - -.ask-current-radio.is-on { - border: 4px solid purple; -} - -.ask-current-radio.is-on::after { - content: ''; - width: 6px; - height: 6px; - border-radius: 50%; - background: purple; -} - -.ask-current-button.active, -.ask-current-button:hover:not(:disabled) { - border-color: rgba(79, 174, 202, 0.28); - background: rgba(238, 250, 255, 0.78); -} - -.ask-current-button.active .ask-current-badge { - border-color: rgba(79, 174, 202, 0.28); - background: rgba(255, 255, 255, 0.82); -} - -.ask-current-button.active .ask-current-text strong { - color: var(--accent-strong); -} - -.ask-current-default { - gap: 8px; -} - -.ask-current-default span { - display: grid; - place-items: center; - width: 24px; - height: 24px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.72); -} - -.ask-current-default svg { - width: 15px; - height: 15px; -} - -.ask-hub-picker { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - align-content: start; - max-height: 118px; - min-height: 0; - gap: 4px; - overflow: auto; - padding-right: 4px; -} - -.ask-context-controls.has-many-hubs .ask-hub-picker { - max-height: 118px; - overflow: auto; -} - -.ask-hub-picker button { - display: grid; - grid-template-columns: minmax(0, 1fr); - min-height: 36px; - align-content: center; - justify-items: center; - gap: 2px; - border-color: rgba(133, 158, 193, 0.16); - border-radius: 8px; - padding: 25px 4px; - background: rgba(255, 255, 255, 0.42); - text-align: center; -} - -.ask-hub-picker button.active { - border-color: var(--prism) !important; - background: - radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.95), transparent 36%), - rgba(238, 250, 255, 0.78); - color: purple !important; -} -.ask-hub-picker button:hover { - border-color: rgba(79, 174, 202, 0.3); - background: - radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.95), transparent 36%), - rgba(238, 250, 255, 0.78); - color: var(--accent-strong); -} - -.ask-hub-picker button > span:first-child { - display: none; - place-items: center; - width: 28px; - height: 28px; - border-radius: 8px; - background: rgba(255, 255, 255, 0.76); -} - -.ask-hub-picker svg { - width: 16px; - height: 16px; -} - -.ask-hub-copy { - display: grid; - min-width: 0; - max-width: 100%; - width: auto; - height: auto; - place-items: center; - align-content: center; - gap: 1px; - border-radius: 0; - background: transparent; -} - -.ask-hub-picker strong, -.ask-hub-picker small { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.ask-hub-picker strong { - font-size: 9.5px; - font-weight: 780; -} - -.ask-hub-picker small { - color: var(--muted); - font-size: 8.5px; - font-weight: 680; -} - -.answer-loading-toggle { - height: 32px; - border-color: rgba(79, 174, 202, 0.2); - border-radius: 9px; - background: rgba(238, 250, 255, 0.68); - color: var(--accent-strong); - font-size: 11px; - font-weight: 780; - box-shadow: none; -} - -.chat-form { - display: grid; - flex: 0 0 auto; - gap: 8px; -} - -.chat-form textarea { - min-height: 88px; - max-height: 142px; - padding: 10px; - resize: vertical; - font-size: 13px; - line-height: 1.45; - user-select: text; -} - -.trail-section { - flex: 0 0 auto; - gap: 9px; - overflow: visible; - transition: - background 300ms ease, - border-color 300ms ease; -} - -.trail-panel-body { - display: grid; - min-height: 0; - transform-origin: top center; - overflow: hidden; - transition: - max-height 500ms cubic-bezier(0.25, 1.4, 0.5, 1), - transform 500ms cubic-bezier(0.25, 1.4, 0.5, 1), - opacity 400ms ease, - margin-bottom 500ms cubic-bezier(0.25, 1.4, 0.5, 1); -} - -.trail-panel-body.is-open { - max-height: 3200px; - transform: scale(1) translateY(0); - opacity: 1; - margin-bottom: 0; - overflow: visible; -} - -.trail-panel-body.is-closed { - max-height: 0; - transform: scale(0.94) translateY(-12px); - opacity: 0; - margin-bottom: 0; -} - -.semantic-trail-form { - display: grid; - grid-template-columns: minmax(0, 1fr); - gap: 7px; - margin-bottom: 10px; -} - -.semantic-trail-help { - margin-top: -2px; - color: #66809a; - font-size: 10px; - font-weight: 650; - line-height: 1.35; -} - -#semantic-trail-query { - font-size: 11px; -} - -.semantic-trail-description { - display: grid; - gap: 3px; - margin-bottom: 10px; - border: 1px solid rgba(139, 190, 215, 0.18); - border-radius: 12px; - padding: 10px 11px; - background: - radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.88), transparent 42%), - rgba(244, 251, 255, 0.58); - color: #61758d; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); -} - -.semantic-trail-description strong { - color: #1f344d; - font-size: 11px; - font-weight: 860; -} - -.semantic-trail-description span { - font-size: 10.5px; - font-weight: 680; - line-height: 1.38; -} - -.semantic-trail-form input { - width: 100%; - height: 34px; - border: 1px solid rgba(126, 161, 198, 0.18); - border-radius: 10px; - padding: 0 10px; - background: rgba(255, 255, 255, 0.68); - color: var(--ink); - font: inherit; - font-size: 12px; - font-weight: 720; - outline: none; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); -} - -.semantic-trail-form input:focus { - border-color: rgba(64, 154, 205, 0.42); - background: rgba(250, 254, 255, 0.94); -} - -.semantic-trail-card, -.semantic-trail-loading, -.semantic-trail-empty { - border: 1px solid rgba(139, 190, 215, 0.24); - border-radius: 12px; - background: - radial-gradient(circle at 22% 4%, rgba(255, 255, 255, 0.9), transparent 34%), - rgba(245, 250, 255, 0.76); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.78), - 0 12px 32px rgba(84, 160, 199, 0.1); -} - -.semantic-trail-card { - display: grid; - flex: 0 0 auto; - gap: 12px; - padding: 12px; -} - -.semantic-trail-root { - display: grid; - gap: 6px; - border: 1px solid rgba(119, 168, 205, 0.12); - border-radius: 10px; - padding: 9px; - background: rgba(255, 255, 255, 0.42); -} - -.semantic-trail-root div { - display: grid; - gap: 2px; -} - -.semantic-trail-root span, -.semantic-trail-item-meta, -.semantic-trail-breakdown { - color: var(--muted); - font-size: 10px; - font-weight: 760; -} - -.semantic-trail-root strong { - overflow: hidden; - color: var(--ink); - font-size: 12px; - font-weight: 860; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-root small { - overflow: hidden; - color: var(--accent-strong); - font-size: 10px; - font-weight: 760; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-root p { - display: -webkit-box; - margin: 0; - overflow: hidden; - color: rgba(60, 80, 105, 0.74); - font-size: 10.5px; - line-height: 1.42; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; -} - -.semantic-trail-graph { - display: grid; - gap: 10px; - border: 1px solid rgba(126, 199, 232, 0.24); - border-radius: 14px; - padding: 10px; - background: - radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.96), transparent 36%), - linear-gradient(180deg, rgba(246, 253, 255, 0.92), rgba(227, 247, 255, 0.56)), - rgba(240, 250, 255, 0.7); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.84), - 0 10px 28px rgba(84, 160, 199, 0.08); -} - -.semantic-trail-graph-header { - display: grid; - gap: 2px; -} - -.semantic-trail-graph-header span, -.semantic-trail-graph-root span, -.semantic-trail-graph-root small, -.semantic-trail-graph-source small, -.semantic-trail-graph-legend span { - color: var(--muted); - font-size: 9.5px; - font-weight: 780; -} - -.semantic-trail-graph-header strong { - overflow: hidden; - color: var(--ink); - font-size: 11px; - font-weight: 860; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-graph-flow { - display: grid; - position: relative; - grid-template-columns: minmax(0, 0.82fr) 18px minmax(0, 1.18fr); - align-items: stretch; - gap: 8px; -} - -.semantic-trail-graph-root { - display: grid; - align-content: center; - min-width: 0; - border: 1px solid rgba(92, 170, 218, 0.2); - border-radius: 12px; - padding: 9px; - background: - radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.96), transparent 38%), - rgba(255, 255, 255, 0.68); -} - -.semantic-trail-graph-root strong { - overflow: hidden; - color: #17314c; - font-size: 11px; - font-weight: 880; - line-height: 1.24; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-graph-stream { - position: relative; - align-self: stretch; - overflow: hidden; - border-radius: 999px; - background: - radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.95), transparent 32%), - linear-gradient( - 180deg, - rgba(219, 249, 255, 0.2), - rgba(88, 199, 232, 0.52) 28%, - rgba(118, 213, 239, 0.42) 68%, - rgba(255, 255, 255, 0.18) - ); - box-shadow: - inset 0 0 0 1px rgba(255, 255, 255, 0.52), - 0 0 18px rgba(78, 169, 214, 0.24); -} - -.semantic-trail-graph-stream::before, -.semantic-trail-graph-stream::after { - position: absolute; - inset: -18px 3px; - border-radius: inherit; - pointer-events: none; - content: ''; -} - -.semantic-trail-graph-stream::before { - background: - radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.9) 0 14%, transparent 36%), - radial-gradient(ellipse at 55% 42%, rgba(255, 255, 255, 0.56) 0 10%, transparent 32%), - radial-gradient(ellipse at 44% 76%, rgba(255, 255, 255, 0.54) 0 12%, transparent 34%); - filter: blur(0.5px); - opacity: 0.78; - animation: flowMapCurrent 5.6s ease-in-out infinite; -} - -.semantic-trail-graph-stream::after { - background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.82), transparent); - opacity: 0.5; - transform: translateY(-70%); - animation: flowStream 3.8s ease-in-out infinite; -} - -.semantic-trail-graph-sources { - display: grid; - min-width: 0; - gap: 6px; -} - -.semantic-trail-graph-source { - display: grid; - grid-template-columns: 26px minmax(0, 1fr); - align-items: center; - gap: 7px; - min-width: 0; - border: 1px solid rgba(119, 174, 213, 0.18); - border-radius: 11px; - padding: 6px 7px; - background: rgba(255, 255, 255, 0.64); - box-shadow: 0 5px 14px rgba(77, 142, 190, 0.08); -} - -.semantic-trail-graph-source > span { - display: grid; - grid-row: span 2; - place-items: center; - width: 26px; - height: 26px; - border: 1px solid rgba(78, 169, 214, 0.26); - border-radius: 999px; - background: - radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.94), transparent 40%), - rgba(211, 242, 255, 0.84); - color: #1d668f; - font-size: 10px; - font-weight: 920; - font-variant-numeric: tabular-nums; -} - -.semantic-trail-graph-source strong { - overflow: hidden; - color: var(--ink); - font-size: 10.5px; - font-weight: 820; - line-height: 1.2; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-graph-source small { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-graph-empty { - display: grid; - min-height: 74px; - place-items: center; - border: 1px dashed rgba(119, 174, 213, 0.22); - border-radius: 12px; - color: var(--muted); - font-size: 10px; - font-weight: 760; -} - -.semantic-trail-graph-legend { - display: flex; - flex-wrap: wrap; - gap: 5px; -} - -.semantic-trail-graph-legend span { - border: 1px solid rgba(119, 174, 213, 0.18); - border-radius: 999px; - padding: 2px 6px; - background: rgba(255, 255, 255, 0.56); -} - -.semantic-trail-list { - display: grid; - position: relative; - grid-auto-rows: max-content; - gap: 14px; - overflow: visible; - padding: 2px 0 4px; -} - -/* The stream is a fixed-height channel behind the result cards. Light flows DOWN it via - animated background-position, never via transform translate — so it can never drift out - of the results section the way a translated element does in a tall, overflow-visible list. - ::before is the soft water body; ::after is the brighter caustics rippling through it. */ -.semantic-trail-list::before { - position: absolute; - top: 4px; - bottom: 4px; - left: 15px; - width: 36px; - border-radius: 999px; - pointer-events: none; - content: ''; - background: - radial-gradient(60% 22% at 50% 0%, rgba(255, 255, 255, 0.42), transparent 72%), - linear-gradient( - 180deg, - transparent 0, - rgba(150, 216, 247, 0.3) 14%, - rgba(92, 186, 228, 0.32) 52%, - rgba(150, 216, 247, 0.3) 86%, - transparent 100% - ); - filter: blur(7px); - opacity: 0.85; - animation: flowSway 7s ease-in-out infinite; -} - -.semantic-trail-list::after { - position: absolute; - top: 4px; - bottom: 4px; - left: 23px; - width: 20px; - border-radius: 999px; - pointer-events: none; - content: ''; - background: repeating-linear-gradient( - 180deg, - transparent 0, - transparent 30px, - rgba(255, 255, 255, 0.16) 44px, - rgba(255, 255, 255, 0.62) 52px, - rgba(255, 255, 255, 0.16) 60px, - transparent 74px, - transparent 96px - ); - background-size: 100% 96px; - filter: blur(1.4px); - opacity: 0.7; - -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); - mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); - animation: flowStream 3.6s linear infinite; -} - -.semantic-trail-item { - position: relative; - z-index: 1; - display: grid; - grid-template-columns: 50px minmax(0, 1fr); - align-items: start; - gap: 12px; - width: 100%; - height: auto !important; - min-height: 124px; - min-width: 0; - border: 1px solid rgba(126, 161, 198, 0.16); - border-radius: 14px; - padding: 13px; - background: - radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.92), transparent 34%), - rgba(255, 255, 255, 0.62); - color: var(--ink); - line-height: normal; - text-align: left; - box-shadow: none; - overflow: visible; -} - -/* Flow the caustic pattern downward by one tile (matches ::after background-size) so the - loop is seamless. No transform translate, so the element stays inside its channel. */ -@keyframes flowStream { - from { - background-position-y: 0; - } - - to { - background-position-y: 96px; - } -} - -/* Gentle horizontal drift gives the water body life without changing its vertical bounds. */ -@keyframes flowSway { - 0%, - 100% { - transform: translateX(-1.5px); - } - - 50% { - transform: translateX(1.5px); - } -} - -@keyframes flowMapCurrent { - 0%, - 100% { - transform: translateY(-8%) scaleX(0.88); - } - - 50% { - transform: translateY(8%) scaleX(1.08); - } -} - -.semantic-trail-item:hover { - border-color: rgba(64, 154, 205, 0.28); - background: - radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.98), transparent 34%), - rgba(235, 249, 255, 0.86); -} - -.semantic-trail-score { - display: grid; - align-self: start; - grid-template-rows: auto auto; - place-items: center; - width: 46px; - height: 46px; - border: 1px solid rgba(78, 169, 214, 0.28); - border-radius: 999px; - background: - radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.96), transparent 42%), - conic-gradient(from -80deg, rgba(53, 154, 211, 0.42), rgba(196, 237, 255, 0.16)), - rgba(255, 255, 255, 0.78); - color: #1d668f; - font-size: 10px; - font-weight: 880; - font-variant-numeric: tabular-nums; - line-height: 1; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 10px 24px rgba(78, 169, 214, 0.12); -} - -.semantic-trail-score svg { - color: rgba(29, 102, 143, 0.66); -} - -.semantic-trail-score strong { - color: #176b94; - font-size: 11px; - font-weight: 920; -} - -.semantic-trail-item-copy { - display: grid; - align-content: start; - min-width: 0; - gap: 6px; -} - -.semantic-trail-item-copy strong, -.semantic-trail-item-copy small { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.semantic-trail-item-copy strong { - color: var(--ink); - font-size: 12px; - font-weight: 840; -} - -.semantic-trail-item-copy small { - color: var(--accent-strong); - font-size: 10px; - font-weight: 740; -} - -.semantic-trail-excerpt { - display: -webkit-box; - overflow: hidden; - color: #3f5269; - font-size: 11.5px; - font-weight: 620; - line-height: 1.48; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; -} - -.semantic-trail-reasons { - display: flex; - flex-wrap: wrap; - gap: 4px; -} - -.semantic-trail-reasons span { - border: 1px solid rgba(97, 169, 210, 0.18); - border-radius: 999px; - padding: 2px 6px; - background: rgba(230, 248, 255, 0.68); - color: #287196; - font-size: 9px; - font-weight: 820; -} - -.semantic-trail-breakdown { - font-variant-numeric: tabular-nums; -} - -.semantic-trail-loading, -.semantic-trail-empty { - display: grid; - gap: 4px; - padding: 10px 11px; - border-color: rgba(139, 190, 215, 0.16); - background: rgba(246, 251, 255, 0.58); - color: var(--muted); - font-size: 11px; - font-weight: 700; - line-height: 1.45; - margin-bottom: 10px; -} - -.semantic-trail-loading strong { - color: var(--ink); - font-size: 12px; - font-weight: 840; -} - -.semantic-trail-label { - display: inline-flex; - align-items: center; - gap: 6px; - color: var(--muted); - font-size: 10px; - font-weight: 900; - margin-top: 5px; -} - -.answer-loading { - position: relative; - display: grid; - min-height: 220px; - place-items: stretch; - margin-top: 10px; - overflow: hidden; - border: 1px solid rgba(139, 190, 215, 0.24); - border-radius: 14px; - background: - radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.94), transparent 26%), - linear-gradient(145deg, rgba(248, 253, 255, 0.9), rgba(231, 249, 255, 0.76)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 16px 42px rgba(84, 160, 199, 0.12); -} - -.crystallizing-orb { - position: relative; - z-index: 1; - display: grid; - width: 100%; - min-height: 190px; - place-items: center; - overflow: visible; - color: #10a9d2; - isolation: isolate; -} - -.answer-crystallizing-orb { - min-height: 100%; - padding: 24px 28px 28px; -} - -.crystallizing-orb-content { - position: relative; - z-index: 3; - display: grid; - place-items: center; - gap: 8px; - text-align: center; -} - -.answer-crystallizing-orb .crystallizing-orb-content { - gap: 10px; - transform: translateY(-2px); -} - -.answer-loading-haze, -.answer-loading-ring { - position: absolute; - inset: 0; - pointer-events: none; -} - -/* Frosted breath behind the crystal — a calm, slowly breathing icy glow. */ -.answer-loading-haze { - background: - radial-gradient(circle at 50% 44%, rgba(226, 248, 255, 0.72), transparent 56%), - radial-gradient(circle at 50% 60%, rgba(158, 222, 255, 0.3), transparent 62%); - filter: blur(17px); - opacity: 0.85; - animation: iceBreathe 7.5s ease-in-out infinite; -} - -/* Container for the drifting ice crystals; rotates almost imperceptibly. */ -.answer-loading-ring { - inset: 22px; - border-radius: 999px; - animation: iceDrift 24s linear infinite; - margin-top: -70px; -} - -/* Two concentric frost rings that ripple outward like ice settling. */ -.answer-loading-ring::before, -.answer-loading-ring::after { - position: absolute; - top: 50%; - left: 50%; - width: 86px; - height: 86px; - margin: -43px 0 0 -43px; - content: ''; - border: 1px solid rgba(178, 226, 247, 0.55); - border-radius: 999px; - box-shadow: - inset 0 0 16px rgba(196, 238, 255, 0.5), - 0 0 12px rgba(150, 214, 246, 0.26); - animation: iceRipple 5.4s ease-in-out infinite; -} - -.answer-loading-ring::after { - animation-delay: -2.7s; -} - -/* Soft ice crystals drifting on the ring, twinkling calmly in and out of frost. */ -.answer-loading-ring span { - position: absolute; - top: 50%; - left: 50%; - width: 5px; - height: 5px; - margin: -2.5px 0 0 -2.5px; - border-radius: 999px; - background: radial-gradient( - circle at 50% 38%, - #ffffff, - rgba(208, 241, 255, 0.66) 58%, - transparent 74% - ); - box-shadow: - 0 0 7px rgba(190, 233, 255, 0.85), - 0 0 15px rgba(126, 198, 240, 0.4); - transform: rotate(calc(var(--particle-index) * 25.714deg)) translateX(52px); - animation: iceMote 4.8s ease-in-out infinite; - animation-delay: calc(var(--particle-index) * -260ms); -} - -.crystallizing-orb-subtitle { - position: relative; - z-index: 3; - max-width: min(260px, 86%); - margin: 5px auto 0; - color: var(--muted); - font-size: 11px; - font-weight: 720; - line-height: 1.35; - text-align: center; -} - -.answer-card { - position: relative; - padding: 12px; - background: rgba(245, 250, 255, 0.78); - user-select: text; - overflow: hidden; -} - -.answer-markdown { - max-height: min(36vh, 360px); - overflow: auto; - color: #243143; - font-size: 13px; - line-height: 1.5; -} - -.answer-markdown p, -.answer-markdown ul, -.answer-markdown ol { - margin: 0 0 10px; -} - -.answer-markdown p:last-child, -.answer-markdown ul:last-child, -.answer-markdown ol:last-child { - margin-bottom: 0; -} - -.answer-markdown ul, -.answer-markdown ol { - padding-left: 18px; -} - -.answer-markdown li { - margin: 4px 0; -} - -.answer-markdown em { - font-style: italic; -} - -.answer-metrics-subtitle { - margin: 5px 0 -5px; - color: rgba(78, 95, 120, 0.66); - font-size: 11px; - font-weight: 720; - line-height: 1.3; -} - -.answer-divider { - height: 0; - margin: 14px 0; - border: 0; - border-top: 1px solid rgba(120, 190, 220, 0.34); -} - -.answer-inline-math { - display: inline; - border-radius: 5px; - padding: 0 3px; - background: rgba(229, 248, 255, 0.58); - color: #29465f; - font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; - font-size: 0.96em; - font-weight: 680; -} - -.answer-citation-link { - display: inline-flex; - align-items: center; - height: 18px; - margin: 0 1px; - border: 1px solid rgba(78, 143, 208, 0.22); - border-radius: 999px; - padding: 0 5px; - background: rgba(225, 243, 255, 0.68); - color: var(--accent-strong); - font-size: 0.86em; - font-weight: 820; - line-height: 1; - vertical-align: 1px; - box-shadow: none; - cursor: pointer; -} - -.answer-citation-link:hover { - border-color: rgba(50, 137, 199, 0.42); - background: rgba(207, 236, 255, 0.92); - color: #12668f; -} - -.answer-heading { - margin: 12px 0 6px; - color: var(--ink); - font-size: 13px; - font-weight: 840; - line-height: 1.35; -} - -.answer-heading:first-child { - margin-top: 0; -} - -.answer-card footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - margin-top: 2px; -} - -.answer-copy-button { - height: 26px; - border-radius: 8px; - padding: 0 9px; - color: var(--accent-strong); - font-size: 11px; - box-shadow: none; -} - -.answer-stop-button { - height: 26px; - border: 1px solid rgba(78, 143, 208, 0.26); - border-radius: 8px; - padding: 0 9px; - background: rgba(235, 248, 255, 0.85); - color: var(--accent-strong); - font-size: 11px; - font-weight: 780; - box-shadow: none; - cursor: pointer; -} - -.answer-stop-button:hover { - border-color: rgba(50, 137, 199, 0.46); - background: rgba(213, 240, 255, 0.95); -} - -.answer-loading .answer-stop-button { - position: absolute; - right: 10px; - bottom: 10px; - z-index: 1; -} - -.answer-card.is-streaming footer span { - color: var(--muted); - font-size: 11px; - font-weight: 720; -} - -.answer-stream-caret { - display: inline-block; - width: 7px; - height: 13px; - margin-left: 2px; - border-radius: 2px; - background: var(--accent-strong); - vertical-align: -2px; - animation: answerCaretBlink 0.9s steps(2, start) infinite; -} - -@keyframes answerCaretBlink { - to { - visibility: hidden; - } -} - -@keyframes answerHaze { - to { - transform: rotate(360deg); - } -} - -@keyframes iceBreathe { - 0%, - 100% { - opacity: 0.6; - transform: scale(0.96); - } - - 50% { - opacity: 0.92; - transform: scale(1.05); - } -} - -@keyframes iceDrift { - to { - transform: rotate(360deg); - } -} - -@keyframes iceRipple { - 0% { - transform: scale(0.82); - opacity: 0; - } - - 28% { - opacity: 0.72; - } - - 70% { - opacity: 0.16; - } - - 100% { - transform: scale(1.14); - opacity: 0; - } -} - -@keyframes iceMote { - 0%, - 100% { - opacity: 0.25; - scale: 0.58; - } - - 50% { - opacity: 0.95; - scale: 1.12; - } -} - -@keyframes statusPulse { - 0%, - 100% { - opacity: 0.55; - scale: 0.78; - } - - 50% { - opacity: 1; - scale: 1.08; - } -} - -.panel-footer { - display: grid; - flex: 0 0 auto; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: 12px; - margin-top: 2px; - border-top: 1px solid var(--line); - padding-top: 10px; - padding-bottom: 4px; -} - -.panel-status-text { - grid-column: 1; - min-width: 0; - color: rgba(82, 97, 115, 0.9); - font-size: 11px; - font-weight: 720; - line-height: 1.35; - overflow-wrap: break-word; - white-space: normal; -} - -.inline-model-selector { - display: grid; - grid-column: 2; - justify-self: end; - width: min(180px, 100%); - grid-template-columns: auto minmax(0, 1fr); - align-items: center; - gap: 6px; - border: 1px solid rgba(105, 188, 224, 0.22); - border-radius: 999px; - padding: 4px 7px 4px 9px; - background: - radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.95), transparent 42%), - linear-gradient(145deg, rgba(241, 252, 255, 0.84), rgba(255, 255, 255, 0.6)); - color: #2a7a9f; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.72), - 0 8px 18px rgba(74, 145, 194, 0.08); - - transition: - border-color 0.4s ease, - box-shadow 0.4s ease, - border 0.2s ease; -} - -.inline-model-selector:hover { - border: 2px solid rgba(142, 219, 255, 0.6); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.9), - 0 8px 24px rgba(105, 188, 224, 0.2), - 0 0 8px rgba(165, 230, 255, 0.3); /* Soft frost aura */ -} - -.inline-model-selector span { - color: #2a7a9f; - font-size: 10px; - font-weight: 860; -} - -.inline-model-selector select { - min-width: 0; - height: 24px; - border: 1px solid transparent; - border-radius: 999px; - padding: 0 20px 0 7px; - background: rgba(255, 255, 255, 0.52); - color: var(--ink); - font-size: 11px; - font-weight: 700; - box-shadow: none; - transition: - background-color 0.2s ease, - border-color 0.2s ease, - box-shadow 0.2s ease; -} - -.inline-model-selector select:hover { - cursor: pointer; - background-color: rgba(224, 247, 255, 0.75); - border-color: rgba(174, 227, 253, 0.4); - box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6); -} - -.inline-model-selector select:focus { - box-shadow: 0 0 0 3px rgba(106, 193, 229, 0.18); -} - -.model-settings-button { - display: inline-flex; - grid-column: 2; - justify-self: end; - align-items: center; - justify-content: center; - gap: 6px; - max-width: 156px; - height: 28px; - overflow: hidden; - border-radius: 999px; - padding: 0 10px; - color: var(--muted); - font-size: 11px; - box-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; -} - -.model-settings-button svg { - flex: 0 0 auto; - width: 13px; - height: 13px; -} - -.model-settings-button span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.intelligence-panel.collapsed .panel-toggle { - right: 8px; - width: 42px; - padding: 0; -} - -@media (max-width: 1120px) { - .aether-shell { - grid-template-columns: 70px minmax(0, 1fr) 352px; - } - - :root { - --rail-width: 70px; - --panel-width: 352px; - } - - .address-bar { - grid-template-columns: 78px 118px minmax(0, 1fr) 52px; - } - - .dashboard-grid { - grid-template-columns: minmax(0, 1fr); - } - - .flow-stage { - grid-template-columns: minmax(0, 1fr); - overflow: auto; - } - - .flow-canvas { - min-height: 500px; - } - - .flow-inspector { - grid-template-columns: minmax(0, 1fr); - } - - .air-grid { - grid-template-columns: minmax(0, 1fr); - overflow: auto; - } - - .air-actions-panel, - .air-history-panel { - grid-column: 1; - } - - .air-preview-panel { - min-height: 560px; - } - - .flow-node-detail, - .flow-recommendations { - max-width: none; - } -} - -@media (max-width: 820px) { - .flow-view, - .air-view { - padding: 14px; - } - - .flow-header, - .air-hero { - grid-template-columns: minmax(0, 1fr); - } - - .air-hero { - display: grid; - } - - .flow-brand h1 { - font-size: 25px; - } - - .air-identity h1 { - font-size: 25px; - } - - .flow-search { - grid-template-columns: 20px minmax(0, 1fr) 66px; - } - - .air-output-note { - max-width: none; - } - - .air-lens-buttons, - .air-preview-layout { - grid-template-columns: minmax(0, 1fr); - } -} - -.browser-chrome { - position: absolute; - top: var(--titlebar-height); - right: 0; - left: 0; - z-index: 12; - display: grid; - grid-template-rows: 42px 32px 42px; - height: var(--nav-height); - border-bottom: 1px solid rgba(143, 165, 196, 0.22); - background: rgba(255, 255, 255, 0.58); - box-shadow: 0 14px 32px rgba(71, 104, 146, 0.08); - backdrop-filter: blur(24px) saturate(1.35); -} - -.browser-chrome.dashboard-open { - grid-template-rows: 40px 28px 0; - box-sizing: border-box; - height: 72px; - padding-bottom: 4px; -} - -.browser-chrome .address-bar { - position: relative; - top: auto; - right: auto; - left: auto; - height: 42px; - border-bottom: 0; - padding: 8px 14px 4px; - background: transparent; - backdrop-filter: none; -} - -.browser-chrome.dashboard-open .address-bar { - height: 40px; - padding: 7px 14px 3px; -} - -.browser-chrome .history-controls button, -.browser-chrome .address-bar button { - height: 30px; - border-radius: 8px; -} - -.browser-chrome .address-bar input { - height: 30px; - border-radius: 9px; -} - -.browser-chrome .active-app span { - font-size: 12px; -} - -.browser-chrome .active-app small { - font-size: 10px; -} - -.tab-strip { - position: relative; - display: flex; - align-items: center; - gap: 7px; - min-width: 0; - --tab-max-width: min(240px, 33%); - padding: 4px 14px 7px; - overflow-x: auto; - overflow-y: hidden; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(237, 246, 255, 0.2)), - rgba(255, 255, 255, 0.1); - scrollbar-color: rgba(82, 178, 219, 0.42) transparent; - scrollbar-width: thin; - scroll-padding: 14px; -} - -.browser-chrome.dashboard-open .tab-strip { - padding: 2px 14px 4px; -} - -.tab-strip::-webkit-scrollbar { - height: 6px; -} - -.tab-strip::-webkit-scrollbar-track { - background: transparent; -} - -.tab-strip::-webkit-scrollbar-thumb { - border-radius: 999px; - background: - linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.24)), - rgba(82, 178, 219, 0.42); -} - -.tab-chip, -.new-tab-button { - display: inline-grid; - align-items: center; - height: 24px; - min-width: 0; - border-radius: 8px; - box-shadow: none; -} - -.tab-chip { - grid-template-columns: 16px minmax(42px, 1fr); - flex: 0 0 clamp(112px, 18vw, 188px); - gap: 5px; - width: auto; - min-width: 92px; - max-width: var(--tab-max-width); - border-color: color-mix(in srgb, var(--tab-tint, #6d97c8) 28%, rgba(120, 150, 190, 0.28)); - padding: 0 5px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)), - color-mix(in srgb, var(--tab-tint, #6d97c8) 18%, transparent); - color: color-mix(in srgb, var(--tab-tint, #557ca8) 34%, #2f4159); - text-align: left; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 7px 18px rgba(52, 86, 132, 0.1); - transform-origin: center bottom; - transition: - flex-basis 520ms cubic-bezier(0.2, 1.25, 0.32, 1), - max-width 520ms cubic-bezier(0.2, 1.25, 0.32, 1), - min-width 520ms cubic-bezier(0.2, 1.25, 0.32, 1), - transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), - border-color 220ms ease, - background 260ms ease, - box-shadow 260ms ease, - color 220ms ease; - will-change: flex-basis; -} - -.tab-strip.many-tabs .tab-chip { - flex-basis: 118px; - min-width: 88px; -} - -.tab-strip.overflow-tabs .tab-chip { - flex-basis: 96px; - min-width: 76px; -} - -.tab-strip.overflow-tabs .tab-title { - font-size: 10px; -} - -.tab-chip.closable { - grid-template-columns: 16px minmax(42px, 1fr) 16px; -} - -.tab-chip.active, -.tab-chip:hover { - border-color: color-mix(in srgb, var(--tab-tint, #5a8fd0) 45%, rgba(86, 139, 218, 0.3)); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)), - color-mix(in srgb, var(--tab-tint, #6d97c8) 26%, transparent); - color: var(--ink); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.9), - 0 10px 24px color-mix(in srgb, var(--tab-tint, #6d97c8) 22%, rgba(84, 130, 199, 0.12)); - transform: translateY(-1px) scale(1.012); -} - -.tab-chip.active { - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74)), - color-mix(in srgb, var(--tab-tint, #6d97c8) 34%, transparent); -} - -.tab-status, -.tab-close, -.new-tab-button, -.tab-count { - display: grid; - place-items: center; -} - -.tab-status svg, -.tab-close svg, -.new-tab-button svg { - width: 13px; - height: 13px; -} - -.tab-status img { - width: 14px; - height: 14px; - border-radius: 4px; -} - -.tab-title { - overflow: hidden; - font-size: 11px; - font-weight: 720; - text-overflow: ellipsis; - white-space: nowrap; - transition: - opacity 180ms ease, - transform 240ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.tab-chip:hover .tab-title { - transform: translateX(1px); -} - -.tab-close { - width: 16px; - height: 16px; - border-radius: 5px; - color: #8a98aa; -} - -.tab-close:hover { - background: rgba(129, 153, 185, 0.14); - color: var(--danger); -} - -.new-tab-button { - flex: 0 0 auto; - width: 24px; - padding: 0; - color: #5d7fae; - background: rgba(255, 255, 255, 0.5); - transition: - transform 150ms ease, - background 150ms ease, - color 150ms ease, - box-shadow 150ms ease; -} - -.tab-count { - flex: 0 0 auto; - min-width: 24px; - height: 24px; - border: 1px solid rgba(125, 211, 252, 0.28); - border-radius: 999px; - padding: 0 7px; - background: - radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.9), transparent 44%), - rgba(229, 248, 255, 0.64); - color: #2d7197; - font-size: 10px; - font-weight: 900; -} - -.tab-context-menu { - position: fixed; - z-index: 140; - display: grid; - gap: 3px; - width: 172px; - border: 1px solid rgba(159, 215, 245, 0.52); - border-radius: 8px; - padding: 7px; - background: - radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.96), transparent 38%), - linear-gradient(145deg, rgba(248, 253, 255, 0.92), rgba(215, 241, 255, 0.72)), - rgba(239, 249, 255, 0.82); - color: #28465f; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.96), - inset 0 -12px 28px rgba(148, 203, 233, 0.14), - 0 16px 34px rgba(53, 104, 148, 0.18); - backdrop-filter: blur(24px) saturate(1.5); -} - -.tab-context-menu::before { - position: absolute; - inset: 1px; - z-index: -1; - border-radius: 7px; - background: - linear-gradient(120deg, rgba(255, 255, 255, 0.7), transparent 38%), - linear-gradient(300deg, rgba(118, 204, 244, 0.18), transparent 42%); - content: ''; -} - -.tab-context-menu-title { - overflow: hidden; - border-bottom: 1px solid rgba(110, 169, 205, 0.16); - padding: 1px 7px 6px; - color: rgba(48, 78, 105, 0.68); - font-size: 10px; - font-weight: 800; - letter-spacing: 0.03em; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; -} - -.tab-context-menu button { - display: flex; - align-items: center; - justify-content: flex-start; - height: 28px; - border: 1px solid transparent; - border-radius: 6px; - padding: 0 8px; - background: transparent; - color: #28465f; - font-size: 11px; - font-weight: 800; - text-align: left; - box-shadow: none; -} - -.tab-context-menu button:hover:not(:disabled), -.tab-context-menu button:focus-visible:not(:disabled) { - border-color: rgba(130, 198, 233, 0.34); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(220, 243, 255, 0.52)), - rgba(166, 220, 247, 0.2); - color: #1d5f88; - outline: none; -} - -.tab-context-menu button:disabled { - color: rgba(77, 101, 124, 0.36); - cursor: default; -} - -.quick-action-row { - position: relative; - z-index: 13; - display: flex; - align-items: center; - gap: 8px; - min-height: 38px; - min-width: 0; - border-top: 1px solid rgba(130, 158, 196, 0.12); - padding: 4px 14px 8px; - overflow-x: auto; - overflow-y: hidden; - background: - linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(255, 255, 255, 0.78)), - rgba(255, 255, 255, 0.86); - box-shadow: 0 10px 24px rgba(71, 104, 146, 0.08); - scrollbar-width: none; -} - -.quick-action-row::-webkit-scrollbar { - display: none; -} - -.browser-capture-dock { - display: flex; - align-items: center; - gap: 7px; - min-width: 0; - margin-left: auto; - border-left: 1px solid rgba(133, 158, 193, 0.18); - padding-left: 10px; -} - -.browser-capture-dock select { - width: 132px; - height: 25px; - border-radius: 999px; - padding: 0 9px; - font-size: 11px; - font-weight: 720; -} - -.browser-capture-dock button { - height: 25px; - border-radius: 999px; - padding: 0 9px; - font-size: 11px; - box-shadow: none; -} - -.browser-capture-dock .capture-page-button { - border-color: rgba(73, 126, 204, 0.28); - background: rgba(232, 243, 255, 0.76); - color: var(--accent-strong); - transition: - transform 160ms ease, - border-color 160ms ease, - background 180ms ease, - box-shadow 180ms ease, - color 160ms ease; -} - -.browser-capture-dock .capture-page-button:hover:not(:disabled) { - border-color: rgba(54, 122, 178, 0.42); - background: - radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.98), transparent 42%), - linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(219, 240, 255, 0.9)); - color: #1d6f97; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.92), - 0 8px 18px rgba(70, 124, 180, 0.16); - transform: translateY(-1px); -} - -.browser-capture-dock .capture-page-button:active:not(:disabled) { - transform: translateY(0); -} - -.browser-capture-dock .browser-save-page-button { - min-width: 58px; - height: 25px; - border-radius: 999px; - padding: 0 11px; - font-size: 11px; -} - -.browser-capture-dock span { - max-width: 92px; - overflow: hidden; - color: var(--muted); - font-size: 10px; - font-weight: 760; - text-overflow: ellipsis; - white-space: nowrap; -} - -.quick-action-chip { - height: 25px; - border-radius: 999px; - padding: 0 11px; - background: rgba(255, 255, 255, 0.58); - color: #5b6f89; - font-size: 11px; - font-weight: 760; - box-shadow: none; - white-space: nowrap; - transition: - opacity 180ms ease, - transform 180ms ease, - background 180ms ease, - color 180ms ease, - box-shadow 180ms ease; -} - -.quick-action-chip:first-child { - border-color: rgba(73, 126, 204, 0.25); - background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.9), transparent 48%), - rgba(232, 243, 255, 0.72); - color: var(--accent-strong); -} - -.quick-action-chip:hover { - background: rgba(255, 255, 255, 0.92); - color: var(--ink); - box-shadow: 0 10px 22px rgba(84, 130, 199, 0.12); - transform: translateY(-1px); -} - -.button:hover, -.new-tab-button:hover { - background: rgba(255, 255, 255, 0.9); - color: var(--accent-strong); - box-shadow: 0 8px 18px rgba(84, 130, 199, 0.14); - transform: translateY(-1px); -} - -.spinner { - animation: spin 900ms linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -.webview-underlay { - inset: var(--top-bar-height) 0 0; - background: rgba(246, 249, 253, 0.42); -} - -.saved-shelves, -.hub-row, -.iceberg-band, -.knowledge-band, -.recent-captures { - position: relative; - z-index: 1; - border-top: 1px solid rgba(143, 165, 196, 0.18); - padding: 22px 34px; -} - -.saved-shelves { - display: grid; - grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr); - gap: 1px; - margin: 0 -34px; - padding: 0; - background: - linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(239, 249, 255, 0.24)), - rgba(255, 255, 255, 0.3); -} - -.hub-row { - margin: 0; - padding: 16px 22px 18px 34px; - background: rgba(255, 255, 255, 0.38); -} - -.iceberg-band { - margin: 0; - padding: 16px 34px 18px 22px; - background: - radial-gradient(circle at 12% 18%, rgba(186, 230, 253, 0.24), transparent 28%), - linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(239, 249, 255, 0.2)); -} - -.saved-shelves .hub-row, -.saved-shelves .iceberg-band { - min-width: 0; - border-top: 0; -} - -.saved-shelves .iceberg-band { - border-left: 1px solid rgba(143, 165, 196, 0.18); -} - -.knowledge-band { - margin: 0 -34px; - background: rgba(255, 255, 255, 0.22); -} - -.section-title { - display: grid; - grid-template-columns: 42px minmax(0, 1fr) auto; - align-items: center; - gap: 12px; - margin-bottom: 18px; -} - -.section-title.compact { - grid-template-columns: 30px minmax(0, 1fr); - gap: 9px; - margin-bottom: 10px; -} - -.hub-row .section-title.compact { - grid-template-columns: 30px minmax(0, 1fr) auto; -} - -.saved-iceberg-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); - gap: 8px; - max-height: 154px; - overflow-x: hidden; - overflow-y: auto; - margin: 0; - padding: 1px 5px 5px 1px; - scrollbar-color: rgba(82, 178, 219, 0.34) transparent; - scrollbar-width: thin; - - padding-top: 2px; -} - -.saved-iceberg-card { - position: relative; - min-width: 0; - height: 70px; - cursor: pointer; - transition: - opacity 180ms ease, - transform 240ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.saved-iceberg-card.dragging { - opacity: 0.5; - transform: scale(0.985); -} - -.saved-iceberg-card.drop-target, -.saved-iceberg-card:hover { - transform: translateY(-2px); -} - -.saved-iceberg-open { - position: relative; - display: grid; - width: 100%; - height: 100%; - grid-template-columns: minmax(0, 1fr) 26px; - grid-template-rows: auto 1fr auto; - align-content: center; - justify-items: start; - column-gap: 8px; - overflow: hidden; - border-color: rgba(105, 181, 216, 0.28); - border-radius: 8px; - padding: 8px 9px; - isolation: isolate; - background: - radial-gradient(circle at 92% 18%, rgba(185, 236, 255, 0.52), transparent 34%), - linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 249, 254, 0.84)); - color: #23364d; - cursor: pointer; - text-align: left; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.9), - inset 0 -10px 22px rgba(105, 181, 216, 0.07), - 0 10px 22px rgba(73, 130, 171, 0.1); -} - -.saved-iceberg-open::before { - position: absolute; - inset: 0; - z-index: -1; - content: ''; - background: - linear-gradient(118deg, transparent 0 38%, rgba(126, 205, 233, 0.14) 39% 40%, transparent 41%), - radial-gradient(circle at 40% 0%, rgba(255, 255, 255, 0.86), transparent 30%); - opacity: 0.72; -} - -.saved-iceberg-card.drop-target .saved-iceberg-open, -.saved-iceberg-card:hover .saved-iceberg-open, -.saved-iceberg-open:hover { - border-color: rgba(75, 163, 206, 0.42); - background: - radial-gradient(circle at 92% 18%, rgba(207, 244, 255, 0.68), transparent 34%), - linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(229, 248, 254, 0.9)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.96), - inset 0 -10px 22px rgba(105, 181, 216, 0.1), - 0 12px 24px rgba(73, 130, 171, 0.16); -} - -.saved-iceberg-open span, -.saved-iceberg-open small { - max-width: 100%; - color: #5d7f98; - font-size: 9px; - opacity: 0.75; - font-weight: 900; - letter-spacing: 0.09em; - text-transform: uppercase; -} - -.saved-iceberg-open small { - grid-column: 1 / -1; - max-width: calc(100% - 34px); - font-size: 8px; - opacity: 1; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -} - -.saved-iceberg-open strong { - display: -webkit-box; - grid-column: 1; - max-width: 100%; - overflow: hidden; - color: #20344c; - font-size: 12px; - font-weight: 900; - line-height: 1.08; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; - text-transform: capitalize; -} - -.saved-iceberg-delete { - position: absolute; - top: 6px; - right: 6px; - z-index: 2; - display: grid; - place-items: center; - width: 21px; - height: 21px; - border-color: rgba(105, 181, 216, 0.24); - border-radius: 999px; - padding: 0; - background: rgba(255, 255, 255, 0.72); - color: #6f8aa3; - box-shadow: none; - backdrop-filter: blur(10px); -} - -.saved-iceberg-delete:hover { - border-color: rgba(184, 91, 89, 0.24); - background: rgba(255, 239, 239, 0.86); - color: var(--danger); -} - -.saved-iceberg-delete svg { - width: 11px; - height: 11px; -} - -.saved-iceberg-flair { - position: absolute; - right: 8px; - bottom: 8px; - z-index: 2; - display: grid; - place-items: center; - width: 24px; - height: 24px; - border: 1px solid rgba(105, 181, 216, 0.28); - border-radius: 8px; - background: - radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), transparent 44%), - linear-gradient(145deg, rgba(229, 248, 255, 0.9), rgba(151, 216, 238, 0.42)); - color: #2a87ad; - pointer-events: none; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.82), - 0 6px 14px rgba(73, 130, 171, 0.12); - backdrop-filter: blur(12px); -} - -.section-symbol { - display: grid; - place-items: center; - width: 36px; - height: 36px; - border: 1px solid rgba(79, 174, 202, 0.22); - border-radius: 10px; - color: var(--accent-strong); - background: - radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(238, 252, 255, 0.9), rgba(255, 255, 255, 0.74)); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84); -} - -.section-title.compact .section-symbol { - width: 28px; - height: 28px; - border-radius: 8px; -} - -.section-symbol svg { - width: 21px; - height: 21px; -} - -.section-title.compact .section-symbol svg { - width: 17px; - height: 17px; -} - -.section-title h2 { - color: var(--ink); - font-size: 18px; - font-weight: 840; - font-family: var(--font-ice); -} - -.section-title.compact h2 { - font-size: 14px; - line-height: 1.05; -} - -.section-title p { - color: var(--muted); - font-size: 10px; - line-height: 0.75; - font-weight: 720; -} - -.section-title.compact p { - font-size: 10px; - font-weight: 720; - line-height: 1.25; -} - -/* A single comfortably-capped column. Collapsed and expanded hubs share the same - width, so opening one grows it in place instead of hopping to a full-width row. */ -.knowledge-band .collection-list { - display: flex; - flex-direction: column; - gap: 9px; - width: 100%; - max-height: none; -} - -.knowledge-band .collection-accordion { - min-width: 0; -} - -/* Soft reveal for the captures drawer so the in-place expansion feels calm. */ -.knowledge-band .collection-captures:not([hidden]) { - animation: capturesReveal 240ms cubic-bezier(0.22, 1, 0.36, 1); -} - -@keyframes capturesReveal { - from { - opacity: 0; - transform: translateY(-5px); - } - - to { - opacity: 1; - transform: translateY(0); - } -} - -.knowledge-band .collection-row { - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: 4px; - padding: 4px 6px 4px 0; -} - -.knowledge-band .collection-toggle { - grid-template-columns: 36px minmax(0, 1fr) auto 16px; - min-height: 58px; - gap: 8px; - padding: 8px 10px; -} - -.knowledge-band .collection-glyph { - width: 32px; - height: 32px; - border-radius: 8px; -} - -.knowledge-band .collection-glyph svg { - width: 18px; - height: 18px; -} - -.knowledge-band .collection-main, -.knowledge-band .collection-meta { - gap: 2px; -} - -.knowledge-band .collection-main strong, -.knowledge-band .collection-meta strong { - font-size: 12px; -} - -.knowledge-band .collection-main small { - display: -webkit-box; - overflow: hidden; - font-size: 10px; - line-height: 1.25; - white-space: normal; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - line-clamp: 1; -} - -.knowledge-band .collection-meta { - justify-self: end; - min-width: 0; - max-width: none; - padding-right: 4px; - text-align: right; -} - -.knowledge-band .collection-meta small { - display: none; -} - -.knowledge-band .collection-row-actions { - display: flex; - align-items: center; - gap: 5px; - padding-right: 10px; -} - -.knowledge-band .collection-row-actions button { - height: 26px; - border-radius: 8px; - font-size: 11px; -} - -/* Always-visible "Ask this hub" pill — opens AiON focused on the collection. */ -.knowledge-band .collection-ask { - display: inline-flex; - align-items: center; - gap: 5px; - padding: 0 10px; - border-color: rgba(86, 139, 218, 0.3); - background: - radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%), - linear-gradient(135deg, rgba(233, 244, 255, 0.95), rgba(255, 255, 255, 0.82)); - color: var(--accent-strong); - font-weight: 800; -} - -.knowledge-band .collection-ask:hover:not(:disabled) { - border-color: rgba(86, 139, 218, 0.5); - box-shadow: 0 8px 18px rgba(74, 145, 194, 0.14); - transform: translateY(-1px); -} - -.knowledge-band .collection-ask:disabled { - opacity: 0.45; - cursor: not-allowed; -} - -.knowledge-band .collection-ask svg { - width: 13px; - height: 13px; -} - -/* Edit/Delete stay out of the way until the hub is hovered or focused, - then ease in smoothly (width + fade) instead of snapping into view. */ -.knowledge-band .collection-edit, -.knowledge-band .collection-delete { - display: grid; - place-items: center; - width: 0; - padding: 0; - opacity: 0; - overflow: hidden; - pointer-events: none; - transform: translateX(4px); - transition: - width 220ms cubic-bezier(0.22, 1, 0.36, 1), - opacity 160ms ease, - transform 220ms cubic-bezier(0.22, 1, 0.36, 1), - border-color 160ms ease, - background 160ms ease, - color 160ms ease; -} - -.knowledge-band .collection-row:hover .collection-edit, -.knowledge-band .collection-row:hover .collection-delete, -.knowledge-band .collection-row:focus-within .collection-edit, -.knowledge-band .collection-row:focus-within .collection-delete { - width: 26px; - opacity: 1; - pointer-events: auto; - transform: translateX(0); -} - -.knowledge-band .collection-edit svg, -.knowledge-band .collection-delete svg { - width: 13px; - height: 13px; -} - -.knowledge-band .collection-toggle > svg { - width: 15px; - height: 15px; -} - -.hub-shortcuts { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); - gap: 8px; - max-height: 154px; - overflow-x: hidden; - overflow-y: auto; - margin: 0; - padding: 1px 5px 5px 1px; - scrollbar-color: rgba(82, 178, 219, 0.34) transparent; - scrollbar-width: thin; -} - -.start-page { - position: absolute; - inset: var(--top-bar-height) 0 0; - isolation: isolate; - display: grid; - min-height: 0; - place-items: stretch; - overflow: hidden; - padding: clamp(18px, 3.2vh, 34px) clamp(28px, 5vw, 76px); -} - -.start-page-inner { - position: relative; - z-index: 1; - display: grid; - width: min(860px, 100%); - height: 100%; - max-height: 100%; - align-content: center; - justify-self: center; - justify-items: center; - gap: clamp(12px, 2vh, 22px); - min-height: 0; -} - -.start-mark { - display: grid; - place-items: center; - width: clamp(170px, 28vh, 292px); - height: clamp(170px, 28vh, 292px); - opacity: 1; -} - -.start-mark img { - width: 100%; - height: 100%; - object-fit: contain; - user-select: none; -} - -.start-search { - display: flex; - width: min(760px, 100%); - gap: 10px; -} - -.start-search input { - flex: 1 1 auto; - min-width: 0; - height: 48px; - border: 1px solid rgba(145, 166, 195, 0.28); - border-radius: 14px; - padding: 0 18px; - background: rgba(255, 255, 255, 0.78); - color: var(--ink); - font-size: 14px; - font-weight: 600; - box-shadow: 0 12px 30px rgba(94, 132, 185, 0.1); - transition: - border-color 160ms ease, - box-shadow 160ms ease, - background 160ms ease; -} - -.start-search input:focus { - border-color: rgba(86, 139, 218, 0.5); - background: rgba(255, 255, 255, 0.94); - box-shadow: 0 14px 34px rgba(74, 145, 194, 0.16); - outline: none; -} - -.start-search button { - flex: 0 0 auto; - height: 48px; - border-radius: 14px; - padding: 0 22px; - font-size: 13px; - font-weight: 800; -} - -.start-empty { - max-width: 520px; - margin: 0; - color: var(--muted); - font-size: 13px; - font-weight: 650; - text-align: center; -} - -.start-portals { - display: flex; - flex-wrap: wrap; - justify-content: center; - width: 100%; - gap: 12px; - max-height: clamp(112px, 22vh, 190px); - overflow: auto; - padding: 2px 4px 10px; - scrollbar-color: rgba(82, 178, 219, 0.34) transparent; - scrollbar-width: thin; -} - -.start-portals::-webkit-scrollbar { - width: 7px; -} - -.start-portals::-webkit-scrollbar-track { - background: transparent; -} - -.start-portals::-webkit-scrollbar-thumb { - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.22)), - rgba(82, 178, 219, 0.34); -} - -@media (max-height: 760px) { - .start-page { - padding-block: 16px; - } - - .start-page-inner { - gap: 10px; - } - - .start-mark { - width: clamp(128px, 22vh, 178px); - height: clamp(128px, 22vh, 178px); - } - - .start-page-hero-copy h1 { - font-size: clamp(31px, min(4.2vw, 5.8vh), 48px); - } - - .start-search input, - .start-search button { - height: 44px; - } - - .start-portals { - max-height: 96px; - } -} - -.start-portal { - display: grid; - width: 132px; - height: 118px; - justify-items: center; - gap: 7px; - border-radius: 16px; - padding: 13px 10px 10px; - border: 1px solid - color-mix(in srgb, var(--portal-tint, var(--accent)) 28%, rgba(104, 140, 190, 0.22)); - background: - radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 48%), - radial-gradient( - circle at 88% 90%, - color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent), - transparent 42% - ), - rgba(255, 255, 255, 0.58); - color: var(--ink); - box-shadow: 0 12px 28px rgba(94, 132, 185, 0.08); - transition: - transform 160ms ease, - border-color 160ms ease, - background 160ms ease, - box-shadow 160ms ease; -} - -.start-portal:hover { - border-color: color-mix( - in srgb, - var(--portal-tint, var(--accent)) 46%, - rgba(255, 255, 255, 0.46) - ); - box-shadow: 0 6px 14px - color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, rgba(62, 132, 163, 0.12)); - transform: translateY(-2px); -} - -.start-portal span { - display: grid; - place-items: center; - width: 38px; - height: 40px; - border-radius: 12px; - background: - radial-gradient(circle at 35% 22%, #ffffff, transparent 44%), - linear-gradient(145deg, #dff9ff, #ffffff); - color: var(--accent-strong); - font-family: var(--font-old); - font-size: 18px; - font-weight: 700; -} - -.start-portal strong, -.start-portal small { - max-width: 100%; - overflow: hidden; -} - -.start-portal strong { - font-size: 11px; - font-weight: 900; - line-height: 1.1; - white-space: normal; - word-break: break-word; -} - -.start-portal small { - color: var(--muted); - font-size: 10px; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.hub-shortcut { - position: relative; - min-width: 0; - transition: - opacity 180ms ease, - transform 260ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.hub-shortcut.dragging { - opacity: 0.52; - transform: scale(0.985); -} - -.hub-shortcut.drop-target .hub-launch { - border-color: color-mix(in srgb, var(--portal-tint, var(--accent)) 54%, rgba(255, 255, 255, 0.5)); - box-shadow: - 0 18px 36px color-mix(in srgb, var(--portal-tint, var(--accent)) 22%, rgba(62, 132, 163, 0.12)), - 0 0 0 4px color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent); - transform: translateY(-2px) scale(1.018); -} - -.hub-launch { - display: grid; - width: 100%; - height: 70px; - grid-template-columns: 28px minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr) auto; - align-items: center; - justify-items: stretch; - column-gap: 8px; - row-gap: 2px; - border-radius: 8px; - padding: 8px 9px; - border-color: color-mix( - in srgb, - var(--portal-tint, var(--accent)) 28%, - rgba(104, 140, 190, 0.22) - ); - background: - radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 48%), - radial-gradient( - circle at 88% 90%, - color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent), - transparent 42% - ), - rgba(255, 255, 255, 0.58); - color: var(--ink); - text-align: left; - box-shadow: 0 10px 22px rgba(94, 132, 185, 0.08); - transition: - transform 160ms ease, - border-color 160ms ease, - background 160ms ease, - box-shadow 160ms ease; -} - -.hub-launch:hover { - border-color: color-mix( - in srgb, - var(--portal-tint, var(--accent)) 46%, - rgba(255, 255, 255, 0.46) - ); - background: - radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98), transparent 48%), - radial-gradient( - circle at 88% 90%, - color-mix(in srgb, var(--portal-tint, var(--accent)) 24%, transparent), - transparent 42% - ), - rgba(255, 255, 255, 0.86); - box-shadow: 0 6px 14px - color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, rgba(62, 132, 163, 0.12)); - transform: translateY(-1px); -} - -.hub-launch span { - display: grid; - place-items: center; - grid-row: 1 / -1; - width: 28px; - height: 28px; - border-radius: 8px; - background: - radial-gradient(circle at 35% 22%, #ffffff, transparent 44%), - linear-gradient(145deg, #dff9ff, #ffffff); - color: var(--accent-strong); - font-family: var(--font-old); - font-size: 14px; - font-weight: 700; -} - -.hub-launch strong, -.hub-launch small { - max-width: 100%; - overflow: hidden; -} - -.hub-launch strong { - display: -webkit-box; - font-size: 11px; - font-weight: 900; - line-height: 1.1; - white-space: normal; - word-break: normal; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; -} - -.hub-launch small { - color: var(--muted); - font-size: 9px; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.hub-delete { - position: absolute; - top: 5px; - right: 5px; - display: grid; - place-items: center; - width: 20px; - height: 20px; - border-radius: 8px; - padding: 0; - opacity: 0; - background: rgba(255, 255, 255, 0.78); - color: var(--muted); - box-shadow: none; - transition: - opacity 140ms ease, - color 140ms ease, - background 140ms ease; -} - -.hub-shortcut:hover .hub-delete, -.hub-delete:focus-visible { - opacity: 1; -} - -.hub-delete:hover { - color: var(--danger); -} - -.hub-delete svg { - width: 11px; - height: 11px; -} - -.crystallizer { - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - height: calc(100vh - 102px); - overflow: hidden; - color: #102033; - background: - linear-gradient( - 135deg, - rgba(255, 255, 255, 0.78), - rgba(240, 250, 255, 0.68) 48%, - rgba(255, 252, 246, 0.72) - ), - linear-gradient( - 90deg, - rgba(14, 165, 233, 0.08), - transparent 34%, - rgba(20, 184, 166, 0.07) 66%, - rgba(184, 110, 45, 0.06) - ); -} - -.crystallizer::before { - position: absolute; - inset: 0; - pointer-events: none; - content: ''; - opacity: 0.46; - background-image: - linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px), - linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px); - background-size: 58px 58px; - mask-image: linear-gradient(to bottom, black, transparent 88%); -} - -.crystallizer-header { - position: relative; - z-index: 2; - display: flex; - min-height: 78px; - align-items: center; - justify-content: space-between; - gap: 24px; - padding: 14px 24px 14px 28px; - border-bottom: 1px solid rgba(125, 211, 252, 0.32); - background: rgba(255, 255, 255, 0.58); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); - backdrop-filter: blur(24px) saturate(1.12); -} - -.atlas-heading { - display: inline-flex; - align-items: center; - gap: 8px; - color: #64748b; - font-size: 10px; - font-weight: 900; - letter-spacing: 0.18em; - text-transform: uppercase; - vertical-align: middle; -} - -/* iCE Migration Part */ - -.brand-cluster { - display: flex; - align-items: center; - min-width: 342px; - gap: 12px; -} - -.brand-crystal { - flex: 0 0 auto; - color: #0ea5e9; - filter: drop-shadow(0 0 13px rgba(14, 165, 233, 0.38)); -} - -.brand-cluster h1 { - margin: 0; - color: #0f8cc2; - font-family: var(--font-ice); - font-size: 34px; - font-style: italic; - font-weight: 900; - line-height: 1; - letter-spacing: -0.07em; -} - -.brand-divider { - width: 1px; - height: 30px; - margin-left: 3px; - background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 0.45), transparent); -} - -.brand-copy { - display: flex; - flex-direction: column; - gap: 3px; - min-width: 0; -} - -.brand-subtitle { - color: #0f766e; - font-size: 11px; - font-weight: 700; - line-height: 1.1; - letter-spacing: 0.04em; -} - -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - scroll-behavior: auto !important; - animation-duration: 0.001ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.001ms !important; - } -} - -@keyframes spin-slow { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.animate-spin-slow { - animation: spin-slow 12s linear infinite; -} - -.animate-spin-fast { - animation: spin-slow 2.5s linear infinite; -} - -.crystallizer-mark { - display: grid; - place-items: center; - width: 42px; - min-width: 42px; - height: 42px; - border: 1px solid rgba(14, 165, 233, 0.3); - border-radius: 8px; - color: #0f8cc2; - background: rgba(255, 255, 255, 0.72); - box-shadow: 0 16px 36px rgba(8, 47, 73, 0.1); -} - -.crystallizer-mark svg { - width: 25px; - height: 25px; -} - -.crystallizer-brand-subtitle { - color: #0f8cc2; - font-size: 9px; - font-weight: 900; - line-height: 1; - letter-spacing: 0.31em; - text-transform: uppercase; -} - -.crystallizer-brand h1 { - margin: 0; - color: #102033; - font-family: var(--font-old); - font-size: 26px; - font-weight: 800; - line-height: 1; -} - -.crystallizer-search { - display: flex; - width: min(100%, 530px); - align-items: center; - justify-content: flex-end; - gap: 10px; -} - -.crystallizer-search-shell { - display: flex; - align-items: center; - flex: 1 1 280px; - min-width: 240px; - height: 44px; - padding: 0 14px; - color: #94a3b8; - background: rgba(255, 255, 255, 0.74); - border: 1px solid rgba(148, 163, 184, 0.24); - border-radius: 999px; - box-shadow: - 0 12px 42px rgba(8, 47, 73, 0.08), - 0 1px 0 rgba(255, 255, 255, 0.8) inset; - transition: - border-color 160ms ease, - box-shadow 160ms ease, - background 160ms ease; -} - -.crystallizer-search-shell:focus-within { - color: #0284c7; - border-color: rgba(14, 165, 233, 0.52); - background: rgba(255, 255, 255, 0.94); - box-shadow: - 0 20px 62px rgba(14, 165, 233, 0.14), - 0 0 0 4px rgba(14, 165, 233, 0.09); -} - -.crystallizer-search-shell input { - width: 100%; - min-width: 0; - padding: 0 0 0 11px; - color: #102033; - font-size: 14px; - font-weight: 650; - letter-spacing: 0; - background: transparent; - border: 0; - outline: 0; - box-shadow: none; -} - -.crystallizer-search-shell input::placeholder { - color: #94a3b8; - font-weight: 600; -} - -.crystallizer-search button { - display: inline-flex; - width: 148px; - height: 42px; - align-items: center; - justify-content: center; - gap: 8px; - border-radius: 8px; - white-space: nowrap; - - color: #ffffff; - background: linear-gradient(135deg, #0f172a, #075985 58%, #0f766e); - box-shadow: - 0 16px 34px rgba(8, 47, 73, 0.24), - 0 1px 0 rgba(255, 255, 255, 0.28) inset; -} - -.crystallizer-search button span { - font-family: var(--font-display); - font-size: 11px; - font-weight: 900; - text-transform: uppercase; - margin-top: 2px; -} - -.crystallizer-search button:hover { - background: linear-gradient(135deg, #0f172a, #075985 42%, #0f766e); - box-shadow: - 0 20px 42px rgba(8, 47, 73, 0.28), - 0 1px 0 rgba(255, 255, 255, 0.38) inset; -} - -.crystallizer-search .crystallizer-save-button { - width: 92px; - border-color: rgba(15, 140, 194, 0.28); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(239, 249, 255, 0.5)), - rgba(255, 255, 255, 0.68); - color: #0f8cc2; - box-shadow: - 0 12px 30px rgba(8, 47, 73, 0.08), - 0 1px 0 rgba(255, 255, 255, 0.72) inset; - text-shadow: none; -} - -.crystallizer-search .crystallizer-save-button:hover { - border-color: rgba(15, 140, 194, 0.46); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(229, 248, 255, 0.68)), - rgba(255, 255, 255, 0.82); - box-shadow: - 0 16px 34px rgba(8, 47, 73, 0.12), - 0 1px 0 rgba(255, 255, 255, 0.82) inset; -} - -.atlas-heading span, -.dock-head span, -.saved-atlas-title > span { - display: inline-flex; - align-items: center; - gap: 8px; - color: #64748b; - font-size: 10px; - font-weight: 900; - line-height: 1; - letter-spacing: 0.18em; - text-transform: uppercase; -} - -.atlas-heading h2, -.dock-head h2 { - margin: 7px 0 0; - overflow: hidden; - color: #0f172a; - font-size: clamp(20px, 2.3vw, 23px); - font-weight: 850; - line-height: 1.1; - letter-spacing: -0.025em; - text-overflow: ellipsis; - white-space: nowrap; - margin: 0; - font-family: var(--font-ice); -} - -.crystallizer-search button svg { - width: 18px; - height: 18px; -} - -.crystallizer-body { - position: relative; - z-index: 1; - display: grid; - flex: 1; - min-height: 0; - grid-template-columns: minmax(0, 1fr) 318px; -} - -.crystallizer-canvas-shell { - position: relative; - min-width: 0; - min-height: 0; - overflow: hidden; - user-select: none; - -webkit-user-select: none; - -webkit-user-drag: none; -} - -.crystallizer-tools { - position: absolute; - top: 14px; - left: 16px; - z-index: 4; - display: flex; - align-items: center; - gap: 7px; - border: 1px solid rgba(125, 211, 252, 0.28); - border-radius: 8px; - padding: 5px; - background: rgba(255, 255, 255, 0.76); - box-shadow: 0 16px 40px rgba(8, 47, 73, 0.1); - backdrop-filter: blur(18px); -} - -.crystallizer-tools button { - width: auto; - height: 28px; - border-radius: 6px; - padding: 0 10px; - box-shadow: none; -} - -.crystallizer-tools span { - width: 48px; - color: #475569; - font-size: 11px; - font-weight: 900; - text-align: center; -} - -.crystallizer-canvas { - display: block; - width: 100%; - height: 100%; - cursor: grab; - touch-action: none; - user-select: none; - -webkit-user-select: none; - -webkit-user-drag: none; -} - -.crystallizer-canvas.dragging { - cursor: grabbing; -} - -.crystallizer-canvas, -.crystallizer-canvas * { - user-select: none; - -webkit-user-select: none; -} - -.iceberg-shape { - fill: url(#iceberg-body); - stroke: rgba(125, 211, 252, 0.46); - stroke-width: 5px; - filter: drop-shadow(0 46px 70px rgba(8, 47, 73, 0.22)) - drop-shadow(0 0 34px rgba(125, 211, 252, 0.28)); -} - -.crystallizer-body.results-ready .iceberg-shape { - animation: crystallizerIcebergReveal 720ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.iceberg-layer-zone { - mix-blend-mode: multiply; -} - -.crystallizer-body.results-ready .iceberg-layer-zone { - transform-origin: center; - animation: crystallizerZoneReveal 680ms ease both; - animation-delay: 120ms; -} - -.iceberg-shade { - fill: url(#iceberg-shadow); - opacity: 0.56; - pointer-events: none; -} - -.crystallizer-body.results-ready .iceberg-shade, -.crystallizer-body.results-ready .iceberg-facet, -.crystallizer-body.results-ready .iceberg-ridge, -.crystallizer-body.results-ready .waterline { - animation: crystallizerFacetReveal 760ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: 180ms; -} - -.iceberg-facet { - fill: rgba(255, 255, 255, 0.2); - stroke: rgba(255, 255, 255, 0.5); - stroke-width: 2px; - pointer-events: none; -} - -.iceberg-facet.soft { - fill: rgba(255, 255, 255, 0.12); - opacity: 0.62; -} - -.iceberg-facet.low { - fill: rgba(52, 78, 108, 0.12); - stroke: rgba(255, 255, 255, 0.24); -} - -.iceberg-ridge { - fill: none; - stroke: rgba(255, 255, 255, 0.58); - stroke-linecap: round; - stroke-width: 3px; - pointer-events: none; -} - -.iceberg-ridge.faint { - stroke: rgba(255, 255, 255, 0.32); - stroke-width: 2px; -} - -.iceberg-glint { - fill: none; - opacity: 0.72; - stroke: rgba(255, 255, 255, 0.64); - stroke-linecap: round; - stroke-width: 10px; - filter: blur(1px); - pointer-events: none; -} - -.iceberg-glint.right { - opacity: 0.36; - stroke-width: 7px; -} - -.waterline { - stroke: rgba(255, 255, 255, 0.88); - stroke-width: 15px; -} - -.waterline-label { - fill: rgba(71, 85, 105, 0.42); - font-size: 17px; - font-weight: 920; - letter-spacing: 0.24em; - text-anchor: middle; - text-transform: uppercase; - pointer-events: none; -} - -.crystallizer-layer line { - stroke: color-mix(in srgb, var(--layer-accent) 20%, rgba(15, 140, 194, 0.1)); - stroke-dasharray: 8 18; - stroke-width: 1.8px; -} - -.crystallizer-body.results-ready .crystallizer-layer line { - animation: crystallizerLineReveal 700ms ease both; - animation-delay: 260ms; -} - -.crystallizer-layer-label rect { - fill: rgba(255, 255, 255, 0.28); - stroke: color-mix(in srgb, var(--layer-accent) 24%, rgba(255, 255, 255, 0.34)); - stroke-width: 1.1px; - filter: drop-shadow(0 9px 20px rgba(8, 47, 73, 0.05)); -} - -.layer-label-number-mark { - fill: color-mix(in srgb, var(--layer-accent) 84%, #ffffff); - stroke: rgba(255, 255, 255, 0.68); - stroke-width: 1.2px; -} - -.crystallizer-body.results-ready .crystallizer-layer-label, -.crystallizer-body.results-ready .layer-depth-label { - animation: crystallizerLabelReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: 340ms; -} - -.crystallizer-layer-label text, -.layer-depth-label { - pointer-events: none; - text-transform: uppercase; -} - -.layer-label-number { - fill: #ffffff; - font-size: 18px; - font-weight: 920; - text-anchor: middle; -} - -.layer-label-name { - fill: color-mix(in srgb, var(--layer-accent) 72%, #102033); - font-size: 18px; - font-weight: 900; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.layer-label-caption, -.layer-depth-label { - fill: rgba(71, 85, 105, 0.5); - font-size: 11px; - font-weight: 860; - letter-spacing: 0.16em; -} - -.layer-depth-label { - fill: rgba(71, 85, 105, 0.46); - font-size: 14px; - text-anchor: end; -} - -.depth-thread { - fill: none; - opacity: 0.62; - stroke: rgba(71, 85, 105, 0.16); - stroke-linecap: round; - stroke-width: 2.4px; - transition: - opacity 150ms ease, - stroke 150ms ease, - stroke-width 150ms ease, - filter 150ms ease; -} - -.depth-thread.is-highlighted { - opacity: 0.96; - stroke: rgba(98, 216, 235, 0.9); - stroke-width: 4px; - filter: drop-shadow(0 0 9px rgba(98, 216, 235, 0.42)); -} - -.crystallizer-body.results-ready .depth-thread { - animation: crystallizerThreadReveal 680ms ease both; - animation-delay: calc(420ms + min(var(--reveal-index), 12) * 28ms); -} - -.ice-node-hit { - cursor: pointer; - outline: none; -} - -.ice-node-scale { - transform-box: fill-box; - transform-origin: center; - transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.ice-node-hit.hovered .ice-node-scale, -.ice-node-hit:focus-visible .ice-node-scale { - transform: scale(1.025); -} - -.ice-node-hit.selected .ice-node-scale { - transform: scale(1.035); -} - -.ice-node-hit.selected.hovered .ice-node-scale { - transform: scale(1.045); -} - -.crystallizer-body.results-ready .ice-node-hit { - opacity: 0; - animation: crystallizerNodeReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: calc(520ms + min(var(--reveal-index), 16) * 34ms); -} - -.ice-node { - display: grid; - width: 100%; - height: 100%; - grid-template-columns: 28px minmax(0, 1fr); - grid-template-rows: auto auto; - align-content: center; - column-gap: 9px; - row-gap: 2px; - border: 1px solid color-mix(in srgb, var(--layer-accent) 28%, transparent); - border-left: 4px solid var(--layer-accent); - border-radius: 11px; - padding: 9px 10px 9px 8px; - background: - radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.96), transparent 32%), - linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)), - color-mix(in srgb, var(--layer-accent) 5%, white); - color: #102033; - text-align: left; - box-shadow: 0 12px 28px rgba(8, 47, 73, 0.12); - transition: - background 180ms ease, - border-color 180ms ease, - filter 160ms ease, - opacity 160ms ease, - box-shadow 180ms ease; - user-select: none; - -webkit-user-select: none; -} - -.ice-node-hit.selected .ice-node, -.ice-node-hit.hovered .ice-node, -.ice-node-hit:focus-visible .ice-node, -.ice-node:hover, -.ice-node:focus-visible { - border-color: color-mix(in srgb, var(--layer-accent) 62%, white); - border-left-color: var(--layer-accent); - background: - radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 1), transparent 34%), - linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.82)), - color-mix(in srgb, var(--layer-accent) 9%, white); - box-shadow: - 0 18px 36px rgba(8, 47, 73, 0.16), - 0 0 0 3px color-mix(in srgb, var(--layer-accent) 14%, transparent); -} - -.ice-node span { - display: grid; - place-items: center; - width: 24px; - height: 24px; - grid-row: 1 / span 2; - border-radius: 999px; - background: color-mix(in srgb, var(--layer-accent) 88%, #ffffff); - color: #ffffff; - font-size: 11px; - font-weight: 900; - box-shadow: - 0 7px 16px color-mix(in srgb, var(--layer-accent) 18%, transparent), - inset 0 1px 0 rgba(255, 255, 255, 0.5); -} - -.ice-node strong { - display: -webkit-box; - min-width: 0; - overflow: hidden; - color: #102033; - font-size: 13px; - font-weight: 900; - line-height: 1.18; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; - font-family: var(--font-display); -} - -.ice-node small { - display: -webkit-box; - overflow: hidden; - color: rgba(82, 97, 115, 0.74); - font-size: 9.5px; - font-weight: 680; - line-height: 1.25; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - line-clamp: 1; -} - -/* HTML raised card — floats over the SVG (see Crystallizer render). It mirrors the - .ice-node look but is wider, grows to content and shows the full description. - Positioned via inline left/top/width from the hovered node's live DOM rect. - Always mounted; .is-visible drives a smooth fade + lift in *and* out (no pop). */ -.ice-raised-card { - position: absolute; - z-index: 5; - display: grid; - grid-template-columns: 28px minmax(0, 1fr); - grid-template-rows: auto auto; - align-content: start; - column-gap: 9px; - row-gap: 3px; - border: 1px solid color-mix(in srgb, var(--layer-accent) 62%, white); - border-left: 4px solid var(--layer-accent); - border-radius: 12px; - padding: 11px 13px 13px 10px; - background: - radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 1), transparent 34%), - linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.86)), - color-mix(in srgb, var(--layer-accent) 10%, white); - color: #102033; - text-align: left; - box-shadow: - 0 24px 50px rgba(8, 47, 73, 0.26), - 0 0 0 3px color-mix(in srgb, var(--layer-accent) 18%, transparent); - pointer-events: none; - opacity: 0; - transform: scale(0.955) translateY(3px); - transform-origin: center top; - transition: - opacity 190ms ease, - transform 220ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.ice-raised-card.is-visible { - opacity: 1; - transform: scale(1) translateY(0); -} - -.ice-raised-badge { - display: grid; - place-items: center; - width: 30px; - height: 24px; - grid-row: 1 / span 2; - align-self: start; - border-radius: 999px; - background: color-mix(in srgb, var(--layer-accent) 88%, #ffffff); - color: #ffffff; - font-size: 11px; - font-weight: 900; - box-shadow: - 0 7px 16px color-mix(in srgb, var(--layer-accent) 18%, transparent), - inset 0 1px 0 rgba(255, 255, 255, 0.5); -} - -.ice-raised-card strong { - align-self: center; - min-width: 0; - color: #102033; - font-size: 12px; - font-weight: 900; - line-height: 1.18; - font-family: var(--font-display); -} - -.ice-raised-card small { - grid-column: 2; - color: rgba(60, 76, 96, 0.94); - font-size: 10.5px; - font-weight: 660; - line-height: 1.34; -} - -.text-shimmer { - --text-shimmer-base: rgba(51, 65, 85, 0.64); - --text-shimmer-highlight: rgba(255, 255, 255, 0.98); - --text-shimmer-duration: 2.4s; - --text-shimmer-spread: 48px; - display: inline-block; - background: linear-gradient( - 100deg, - var(--text-shimmer-base) 0%, - var(--text-shimmer-base) calc(44% - var(--text-shimmer-spread)), - var(--text-shimmer-highlight) 50%, - var(--text-shimmer-base) calc(56% + var(--text-shimmer-spread)), - var(--text-shimmer-base) 100% - ); - background-size: 300% 100%; - -webkit-background-clip: text; - background-clip: text; - color: transparent; - -webkit-text-fill-color: transparent; - animation: textShimmer var(--text-shimmer-duration) linear infinite; -} - -.crystallizer-empty { - position: absolute; - inset: 0; - z-index: 8; - display: grid; - place-content: center; - justify-items: center; - gap: 14px; - pointer-events: none; - color: #0f8cc2; - text-align: center; -} - -.crystallizer-empty::before { - position: absolute; - inset: 0; - content: ''; - background: - radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.34), transparent 34%), - linear-gradient(180deg, rgba(239, 249, 255, 0.08), rgba(232, 244, 255, 0.18)); - backdrop-filter: blur(10px) saturate(1.12); - -webkit-backdrop-filter: blur(10px) saturate(1.12); - mask-image: radial-gradient( - circle at 50% 50%, - black 0 38%, - rgba(0, 0, 0, 0.7) 58%, - transparent 86% - ); -} - -.crystallizer-state-card { - position: relative; - z-index: 1; - display: grid; - place-items: center; - min-width: min(360px, 72vw); - min-height: 154px; - overflow: hidden; - border: 1px solid rgba(186, 230, 253, 0.42); - border-radius: 18px; - padding: 28px 42px; - background: - radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.98), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(238, 248, 255, 0.46)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.86), - 0 28px 70px rgba(8, 47, 73, 0.16), - 0 0 0 1px rgba(255, 255, 255, 0.34); - backdrop-filter: blur(24px) saturate(1.2); -} - -.crystallizer-state-card::before { - position: absolute; - z-index: 0; - inset: -45%; - content: ''; - background: - conic-gradient( - from 120deg, - transparent, - rgba(125, 211, 252, 0.18), - transparent 40%, - rgba(255, 255, 255, 0.34), - transparent 72% - ), - radial-gradient(circle at 50% 50%, rgba(210, 247, 255, 0.4), transparent 42%); - filter: blur(18px); - opacity: 0.72; - pointer-events: none; -} - -.crystallizer-state-card > svg, -.crystallizer-state-card h2 { - position: relative; - z-index: 2; -} - -.crystallizer-empty svg { - width: 42px; - height: 42px; -} - -.crystallizer-empty h2 { - margin: 0; - margin-top: -30px; - color: #334155; - font-family: var(--font-old); - font-size: 25px; - font-weight: 750; -} - -.crystallizer-empty.error { - color: var(--danger); -} - -.crystallizer-empty.crystallizing .crystallizer-state-card { - min-width: min(430px, 78vw); - min-height: 236px; - border-color: rgba(186, 230, 253, 0.54); - padding: 0; - color: #10a9d2; - background: - radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.98), transparent 36%), - radial-gradient(circle at 32% 78%, rgba(125, 211, 252, 0.22), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(227, 246, 255, 0.48)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.92), - 0 32px 82px rgba(8, 47, 73, 0.2), - 0 0 44px rgba(56, 189, 248, 0.22), - 0 0 0 1px rgba(255, 255, 255, 0.42); - isolation: isolate; -} - -.crystallizer-empty.crystallizing .crystallizing-orb { - min-height: 236px; - padding: 28px 42px; -} - -.crystallizer-empty.crystallizing .crystallizer-state-card::before { - animation: answerHaze 6.5s linear infinite; -} - -.crystallizer-empty.crystallizing .crystallizer-state-card::after { - position: absolute; - z-index: 1; - inset: 0; - content: ''; - border-radius: inherit; - background: - radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.42), transparent 35%), - linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, 0.28) 16%, transparent 30%), - linear-gradient(248deg, transparent 14%, rgba(125, 211, 252, 0.2) 34%, transparent 62%); - filter: blur(0.4px); - opacity: 0.68; - pointer-events: none; - animation: crystallizerGlassGleam 4.8s ease-in-out infinite; -} - -.crystallizer-god-rays, -.crystallizer-prismatic-aura { - position: absolute; - z-index: 1; - pointer-events: none; -} - -.crystallizer-god-rays { - inset: -38%; - background: conic-gradient( - from 216deg at 50% 54%, - transparent 0deg, - rgba(255, 255, 255, 0.58) 9deg, - transparent 18deg, - transparent 42deg, - rgba(125, 211, 252, 0.32) 49deg, - transparent 62deg, - transparent 116deg, - rgba(214, 245, 255, 0.52) 126deg, - transparent 140deg, - transparent 214deg, - rgba(255, 255, 255, 0.38) 224deg, - transparent 238deg, - transparent 360deg - ); - filter: blur(9px); - mix-blend-mode: screen; - opacity: 0.9; - transform-origin: center; - animation: crystallizerGodRays 8.8s ease-in-out infinite; -} - -.crystallizer-prismatic-aura { - inset: -16%; - background: - radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.84), transparent 16%), - radial-gradient(circle at 48% 50%, rgba(56, 189, 248, 0.34), transparent 34%), - radial-gradient(circle at 64% 38%, rgba(192, 132, 252, 0.16), transparent 38%), - radial-gradient(circle at 34% 68%, rgba(34, 211, 238, 0.18), transparent 38%); - filter: blur(18px); - opacity: 0.94; - animation: crystallizerAuraPulse 3.8s ease-in-out infinite; -} - -.crystallizing-orb .answer-loading-haze, -.crystallizing-orb .answer-loading-ring { - border-radius: inherit; -} - -.crystallizing-orb .answer-loading-ring { - z-index: 2; - opacity: 0.96; - filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.3)); - margin-top: -55px; -} - -.answer-crystallizing-orb .answer-loading-ring { - inset: 0; - margin-top: 0; -} - -.answer-crystallizing-orb .crystallizer-god-rays { - inset: -46%; - opacity: 0.72; -} - -.answer-crystallizing-orb .crystallizer-prismatic-aura { - inset: -24%; - opacity: 0.88; -} - -.answer-crystallizing-orb .answer-loading-haze { - background: - radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.72), transparent 26%), - radial-gradient(circle at 50% 50%, rgba(186, 230, 253, 0.58), transparent 48%), - radial-gradient(circle at 44% 62%, rgba(125, 211, 252, 0.22), transparent 64%); -} - -.crystallizer-quantum-core { - position: relative; - z-index: 3; - display: grid; - place-items: center; - width: 78px; - height: 78px; - margin-top: 2px; - border: 1px solid rgba(255, 255, 255, 0.66); - border-radius: 999px; - background: - radial-gradient( - circle at 50% 50%, - rgba(255, 255, 255, 0.98), - rgba(186, 230, 253, 0.44) 48%, - rgba(14, 165, 233, 0.1) 72% - ), - linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(224, 247, 255, 0.42)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.92), - 0 0 26px rgba(56, 189, 248, 0.38), - 0 0 68px rgba(14, 165, 233, 0.24); - animation: crystallizerCoreFloat 3.4s ease-in-out infinite; -} - -.crystallizer-quantum-core::before, -.crystallizer-quantum-core::after { - position: absolute; - inset: -14px; - content: ''; - border-radius: inherit; - border: 1px solid rgba(186, 230, 253, 0.38); - opacity: 0.8; - animation: crystallizerHaloPulse 2.6s ease-in-out infinite; -} - -.crystallizer-quantum-core::after { - inset: -26px; - border-color: rgba(255, 255, 255, 0.3); - animation-delay: 620ms; -} - -.crystallizer-quantum-core svg { - position: relative; - z-index: 1; - width: 34px; - height: 34px; -} - -.crystallizer-loading-title { - z-index: 3; - margin: 6px 0 0; -} - -.crystallizer-empty h2.crystallizer-loading-title { - margin-top: 24px; - font-size: 27px; - letter-spacing: 0; -} - -.answer-crystallizing-orb .crystallizer-loading-title { - margin: 18px 0 0; - line-height: 1.05; -} - -.answer-crystallizing-orb .crystallizer-loading-title .text-shimmer { - font-size: 18px; - font-weight: 760; -} - -.answer-crystallizing-orb .crystallizer-quantum-core { - width: 68px; - height: 68px; - margin-top: 0; -} - -.answer-crystallizing-orb .crystallizing-orb-subtitle { - margin-top: 0; -} - -.crystallizer-shimmer-text { - --text-shimmer-base: rgba(25, 93, 123, 0.72); - --text-shimmer-highlight: rgba(255, 255, 255, 1); - filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.42)); -} - -.crystallizer-dock { - display: flex; - flex-direction: column; - height: 100%; - min-height: 0; - position: relative; - z-index: 3; - min-width: 0; - gap: 12px; - border-left: 1px solid rgba(125, 211, 252, 0.26); - padding: 14px; - background: rgba(255, 255, 255, 0.52); - backdrop-filter: blur(22px) saturate(1.08); -} - -.layer-strip.compact { - display: flex; - flex-direction: column; - gap: 8px; -} - -.layer-strip.compact button { - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - height: 42px; - align-items: center; - gap: 7px; - border-radius: 10px; - padding: 7px 8px; - box-shadow: none; - color: #475569; - text-align: left; - transition: - transform 150ms ease, - border-color 150ms ease, - background 150ms ease, - box-shadow 150ms ease, - color 150ms ease; -} - -.crystallizer-body.results-ready .layer-strip.compact button { - animation: crystallizerDockReveal 440ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(1) { - animation-delay: 160ms; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(2) { - animation-delay: 195ms; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(3) { - animation-delay: 230ms; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(4) { - animation-delay: 265ms; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(5) { - animation-delay: 300ms; -} - -.crystallizer-body.results-ready .layer-strip.compact button:nth-child(6) { - animation-delay: 335ms; -} - -.layer-strip.compact button.active { - border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 46%, white); - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, white); - color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 84%, #102033); -} - -.layer-strip.compact button:hover { - border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 42%, white); - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 8%, white); - box-shadow: 0 9px 20px rgba(8, 47, 73, 0.08); - transform: translateY(-1px); -} - -.layer-strip.compact button:disabled, -.layer-strip.compact button:disabled:hover { - opacity: 0.48; - border-color: rgba(148, 163, 184, 0.18); - background: rgba(241, 245, 249, 0.46); - box-shadow: none; - color: #94a3b8; - cursor: not-allowed; - transform: none; -} - -.layer-strip.compact button:disabled .layer-number, -.layer-strip.compact button:disabled svg { - filter: grayscale(0.5) saturate(0.45); -} - -.layer-strip.compact svg, -.layer-number { - display: grid; - place-items: center; - width: 19px; - height: 19px; - border-radius: 6px; - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 82%, #ffffff); - color: #ffffff; -} - -.layer-strip.compact svg { - padding: 3px; - border: 1px solid rgba(125, 211, 252, 0.42); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 249, 255, 0.62)), - rgba(14, 165, 233, 0.08); - color: #0f8cc2; -} - -.layer-strip.compact strong { - min-width: 0; - overflow: hidden; - font-size: 10px; - font-weight: 920; - letter-spacing: 0.05em; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; -} - -.layer-strip.compact .filter-count { - display: grid; - place-items: center; - min-width: 20px; - height: 20px; - border-radius: 999px; - padding: 0 5px; - background: rgba(15, 23, 42, 0.06); - color: #64748b; - font-size: 10px; - font-weight: 900; -} - -.canvas-layer-hud { - position: absolute; - top: 14px; - right: 16px; - z-index: 5; - display: grid; - grid-auto-flow: column; - grid-auto-columns: minmax(0, 1fr); - width: auto; - max-width: calc(100% - 232px); - align-items: center; - gap: 4px; - border: 1px solid rgba(125, 211, 252, 0.26); - border-radius: 18px; - padding: 6px; - background: - radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.92), transparent 34%), - linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(229, 248, 255, 0.5)); - box-shadow: - 0 14px 34px rgba(8, 47, 73, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.72); - backdrop-filter: blur(18px) saturate(1.12); - -webkit-backdrop-filter: blur(18px) saturate(1.12); -} - -.canvas-layer-hud.layer-strip.compact button { - display: inline-grid; - grid-template-columns: auto auto auto; - justify-content: center; - width: 100%; - height: 26px; - align-items: center; - gap: 4px; - border-radius: 999px; - padding: 0 6px 0 4px; - background: rgba(255, 255, 255, 0.5); - line-height: 1; -} - -.canvas-layer-hud.layer-strip.compact button:hover { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(229, 248, 255, 0.72)), - color-mix(in srgb, var(--layer-accent, #0f8cc2) 7%, white); - box-shadow: - 0 8px 18px rgba(8, 47, 73, 0.1), - 0 0 0 2px color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, transparent); -} - -.canvas-layer-hud.layer-strip.compact button.active { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(224, 247, 255, 0.68)), - color-mix(in srgb, var(--layer-accent, #0f8cc2) 12%, white); -} - -.canvas-layer-hud.layer-strip.compact svg, -.canvas-layer-hud.layer-strip.compact .layer-number { - width: 16px; - height: 16px; - flex: 0 0 16px; - border-radius: 999px; - font-size: 13px; -} - -.canvas-layer-hud.layer-strip.compact svg { - padding: 2px; -} - -.canvas-layer-hud.layer-strip.compact strong { - max-width: 58px; - font-size: 8px; - letter-spacing: 0.04em; -} - -.canvas-layer-hud.layer-strip.compact .filter-count { - min-width: 16px; - max-width: 32px; - height: 16px; - padding: 0 4px; - font-size: 8px; - justify-self: end; -} - -.crystallizer-detail { - display: grid; - gap: 8px; - border: 1px solid color-mix(in srgb, var(--layer-accent) 28%, transparent); - border-radius: 8px; - padding: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62)), - color-mix(in srgb, var(--layer-accent) 7%, white); - box-shadow: 0 18px 42px rgba(8, 47, 73, 0.1); -} - -.crystallizer-body.results-ready .crystallizer-detail { - animation: crystallizerDockReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: 430ms; -} - -.crystallizer-detail p, -.crystallizer-detail h2, -.crystallizer-detail small { - margin: 0; - font-family: var(--font-old); -} - -.crystallizer-detail p { - color: var(--layer-accent); - font-size: 10px; - font-weight: 900; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.crystallizer-detail h2 { - color: #102033; - font-size: 15px; - font-weight: 900; - line-height: 1.1; -} - -.crystallizer-detail > span { - color: #64748b; - font-size: 11px; - font-weight: 850; -} - -.crystallizer-depth-meta { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.crystallizer-depth-meta strong, -.crystallizer-depth-meta span { - display: inline-flex; - min-height: 22px; - align-items: center; - border: 1px solid color-mix(in srgb, var(--layer-accent) 24%, rgba(255, 255, 255, 0.58)); - border-radius: 999px; - padding: 0 8px; - background: rgba(255, 255, 255, 0.54); - color: color-mix(in srgb, var(--layer-accent) 70%, #102033); - font-size: 10px; - font-style: normal; - font-weight: 900; - letter-spacing: 0.06em; - line-height: 1; - text-transform: uppercase; -} - -.crystallizer-detail small { - color: #475569; - font-size: 12px; - font-weight: 650; - line-height: 1.45; -} - -.crystallizer-depth-reason { - border-left: 2px solid color-mix(in srgb, var(--layer-accent) 42%, transparent); - padding-left: 9px; - color: #64748b; - font-size: 10px; - font-style: normal; - font-weight: 650; - line-height: 1.38; -} - -.crystallizer-detail button { - display: inline-flex; - width: 100%; - align-items: center; - justify-content: space-between; - border-radius: 8px; - margin-top: 5px; - box-shadow: none; -} - -.crystallizer-detail button svg { - width: 16px; - height: 16px; -} - -.crystal-button, -.responsive-button { - transition: - transform 0.1s ease, - border-color 0.1s ease, - box-shadow 0.1s ease; - cursor: pointer; -} -.crystal-button, -.responsive-button:hover { - border-color: rgba(14, 165, 233, 0.58); - background: - radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), - linear-gradient(135deg, #ecfeff 0%, #bae6fd 18%, #e0f2fe 36%, #ffffff 100%); - color: #082f49; - box-shadow: - 0 0 0 4px rgba(125, 211, 252, 0.16), - 0 18px 34px rgba(14, 165, 233, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.4); - transform: translateY(-1px); -} - -.model-setup-button { - transition: - transform 0.1s ease, - border-color 0.1s ease, - box-shadow 0.1s ease; -} -.model-setup-button:hover { - border-color: rgba(14, 165, 233, 0.58); - background: - radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), - linear-gradient(135deg, #ecfeff 0%, #bae6fd 18%, #e0f2fe 36%, #ffffff 100%); - color: #082f49; - box-shadow: - 0 0 0 4px rgba(125, 211, 252, 0.16), - 0 18px 34px rgba(14, 165, 233, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.4); - transform: translateY(-1px); -} - -.crystallizer-detail .explore-web-button { - position: relative; - overflow: hidden; - border-color: rgba(125, 211, 252, 0.34); - background: - radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.92), transparent 28%), - linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(224, 247, 255, 0.56)); - color: #075985; - isolation: isolate; - transition: - transform 90ms ease, - border-color 110ms ease, - background 110ms ease, - box-shadow 110ms ease, - color 90ms ease; -} - -.crystallizer-detail .explore-web-button::before { - position: absolute; - inset: -40% -22%; - z-index: -1; - content: ''; - background: - linear-gradient( - 112deg, - transparent 0%, - transparent 27%, - rgba(255, 255, 255, 0.94) 39%, - rgba(186, 230, 253, 0.86) 49%, - rgba(255, 255, 255, 0.9) 58%, - transparent 72% - ), - linear-gradient(135deg, #f0fdff 0%, #bae6fd 42%, #e0f2fe 68%, #ffffff 100%); - opacity: 0; - transform: translateX(-72%) skewX(-12deg); - transition: - transform 260ms cubic-bezier(0.16, 1, 0.3, 1), - opacity 80ms ease; -} - -.crystallizer-detail .explore-web-button:hover { - border-color: rgba(14, 165, 233, 0.58); - background: - radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), - linear-gradient(135deg, #ecfeff 0%, #bae6fd 38%, #e0f2fe 66%, #ffffff 100%); - color: #082f49; - box-shadow: - 0 0 0 4px rgba(125, 211, 252, 0.16), - 0 18px 34px rgba(14, 165, 233, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.9); - transform: translateY(-1px); -} - -.crystallizer-detail .explore-web-button:hover::before { - opacity: 1; - transform: translateX(72%) skewX(-12deg); -} - -.crystallizer-detail .explore-web-button:active { - transform: translateY(0) scale(0.99); -} - -.crystallizer-placeholder { - display: flex; - min-height: 138px; - place-items: center; - align-items: center; - border: 1px dashed rgba(100, 116, 139, 0.24); - border-radius: 8px; - color: #64748b; - font-size: 12px; - font-weight: 760; -} - -.crystallizer-placeholder span { - color: #94a3b8; - font-size: 11px; - font-weight: 900; - letter-spacing: 0.12em; - text-transform: uppercase; - margin: auto; - gap: 10px; - display: flex; - align-items: center; -} - -.crystallizer-placeholder span svg { - display: block; - min-width: 30px; - min-height: 30px; - flex-shrink: 0; -} - -.crystallizer-list { - display: flex; - min-height: 0; - flex: 2 1 280px; - flex-direction: column; - gap: 7px; - overflow-y: auto; - overflow-x: hidden; -} - -.crystallizer-list button { - display: grid; - min-height: 38px; - height: auto; - grid-template-columns: 24px minmax(0, 1fr); - align-items: center; - gap: 8px; - border-radius: 8px; - padding: 7px 9px; - text-align: left; - box-shadow: none; - margin-right: 14px; -} - -.crystallizer-body.results-ready .crystallizer-list button { - animation: crystallizerListReveal 460ms cubic-bezier(0.16, 1, 0.3, 1) both; - animation-delay: calc(560ms + min(var(--reveal-index), 18) * 28ms); -} - -.crystallizer-list button.active { - border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 38%, white); - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, white); -} - -.crystallizer-list button:hover { - border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 34%, white); - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 7%, white); - box-shadow: 0 8px 18px rgba(8, 47, 73, 0.08); -} - -.crystallizer-list span { - display: grid; - place-items: center; - width: 22px; - height: 22px; - border-radius: 6px; - background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 88%, #ffffff); - color: #ffffff; - font-size: 11px; - font-weight: 900; - box-shadow: 0 7px 16px color-mix(in srgb, var(--layer-accent, #0f8cc2) 18%, transparent); -} - -.crystallizer-list strong { - min-width: 0; - overflow: hidden; - color: #334155; - font-size: 12px; - font-weight: 820; - text-overflow: ellipsis; - white-space: nowrap; - font-family: var(--font-old); -} - -.saved-atlas-drawer { - display: flex; - flex: 0 0 auto; - flex-direction: column; - min-height: 0; - gap: 7px; - border-top: 1px solid rgba(125, 211, 252, 0.22); - padding-top: 8px; - transition: - flex-basis 220ms ease, - flex-grow 220ms ease; -} - -.crystallizer-dock.saved-atlas-priority .crystallizer-list { - display: none; -} - -.crystallizer-dock.saved-atlas-priority .saved-atlas-drawer.open { - flex: 1 1 auto; -} - -.saved-atlas-head { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - width: 100%; - height: 34px; - border-color: rgba(125, 211, 252, 0.22); - border-radius: 9px; - padding: 0 8px; - background: rgba(239, 249, 255, 0.52); - color: #64748b; - box-shadow: none; -} - -.saved-atlas-title { - display: inline-flex; - min-width: 0; - align-items: center; - gap: 7px; - font-size: 10px; - font-weight: 900; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -.saved-atlas-head strong { - display: grid; - place-items: center; - min-width: 20px; - height: 18px; - border-radius: 999px; - padding: 0 6px; - background: - radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.9), transparent 44%), - rgba(15, 140, 194, 0.12); - color: #0f8cc2; - font-size: 10px; - font-weight: bold; -} - -.saved-atlas-head > svg { - width: 14px; - height: 14px; - transition: transform 160ms ease; -} - -.saved-atlas-drawer.open .saved-atlas-head > svg { - transform: rotate(180deg); -} - -.saved-atlas-drawer p { - max-height: 0; - margin: 0; - overflow: hidden; - color: #94a3b8; - font-size: 11px; - font-weight: 760; - opacity: 0; - transition: - max-height 220ms ease, - opacity 160ms ease; -} - -.saved-atlas-drawer.open p { - max-height: 48px; - opacity: 1; -} - -.saved-atlas-list { - display: grid; - max-height: 0; - gap: 4px; - overflow: hidden; - opacity: 0; - transition: - max-height 260ms cubic-bezier(0.16, 1, 0.3, 1), - opacity 180ms ease; - padding: 4px; -} - -.saved-atlas-drawer.open .saved-atlas-list { - max-height: 132px; - overflow: auto; - opacity: 1; -} - -.crystallizer-dock.saved-atlas-priority .saved-atlas-drawer.open .saved-atlas-list { - flex: 1 1 auto; - max-height: none; - min-height: 0; - align-content: start; - grid-auto-rows: max-content; - overflow: auto; -} - -/* Conscious expansion while an iceberg is open: the drawer behaves like a real - drawer and rolls up over the shard list, taking that space until closed again. */ -.crystallizer-dock.saved-atlas-open .crystallizer-list { - display: none; -} - -.crystallizer-dock.saved-atlas-open .saved-atlas-drawer.open { - flex: 1 1 auto; - min-height: 0; -} - -.crystallizer-dock.saved-atlas-open .saved-atlas-drawer.open .saved-atlas-list { - flex: 1 1 auto; - max-height: none; - min-height: 0; - align-content: start; - grid-auto-rows: max-content; - overflow: auto; -} - -.saved-atlas-list article { - display: grid; - grid-template-columns: minmax(0, 1fr) 28px; - align-self: start; - gap: 6px; -} - -.saved-atlas-list article > button { - height: auto; - min-height: 44px; - border-radius: 8px; - box-shadow: none; -} - -.saved-atlas-list article > button:first-child { - display: grid; - justify-items: start; - gap: 3px; - padding: 7px 9px; - text-align: left; -} - -.saved-atlas-list article > button:last-child { - display: grid; - place-items: center; - padding: 0; - color: #94a3b8; -} - -.saved-atlas-list article.active > button:first-child { - border-color: rgba(15, 140, 194, 0.34); - background: rgba(231, 246, 255, 0.82); -} - -.saved-atlas-list strong { - max-width: 100%; - overflow: hidden; - color: #334155; - font-size: 12px; - font-weight: 800; - text-overflow: ellipsis; - white-space: nowrap; - text-transform: capitalize; - font-family: var(--font-old); -} - -.saved-atlas-list small { - color: #64748b; - font-size: 10px; - font-weight: 700; - line-height: 1; - margin-top: -3px; - font-family: var(--font-old); -} - -.crystallizer-dock .dock-footer { - flex: 0 0 auto; - align-self: center; - margin-top: auto; - font-size: 9px; - letter-spacing: 2.6px; -} - -@keyframes crystallizerIcebergReveal { - from { - opacity: 0.18; - filter: blur(10px) drop-shadow(0 18px 32px rgba(8, 47, 73, 0.08)); - } - to { - opacity: 1; - filter: blur(0) drop-shadow(0 46px 70px rgba(8, 47, 73, 0.22)) - drop-shadow(0 0 34px rgba(125, 211, 252, 0.28)); - } -} - -@keyframes crystallizerZoneReveal { - from { - opacity: 0; - } -} - -@keyframes crystallizerFacetReveal { - from { - opacity: 0; - filter: blur(5px); - } - to { - filter: blur(0); - } -} - -@keyframes crystallizerLineReveal { - from { - opacity: 0; - stroke-dashoffset: 80; - } -} - -@keyframes crystallizerLabelReveal { - from { - opacity: 0; - filter: blur(8px); - } - to { - opacity: 1; - filter: blur(0); - } -} - -@keyframes crystallizerThreadReveal { - from { - opacity: 0; - stroke-dasharray: 4 18; - stroke-dashoffset: 80; - } - to { - opacity: 1; - } -} - -@keyframes crystallizerNodeReveal { - from { - opacity: 0; - filter: blur(8px); - } - to { - opacity: 1; - filter: blur(0); - } -} - -@keyframes crystallizerDockReveal { - from { - opacity: 0; - transform: translateY(10px); - filter: blur(6px); - } - to { - opacity: 1; - transform: translateY(0); - filter: blur(0); - } -} - -@keyframes crystallizerListReveal { - from { - opacity: 0; - transform: translateX(12px); - filter: blur(5px); - } - to { - opacity: 1; - transform: translateX(0); - filter: blur(0); - } -} - -@keyframes textShimmer { - 0% { - background-position: 140% 0; - } - 100% { - background-position: -140% 0; - } -} - -@keyframes crystallizerGodRays { - 0%, - 100% { - opacity: 0.62; - transform: rotate(-8deg) scale(0.96); - } - 50% { - opacity: 0.96; - transform: rotate(11deg) scale(1.04); - } -} - -@keyframes crystallizerAuraPulse { - 0%, - 100% { - opacity: 0.7; - transform: scale(0.96); - } - 50% { - opacity: 1; - transform: scale(1.06); - } -} - -@keyframes crystallizerGlassGleam { - 0%, - 100% { - opacity: 0.42; - transform: translateX(-3%) skewX(-6deg); - } - 50% { - opacity: 0.82; - transform: translateX(3%) skewX(6deg); - } -} - -@keyframes crystallizerCoreFloat { - 0%, - 100% { - transform: translateY(0) scale(1); - } - 50% { - transform: translateY(-5px) scale(1.025); - } -} - -@keyframes crystallizerHaloPulse { - 0%, - 100% { - opacity: 0.24; - transform: scale(0.92); - } - 50% { - opacity: 0.82; - transform: scale(1.08); - } -} - -.settings-overlay { - position: fixed; - inset: 0; - z-index: 120; - display: grid; - place-items: center; - padding: 28px; - background: - radial-gradient(circle at 28% 18%, rgba(210, 247, 255, 0.58), transparent 28%), - radial-gradient(circle at 72% 82%, rgba(166, 219, 255, 0.34), transparent 30%), - rgba(242, 249, 255, 0.72); - backdrop-filter: blur(26px) saturate(1.18); - animation: settings-overlay-in 260ms ease both; -} - -#model-setup-title { - font-size: 58px; -} - -.model-setup-overlay { - position: fixed; - inset: 0; - z-index: 124; - display: grid; - place-items: center; - padding: 28px; - background: - linear-gradient( - 135deg, - rgba(246, 252, 255, 0.86), - rgba(232, 247, 255, 0.72) 42%, - rgba(248, 244, 255, 0.78) - ), - rgba(242, 249, 255, 0.76); - backdrop-filter: blur(30px) saturate(1.2); - animation: settings-overlay-in 260ms ease both; -} - -.model-setup-modal { - position: relative; - display: grid; - gap: 18px; - width: min(980px, calc(100vw - 56px)); - max-height: calc(100vh - 56px); - overflow: auto; - border: 1px solid rgba(105, 164, 205, 0.32); - border-radius: 26px; - padding: 22px; - background: - linear-gradient( - 120deg, - rgba(255, 255, 255, 0.96), - rgba(238, 250, 255, 0.9) 52%, - rgba(250, 247, 255, 0.92) - ), - rgba(255, 255, 255, 0.9); - box-shadow: - 0 34px 90px rgba(45, 88, 130, 0.24), - inset 0 1px 0 rgba(255, 255, 255, 0.92); - isolation: isolate; - animation: settings-modal-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.model-setup-modal::before { - position: absolute; - inset: 0; - z-index: -1; - content: ''; - background: - linear-gradient(115deg, transparent 0 18%, rgba(113, 217, 234, 0.2) 28%, transparent 40% 100%), - linear-gradient(72deg, transparent 0 48%, rgba(148, 121, 214, 0.14) 58%, transparent 70% 100%); - mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.48)); -} - -.model-setup-glass { - position: absolute; - inset: 10px; - z-index: -1; - border: 1px solid rgba(255, 255, 255, 0.68); - border-radius: 20px; - pointer-events: none; -} - -.model-setup-hero { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); - gap: 22px; - align-items: center; - min-height: 184px; -} - -.model-setup-copy { - display: grid; - align-content: center; - gap: 10px; - min-width: 0; -} - -.model-setup-kicker { - display: inline-flex; - width: fit-content; - align-items: center; - gap: 8px; - border: 1px solid rgba(77, 168, 202, 0.24); - border-radius: 999px; - padding: 6px 10px; - background: rgba(255, 255, 255, 0.62); - color: #287c9f; - font-size: 11px; - font-weight: 900; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.model-setup-kicker svg, -.model-setup-spark { - width: 14px; - height: 14px; -} - -.model-setup-spark { - border-radius: 999px; - background: radial-gradient(circle, #62d8c6 0 28%, rgba(98, 216, 198, 0.18) 34% 100%); - box-shadow: - 0 0 0 4px rgba(98, 216, 198, 0.12), - 0 0 18px rgba(80, 181, 216, 0.28); -} - -.model-setup-copy h1 { - margin: 0; - color: #162f4e; - font-family: var(--font-display); - font-size: clamp(42px, 7vw, 74px); - font-weight: 760; - letter-spacing: 0; - line-height: 0.9; -} - -.model-setup-copy p { - max-width: 620px; - margin: 0; - color: #4f6884; - font-size: 15px; - font-weight: 640; - line-height: 1.55; -} - -.model-setup-crystal { - position: relative; - display: grid; - place-items: center; - min-height: 176px; - overflow: hidden; -} - -.model-setup-crystal::before { - position: absolute; - inset: 12%; - content: ''; - background: conic-gradient( - from 120deg, - rgba(78, 184, 223, 0.14), - rgba(143, 114, 207, 0.18), - rgba(98, 216, 198, 0.18), - rgba(78, 184, 223, 0.14) - ); - filter: blur(18px); -} - -.model-setup-crystal img { - position: relative; - width: min(210px, 90%); - max-height: 190px; - object-fit: contain; - filter: drop-shadow(0 20px 34px rgba(63, 127, 189, 0.2)); -} - -.model-setup-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); - gap: 14px; - align-items: stretch; -} - -.model-setup-options { - display: grid; - gap: 12px; - min-width: 0; -} - -.model-choice { - position: relative; - display: grid; - grid-template-columns: 26px 40px minmax(0, 1fr) auto; - gap: 12px; - align-items: center; - min-height: 124px; - border: 1px solid rgba(111, 153, 199, 0.22); - border-radius: 18px; - padding: 14px; - background: - linear-gradient(130deg, rgba(255, 255, 255, 0.82), rgba(237, 249, 255, 0.6)), - rgba(255, 255, 255, 0.7); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.76), - 0 12px 28px rgba(68, 115, 169, 0.1); - cursor: pointer; - transition: - transform 180ms ease, - border-color 180ms ease, - background 180ms ease, - box-shadow 180ms ease; -} - -.model-choice:hover { - border-color: rgba(54, 140, 183, 0.34); - transform: translateY(-1px); -} - -.model-choice.installed { - border-color: rgba(72, 153, 119, 0.24); - background: - linear-gradient(130deg, rgba(250, 255, 252, 0.86), rgba(232, 249, 244, 0.58)), - rgba(255, 255, 255, 0.68); - cursor: default; -} - -.model-choice.installed:hover { - transform: none; -} - -.model-choice.selected { - border-color: rgba(53, 154, 185, 0.46); - background: - linear-gradient( - 130deg, - rgba(255, 255, 255, 0.94), - rgba(222, 249, 255, 0.76) 48%, - rgba(244, 239, 255, 0.78) - ), - rgba(255, 255, 255, 0.84); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.88), - 0 16px 34px rgba(72, 148, 190, 0.16); -} - -.model-choice input { - position: absolute; - width: 1px; - height: 1px; - opacity: 0; -} - -.model-choice-check, -.model-choice-icon { - display: grid; - place-items: center; - border-radius: 12px; -} - -.model-choice-check { - width: 24px; - height: 24px; - border: 1px solid rgba(95, 144, 184, 0.28); - background: rgba(255, 255, 255, 0.68); - color: transparent; -} - -.model-choice.selected .model-choice-check { - border-color: rgba(43, 146, 112, 0.3); - background: linear-gradient(145deg, rgba(223, 255, 247, 0.96), rgba(84, 190, 157, 0.82)); - color: #ffffff; -} - -.model-choice.installed .model-choice-check { - border-color: rgba(43, 146, 112, 0.26); - background: rgba(225, 255, 244, 0.76); - color: #2b926f; -} - -.model-choice-check svg { - width: 15px; - height: 15px; - stroke-width: 3; -} - -.model-choice-icon { - width: 40px; - height: 40px; - border: 1px solid rgba(91, 167, 207, 0.2); - background: - linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(225, 246, 255, 0.74)), - rgba(255, 255, 255, 0.7); - color: #2d82a7; -} - -.model-choice-icon svg { - width: 20px; - height: 20px; -} - -.model-choice-copy { - display: grid; - gap: 4px; - min-width: 0; -} - -.model-choice-copy strong { - color: #1d344f; - font-size: 18px; - font-weight: 900; -} - -.model-choice-copy em { - color: #287c9f; - font-size: 12px; - font-style: normal; - font-weight: 860; - letter-spacing: 0.08em; - text-transform: uppercase; -} - -.model-choice-copy small { - color: #566f8c; - font-size: 12px; - font-weight: 640; - line-height: 1.4; -} - -.model-choice-copy code, -.model-core-card code, -.model-access-card code, -.model-dir-card code { - overflow-wrap: anywhere; - color: #31587b; - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - font-size: 10px; - font-weight: 760; -} - -.model-choice-size { - align-self: start; - border: 1px solid rgba(143, 114, 207, 0.18); - border-radius: 999px; - padding: 5px 9px; - background: rgba(255, 255, 255, 0.62); - color: #5d4f91; - font-size: 11px; - font-weight: 900; - white-space: nowrap; -} - -.model-choice.installed .model-choice-size { - border-color: rgba(43, 146, 112, 0.2); - background: rgba(232, 255, 247, 0.72); - color: #2b7d64; -} - -.model-setup-side { - display: grid; - gap: 12px; - min-width: 0; -} - -.model-core-card, -.model-access-card, -.model-dir-card { - display: grid; - align-content: start; - gap: 7px; - min-width: 0; - border: 1px solid rgba(112, 169, 205, 0.22); - border-radius: 18px; - padding: 14px; - background: - linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(235, 249, 255, 0.56)), - rgba(255, 255, 255, 0.64); -} - -.model-core-card span, -.model-access-card > span, -.model-dir-card span { - display: flex; - align-items: center; - gap: 8px; - color: #287c9f; - font-size: 11px; - font-weight: 900; - letter-spacing: 0.1em; - text-transform: uppercase; -} - -.model-core-card span svg { - width: 15px; - height: 15px; -} - -.model-core-card strong { - color: #1d344f; - font-size: 18px; - font-weight: 900; -} - -.model-core-card small { - color: #637895; - font-size: 12px; - font-weight: 680; -} - -.model-core-card.installed { - border-color: rgba(43, 146, 112, 0.2); - background: - linear-gradient(145deg, rgba(250, 255, 252, 0.86), rgba(233, 250, 245, 0.6)), - rgba(255, 255, 255, 0.62); -} - -.model-core-card.installed small, -.model-choice.installed .model-choice-copy code { - color: #2b7d64; -} - -.model-access-card { - gap: 10px; -} - -.model-access-card p { - margin: 0; - color: #566f8c; - font-size: 12px; - font-weight: 640; - line-height: 1.45; -} - -.model-access-links { - display: grid; - grid-template-columns: 1fr; - gap: 6px; -} - -.model-access-links a { - display: flex; - align-items: center; - justify-content: space-between; - gap: 8px; - min-width: 0; - border: 1px solid rgba(88, 150, 194, 0.2); - border-radius: 12px; - padding: 7px 9px; - background: rgba(255, 255, 255, 0.58); - color: #276f9b; - font-size: 11px; - font-weight: 860; - text-decoration: none; -} - -.model-access-links a:hover { - border-color: rgba(58, 143, 183, 0.32); - background: rgba(255, 255, 255, 0.82); -} - -.model-access-links svg { - flex: 0 0 auto; - width: 13px; - height: 13px; -} - -.model-setup-progress { - display: grid; - gap: 10px; - border: 1px solid rgba(117, 155, 198, 0.18); - border-radius: 18px; - padding: 14px; - background: rgba(255, 255, 255, 0.54); -} - -.model-progress-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; -} - -.model-progress-heading span { - color: #287c9f; - font-size: 11px; - font-weight: 900; - letter-spacing: 0.12em; - text-transform: uppercase; -} - -.model-progress-heading strong { - color: #1d344f; - font-size: 12px; - font-weight: 860; -} - -.model-progress-meter, -.model-progress-line { - position: relative; - overflow: hidden; - border-radius: 999px; - background: rgba(98, 132, 174, 0.14); -} - -.model-progress-meter { - height: 10px; -} - -.model-progress-meter span, -.model-progress-line i { - display: block; - width: 100%; - height: 100%; - border-radius: inherit; - transform-origin: left center; - transition: transform 180ms ease; -} - -.model-progress-meter span { - background: linear-gradient(90deg, #55c7d9, #69d8bd 44%, #9a7dd5); - box-shadow: 0 0 18px rgba(85, 199, 217, 0.35); -} - -.model-progress-list { - display: grid; - gap: 8px; -} - -.model-progress-row { - display: grid; - grid-template-columns: 28px minmax(0, 1fr) auto; - gap: 9px; - align-items: center; - min-width: 0; - border: 1px solid rgba(115, 153, 198, 0.14); - border-radius: 14px; - padding: 8px; - background: rgba(255, 255, 255, 0.5); -} - -.model-progress-icon { - display: grid; - place-items: center; - width: 28px; - height: 28px; - border-radius: 10px; - background: rgba(231, 247, 255, 0.72); - color: #2d82a7; -} - -.model-progress-icon svg { - width: 16px; - height: 16px; -} - -.model-progress-row.downloading .model-progress-icon svg { - animation: model-download-spin 1s linear infinite; -} - -.model-progress-row.complete .model-progress-icon, -.model-progress-row.skipped .model-progress-icon { - background: rgba(223, 255, 247, 0.82); - color: #2b9270; -} - -.model-progress-row.error .model-progress-icon { - background: rgba(255, 233, 232, 0.82); - color: var(--danger); -} - -.model-progress-copy { - display: grid; - gap: 1px; - min-width: 0; -} - -.model-progress-copy strong, -.model-progress-copy small { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.model-progress-copy strong { - color: #24384f; - font-size: 12px; - font-weight: 860; -} - -.model-progress-copy small, -.model-progress-size { - color: #6f8299; - font-size: 10px; - font-weight: 720; -} - -.model-progress-size { - white-space: nowrap; -} - -.model-progress-line { - grid-column: 2 / 4; - height: 5px; -} - -.model-progress-line i { - background: linear-gradient(90deg, #55c7d9, #69d8bd 54%, #9a7dd5); -} - -.model-setup-error { - margin: -4px 0 0; - border: 1px solid rgba(184, 91, 89, 0.2); - border-radius: 14px; - padding: 10px 12px; - background: rgba(255, 247, 246, 0.78); - color: var(--danger); - font-size: 12px; - font-weight: 760; - line-height: 1.45; -} - -.model-setup-actions { - display: flex; - justify-content: flex-end; - gap: 10px; -} - -.model-setup-actions button { - min-width: 116px; -} -.model-setup-actions button:hover { - padding: 0 10px; - border-color: rgba(86, 139, 218, 0.3); - background: - radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%), - linear-gradient(135deg, rgba(233, 244, 255, 0.95), rgba(255, 255, 255, 0.82)); - color: var(--accent-strong); - font-weight: 800; -} - -.model-setup-actions button:hover:not(:disabled) { - border-color: rgba(86, 139, 218, 0.5); - box-shadow: 0 8px 18px rgba(74, 145, 194, 0.14); - transform: translateY(-1px); -} - -@keyframes model-download-spin { - to { - transform: rotate(360deg); - } -} - -@media (max-width: 880px) { - .model-setup-overlay { - padding: 16px; - } - - .model-setup-modal { - width: calc(100vw - 32px); - max-height: calc(100vh - 32px); - padding: 16px; - } - - .model-setup-hero, - .model-setup-grid { - grid-template-columns: minmax(0, 1fr); - } - - .model-setup-hero { - min-height: auto; - } - - .model-setup-crystal { - min-height: 132px; - } - - .model-setup-crystal img { - max-height: 138px; - } - - .model-choice { - grid-template-columns: 26px 38px minmax(0, 1fr); - } - - .model-choice-size { - grid-column: 3; - justify-self: start; - } -} - -@media (max-width: 560px) { - .model-setup-copy h1 { - font-size: 40px; - } - - .model-choice { - grid-template-columns: 26px minmax(0, 1fr); - } - - .model-choice-icon { - display: none; - } - - .model-choice-copy, - .model-choice-size { - grid-column: 2; - } - - .model-progress-row { - grid-template-columns: 28px minmax(0, 1fr); - } - - .model-progress-size { - grid-column: 2; - justify-self: start; - } - - .model-progress-line { - grid-column: 1 / 3; - } - - .model-progress-heading, - .model-setup-actions { - align-items: stretch; - flex-direction: column; - } -} - -.settings-modal { - width: min(740px, calc(100vw - 56px)); - max-height: calc(100vh - 56px); - /* Clip the inner scroll body so its scrollbar stays inside the rounded corners. */ - overflow: hidden; - /* Top/bottom padding equals the corner radius, so the modal-body sits in a - rectangle whose top/bottom can never overlap the rounded corners — and neither - can the scrollbar that lives inside it. */ - padding: 28px 0; - border: 1px solid rgba(101, 145, 190, 0.24); - border-radius: 28px; - background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 246, 255, 0.88)); - box-shadow: - 0 32px 80px rgba(54, 91, 132, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.8); - transform-origin: center; - animation: settings-modal-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; -} - -.settings-modal-body { - max-height: calc(100vh - 112px); - overflow-y: auto; - padding: 0 20px; -} - -/* Modal-specific scrollbar: cooler glow at rest, brighter aurora-glow on hover. - filter animates smoothly in WebKit (gradient backgrounds do not), so the - responsiveness lands as a real change in color/glow you can feel. */ -.settings-modal-body::-webkit-scrollbar { - width: 14px; - background: transparent; -} - -.settings-modal-body::-webkit-scrollbar-track { - border: 0; - background: transparent; - box-shadow: none; -} - -.settings-modal-body::-webkit-scrollbar-thumb { - min-height: 48px; - border: 4px solid transparent; - border-radius: 999px; - background: linear-gradient( - 180deg, - rgba(255, 255, 255, 0.98), - rgba(150, 224, 255, 0.92) 44%, - rgba(54, 150, 206, 0.82) - ); - background-clip: padding-box; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.92), - 0 0 0 rgba(83, 212, 255, 0); - filter: saturate(1) brightness(1); - transition: - border-width 160ms ease, - box-shadow 200ms ease, - filter 200ms ease; -} - -.settings-modal-body::-webkit-scrollbar-thumb:hover { - border-width: 3px; - filter: saturate(1.2) brightness(1.1); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.96), - 0 0 14px rgba(101, 226, 255, 0.6); -} - -.settings-modal-body::-webkit-scrollbar-thumb:active { - border-width: 2px; - filter: saturate(1.35) brightness(1.18); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 1), - 0 0 22px rgba(120, 232, 255, 0.78); -} - -@keyframes settings-overlay-in { - from { - opacity: 0; - backdrop-filter: blur(0) saturate(1); - } - to { - opacity: 1; - backdrop-filter: blur(26px) saturate(1.18); - } -} - -@keyframes settings-modal-in { - 0% { - opacity: 0; - filter: blur(10px); - transform: translateY(14px) scale(0.975); - } - 58% { - opacity: 1; - filter: blur(0); - transform: translateY(-2px) scale(1.006); - } - 100% { - opacity: 1; - filter: blur(0); - transform: translateY(0) scale(1); - } -} - -.settings-modal header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 18px; - margin-bottom: 18px; -} - -.settings-modal header p { - margin: 0 0 4px; - color: var(--accent-strong); - font-size: 11px; - font-weight: 900; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -.settings-modal h2 { - margin: 0; - font-family: var(--font-old); - font-size: 25px; -} - -.settings-modal header button { - height: 31px; - border-radius: 999px; - box-shadow: none; -} - -.settings-field { - border: 1px solid rgba(123, 158, 190, 0.2); - border-radius: 18px; - padding: 14px; - background: rgba(255, 255, 255, 0.54); -} - -.settings-field.developer-mode-field { - margin-top: 14px; - transition: - border-color 0.16s ease, - background 0.16s ease, - box-shadow 0.16s ease; -} - -.settings-field.developer-mode-field:hover { - border-color: rgba(79, 174, 202, 0.4); - background: rgba(238, 250, 255, 0.78); - box-shadow: 0 8px 22px rgba(82, 126, 188, 0.12); -} - -.settings-model-setup-field { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - margin-top: 14px; -} - -.settings-model-setup-copy { - display: flex; - min-width: 0; - align-items: center; - gap: 12px; -} - -.settings-model-setup-copy svg { - flex: 0 0 auto; - color: var(--accent-strong); -} - -.settings-model-setup-copy span { - display: grid; - gap: 3px; -} - -.settings-model-setup-copy strong { - color: var(--ink); - font-size: 13px; - font-weight: 900; -} - -.settings-model-setup-copy small { - color: var(--muted); - font-size: 12px; - font-weight: 650; - line-height: 1.35; -} - -.settings-update-field { - display: grid; - gap: 12px; - margin-top: 14px; -} - -.settings-update-head, -.settings-update-actions { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 14px; -} - -.settings-update-head label { - margin: 0 0 4px; -} - -.settings-update-head p { - margin: 0; -} - -.update-badge { - flex: 0 0 auto; - border: 1px solid rgba(105, 188, 224, 0.28); - border-radius: 999px; - padding: 5px 10px; - background: rgba(240, 250, 255, 0.72); - color: #2a7a9f; - font-size: 10px; - font-weight: 900; - text-transform: uppercase; -} - -.update-badge.available { - border-color: rgba(42, 148, 111, 0.26); - background: rgba(227, 248, 238, 0.78); - color: var(--success); -} - -.settings-update-status { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 7px; -} - -.settings-update-status strong { - flex: 1 0 100%; - color: var(--ink); - font-size: 13px; - font-weight: 900; -} - -.settings-update-status span { - border: 1px solid rgba(105, 188, 224, 0.18); - border-radius: 999px; - padding: 4px 8px; - background: rgba(255, 255, 255, 0.54); - color: var(--muted); - font-size: 10px; - font-weight: 800; -} - -.settings-update-notes { - display: -webkit-box; - max-height: 96px; - overflow: hidden; - border-left: 3px solid rgba(54, 122, 178, 0.26); - padding-left: 10px; - margin: 0 !important; - -webkit-box-orient: vertical; - -webkit-line-clamp: 5; -} - -.settings-update-actions { - align-items: center; -} - -.settings-update-actions > div { - display: flex; - flex: 0 0 auto; - flex-wrap: wrap; - justify-content: flex-end; - gap: 8px; -} - -.settings-update-actions button { - height: 34px; - border-radius: 999px; - box-shadow: none; -} - -.settings-update-toggle { - flex: 1 1 auto; - min-width: 240px; -} - -.settings-field label { - display: block; - margin-bottom: 4px; - color: var(--ink); - font-size: 13px; - font-weight: 900; -} - -.settings-field p { - margin: 0 0 12px; - color: var(--muted); - font-size: 12px; - line-height: 1.45; -} - -.settings-field select { - width: 100%; - height: 36px; - border-radius: 12px; - padding: 0 12px; - font-weight: 760; -} - -.settings-checkbox-row { - display: grid !important; - grid-template-columns: 18px minmax(0, 1fr); - align-items: start; - gap: 10px; - margin: 0 !important; - cursor: pointer; -} - -.settings-checkbox-row input { - width: 16px; - height: 16px; - margin-top: 3px; - accent-color: var(--accent-strong); - cursor: pointer; -} - -.settings-checkbox-row span { - display: grid; - gap: 2px; - min-width: 0; -} - -.settings-checkbox-row strong { - color: var(--ink); - font-size: 13px; - font-weight: 900; -} - -.settings-checkbox-row small { - color: var(--muted); - font-size: 12px; - font-weight: 680; - line-height: 1.4; -} - -.settings-engine-list { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px; - margin-top: 12px; -} - -.settings-engine-list button { - display: grid; - height: auto; - min-height: 70px; - justify-items: start; - gap: 5px; - border-radius: 16px; - padding: 12px; - text-align: left; - box-shadow: none; - transition: - transform 160ms ease, - border-color 160ms ease, - background 160ms ease, - box-shadow 160ms ease; -} - -.settings-engine-list button:hover:not(:disabled), -.settings-engine-list button.selected { - border-color: rgba(54, 122, 178, 0.34); - background-position: 10% 10%; - box-shadow: 0 10px 24px rgba(70, 124, 180, 0.12); - transform: translateY(-1px); -} - -.settings-engine-list strong { - color: var(--ink); - font-size: 13px; -} - -.settings-engine-list span { - color: var(--muted); - font-size: 11px; - line-height: 1.35; -} - -.settings-shortcuts { - display: grid; - gap: 12px; - margin-top: 14px; - border: 1px solid rgba(125, 211, 252, 0.22); - border-radius: 18px; - padding: 14px; - background: - radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.82), transparent 38%), - linear-gradient(145deg, rgba(239, 249, 255, 0.58), rgba(255, 255, 255, 0.42)); -} - -.settings-shortcuts h2 { - color: #20344c; - font-size: 15px; -} - -.settings-shortcuts p { - margin: 3px 0 0; - color: #6f8299; - font-size: 11px; -} - -.settings-shortcut-columns { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; - align-items: start; -} - -.settings-shortcut-column { - display: grid; - gap: 8px; - align-content: start; -} - -.settings-shortcut-column h3 { - margin: 0 0 1px; - color: var(--accent-strong); - font-size: 10px; - font-weight: 900; - letter-spacing: 0.14em; - text-transform: uppercase; -} - -.settings-shortcut-list { - display: grid; - gap: 7px; -} - -.settings-shortcut-row { - display: grid; - grid-template-columns: auto minmax(0, 1fr); - align-items: center; - gap: 10px; - min-width: 0; - border: 1px solid rgba(125, 158, 205, 0.16); - border-radius: 12px; - padding: 7px 10px; - background: rgba(255, 255, 255, 0.56); -} - -.settings-shortcut-row kbd { - display: inline-flex; - width: 135px; - align-items: center; - justify-content: center; - border: 1px solid rgba(105, 181, 216, 0.28); - border-radius: 8px; - padding: 3px 6px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(229, 248, 255, 0.72)), - rgba(255, 255, 255, 0.7); - color: #24779d; - font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; - font-size: 10px; - font-weight: 800; - white-space: nowrap; -} - -.settings-shortcut-row span { - overflow: hidden; - color: #24384f; - font-size: 11px; - font-weight: 780; - text-align: left; - text-overflow: ellipsis; - white-space: nowrap; -} - -.empty-state button { - height: 30px; - box-shadow: none; -} - -.empty-state { - min-height: 172px; - border: 1px dashed rgba(115, 148, 194, 0.28); - border-radius: 14px; - background: rgba(255, 255, 255, 0.34); -} - -.empty-row { - border: 1px dashed rgba(115, 148, 194, 0.22); - border-radius: 12px; - padding: 16px; - color: var(--muted); - font-size: 12px; - font-weight: 680; - text-align: center; -} - -.recent-captures { - margin: 0 -34px; - padding: 16px 34px; - background: rgba(245, 250, 255, 0.24); -} - -.recent-toggle { - display: grid; - grid-template-columns: 36px minmax(0, 1fr) 24px; - width: 100%; - height: auto; - align-items: center; - gap: 12px; - border-color: rgba(133, 158, 193, 0.16); - border-radius: 14px; - padding: 12px; - background: rgba(255, 255, 255, 0.44); - box-shadow: none; - text-align: left; -} - -.recent-toggle span:nth-child(2) { - display: grid; - gap: 2px; - min-width: 0; -} - -.recent-toggle strong { - color: var(--ink); - font-size: 13px; - font-weight: 840; -} - -.recent-toggle small { - overflow: hidden; - color: var(--muted); - font-size: 11px; - font-weight: 700; - text-overflow: ellipsis; - white-space: nowrap; -} - -.recent-toggle > svg { - width: 18px; - height: 18px; - color: var(--muted); - transition: transform 160ms ease; -} - -.recent-captures.open .recent-toggle > svg { - transform: rotate(90deg); -} - -.recent-content { - margin-top: 14px; -} - -.recent-card-grid { - grid-template-columns: repeat(1, minmax(0, 1fr)); -} - -.intelligence-panel { - position: relative; -} - -.panel-icon-toggle { - position: absolute; - top: calc(var(--titlebar-height) + 22px); - left: 50%; - z-index: 70; - display: grid; - place-items: center; - width: 38px; - height: 38px; - border-radius: 12px; - padding: 0; - opacity: 0; - pointer-events: none; - color: #5e87c3; - background: - radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.98), transparent 38%), - radial-gradient(circle at 70% 82%, rgba(168, 237, 255, 0.36), transparent 46%), - rgba(255, 255, 255, 0.72); - transform: translateX(-50%); - transition: - opacity 320ms ease 160ms, - transform 280ms cubic-bezier(0.16, 1, 0.3, 1), - background 240ms ease, - color 240ms ease, - box-shadow 240ms ease; -} - -.intelligence-panel.collapsed .panel-icon-toggle { - opacity: 1; - pointer-events: auto; - animation: panelBeacon 3.8s ease-in-out infinite; -} - -.panel-icon-toggle svg { - width: 20px; - height: 20px; -} - -.panel-icon-toggle:hover { - background: rgba(255, 255, 255, 0.94); - color: var(--accent-strong); - box-shadow: 0 12px 24px rgba(84, 130, 199, 0.16); - transform: translate(-50%, -1px); -} - -@keyframes panelBeacon { - 0%, - 100% { - box-shadow: - 0 14px 30px rgba(84, 130, 199, 0.13), - 0 0 0 0 rgba(172, 236, 255, 0.32); - } - - 50% { - box-shadow: - 0 18px 40px rgba(84, 160, 199, 0.22), - 0 0 0 8px rgba(172, 236, 255, 0); - } -} - -@keyframes panelStardust { - to { - background-position: 42px 84px; - } -} - -.panel-header { - padding-right: 0; -} - -.panel-header-actions { - display: flex; - align-items: center; - gap: 8px; -} - -.panel-close { - display: grid; - place-items: center; - width: 30px; - height: 30px; - border-radius: 9px; - padding: 0; - color: var(--muted); - box-shadow: none; -} - -.panel-close svg { - width: 17px; - height: 17px; -} - -.panel-tabs { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 4px; - border: 1px solid rgba(133, 158, 193, 0.18); - border-radius: 11px; - padding: 4px; - background: rgba(255, 255, 255, 0.46); -} - -.model-island { - display: grid; - position: absolute; - right: 14px; - bottom: 58px; - left: 14px; - z-index: 6; - gap: 10px; - border: 1px solid rgba(133, 158, 193, 0.18); - border-radius: 14px; - padding: 12px; - background: - radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.92), transparent 40%), - rgba(250, 253, 255, 0.94); - box-shadow: 0 18px 44px rgba(75, 114, 170, 0.18); -} - -.model-island.compact-model-island { - right: 14px; - bottom: 52px; - left: auto; - width: min(248px, calc(100% - 28px)); - gap: 0; - border-color: rgba(105, 188, 224, 0.24); - border-radius: 999px; - padding: 9px 10px 10px; - background: - radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 42%), - linear-gradient(145deg, rgba(240, 252, 255, 0.96), rgba(255, 255, 255, 0.78)); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.86), - 0 14px 34px rgba(72, 151, 190, 0.16); -} - -.model-island.compact-model-island label { - gap: 4px; - color: #2a7a9f; - font-size: 10px; - font-weight: 860; - letter-spacing: 0.04em; - text-transform: uppercase; -} - -.model-island.compact-model-island select { - height: 30px; - border-color: rgba(99, 174, 214, 0.22); - border-radius: 999px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 249, 255, 0.78)), - rgba(255, 255, 255, 0.84); - color: var(--ink); - font-size: 12px; - font-weight: 820; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.9), - 0 8px 18px rgba(74, 145, 194, 0.1); -} - -.panel-context-line { - display: flex; - align-items: center; - justify-content: space-between; - gap: 10px; - border: 1px solid rgba(133, 158, 193, 0.16); - border-radius: 12px; - padding: 9px 11px; - background: rgba(255, 255, 255, 0.36); -} - -.panel-context-line span, -.panel-context-line strong { - overflow: hidden; - font-size: 11px; - font-weight: 760; - text-overflow: ellipsis; - white-space: nowrap; -} - -.panel-context-line span { - color: var(--muted); -} - -.panel-context-line strong { - color: var(--ink); -} - -.model-heading { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 10px; -} - -.model-heading h2 { - color: var(--ink); - font-size: 13px; - font-weight: 840; -} - -.model-heading p, -.model-heading span, -.model-island label { - color: var(--muted); - font-size: 11px; - font-weight: 720; -} - -.model-heading span { - max-width: 156px; - overflow: hidden; - border: 1px solid rgba(105, 139, 190, 0.16); - border-radius: 999px; - padding: 4px 8px; - background: rgba(255, 255, 255, 0.62); - text-overflow: ellipsis; - white-space: nowrap; -} - -.model-island label { - display: grid; - gap: 6px; -} - -.model-island select { - height: 32px; - border-radius: 9px; - padding: 0 10px; - font-size: 12px; -} - -.frozen-tab { - border-color: rgba(125, 211, 252, 0.34); - background: - radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), - linear-gradient(135deg, #ecfeff 0%, #bae6fd 38%, #e0f2fe 66%, #ffffff 100%) !important; - color: #075985; - isolation: isolate; - transition: - transform 90ms ease, - border-color 110ms ease, - background 110ms ease, - box-shadow 110ms ease, - color 90ms ease; -} - -.frozen-tab:hover { - border-color: rgba(14, 165, 233, 0.58); - color: #082f49; - transform: translateY(-1px); -} - -.panel-tabs button { - height: 28px; - border: 0; - border-radius: 8px; - background: transparent; - box-shadow: none; - color: var(--muted); - text-transform: capitalize; -} - -.panel-tabs button.active { - background: rgba(255, 255, 255, 0.88); - color: var(--ink); - box-shadow: 0 6px 16px rgba(94, 132, 185, 0.08); -} - -.mode-section { - min-height: 0; -} - -.mode-section .empty-row, -.mode-section .results-list { - margin-top: 14px; -} - -.wide-action { - width: 100%; - border-color: rgba(73, 126, 204, 0.35); - background: linear-gradient(180deg, #7eaff2, #5289db); - color: #ffffff; -} - -.status-hint { - margin-top: 10px; - color: var(--muted); - font-size: 12px; - font-weight: 650; - line-height: 1.45; -} - -.status-hint.danger { - color: var(--danger); -} - -.citation-list { - display: flex; - flex-wrap: wrap; - gap: 6px; - margin-top: 10px; -} - -.citation-list button { - max-width: min(100%, 260px); - height: 26px; - overflow: hidden; - border: 1px solid rgba(145, 166, 195, 0.18); - border-radius: 999px; - padding: 4px 8px; - background: rgba(255, 255, 255, 0.58); - color: #566b86; - font-size: 11px; - font-weight: 700; - box-shadow: none; - text-overflow: ellipsis; - white-space: nowrap; -} - -.citation-list button:hover { - border-color: rgba(79, 174, 202, 0.34); - background: rgba(255, 255, 255, 0.9); - color: var(--accent-strong); -} - -.dialog-backdrop { - position: fixed; - inset: 0; - z-index: 30; - display: grid; - place-items: center; - background: rgba(219, 232, 249, 0.36); - backdrop-filter: blur(18px); -} - -.collection-dialog { - width: min(460px, calc(100vw - 40px)); - border: 1px solid rgba(118, 146, 187, 0.24); - border-radius: 18px; - padding: 18px; - background: - radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 36%), - rgba(250, 253, 255, 0.92); - box-shadow: 0 24px 70px rgba(75, 114, 170, 0.22); -} - -.collection-dialog header, -.collection-dialog footer { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; -} - -.collection-dialog header p { - color: var(--muted); - font-size: 11px; - font-weight: 780; -} - -.collection-dialog header h2 { - color: var(--ink); - font-size: 18px; - font-weight: 840; -} - -.collection-dialog header button { - display: grid; - place-items: center; - width: 32px; - height: 32px; - padding: 0; - box-shadow: none; -} - -.collection-dialog header svg { - width: 17px; - height: 17px; -} - -.dialog-fields { - display: grid; - gap: 12px; - margin: 18px 0; -} - -.dialog-fields label { - display: grid; - gap: 6px; - color: var(--muted); - font-size: 12px; - font-weight: 760; -} - -.dialog-fields input, -.dialog-fields textarea { - font-size: 13px; -} - -.dialog-fields input { - height: 38px; - padding: 0 12px; -} - -.dialog-fields textarea { - min-height: 92px; - padding: 10px 12px; - resize: vertical; -} - -.icon-picker { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - gap: 8px; -} - -.icon-picker button { - display: grid; - height: 58px; - min-width: 0; - place-items: center; - gap: 4px; - border-color: rgba(122, 154, 196, 0.18); - border-radius: 12px; - padding: 6px; - background: rgba(255, 255, 255, 0.54); - box-shadow: none; -} - -.icon-picker button.active, -.icon-picker button:hover { - border-color: rgba(79, 174, 202, 0.38); - background: - radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.96), transparent 42%), - linear-gradient(145deg, rgba(232, 251, 255, 0.9), rgba(255, 255, 255, 0.72)); - color: var(--accent-strong); -} - -.icon-picker svg { - width: 20px; - height: 20px; -} - -.icon-picker span { - max-width: 100%; - overflow: hidden; - font-size: 10px; - font-weight: 740; - text-overflow: ellipsis; - white-space: nowrap; -} - -.delete-copy { - margin: 20px 0; - color: #33455f; - font-size: 14px; - line-height: 1.5; -} - -.delete-copy strong { - color: var(--ink); - font-weight: 820; -} - -.primary-button, -.danger-primary { - border-color: rgba(76, 151, 190, 0.4); - background: - radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.95), transparent 36%), - linear-gradient( - 145deg, - rgba(229, 252, 255, 0.96), - rgba(118, 196, 229, 0.94) 48%, - rgba(54, 129, 188, 0.92) - ); - color: #ffffff; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.62), - 0 12px 26px rgba(52, 139, 184, 0.16); - text-shadow: 0 1px 8px rgba(26, 80, 121, 0.25); -} - -.danger-primary { - border-color: rgba(184, 91, 89, 0.25); - background: linear-gradient(180deg, #d87a78, #b85b59); -} - -button:disabled, -button:disabled:hover { - border-color: rgba(121, 144, 176, 0.18); - background: - radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.7), transparent 42%), - linear-gradient(145deg, rgba(233, 239, 246, 0.72), rgba(218, 228, 238, 0.62)); - color: rgba(77, 95, 120, 0.58); - box-shadow: none; - cursor: not-allowed; - opacity: 0.5; - text-shadow: none; -} - -.history-controls button:disabled, -.history-controls button:disabled:hover { - color: rgba(92, 111, 138, 0.48); -} - -@media (max-width: 1120px) { - .saved-shelves { - grid-template-columns: minmax(0, 1fr); - } - - .saved-shelves .iceberg-band { - border-top: 1px solid rgba(143, 165, 196, 0.18); - border-left: 0; - } - - .crystallizer-header { - align-items: stretch; - flex-direction: column; - gap: 12px; - } - - .crystallizer-brand { - min-width: 0; - } - - .crystallizer-search { - width: 100%; - } - - .crystallizer-body { - grid-template-columns: minmax(0, 1fr); - grid-template-rows: minmax(0, 1fr) 260px; - } - - .crystallizer-dock { - border-top: 1px solid rgba(125, 211, 252, 0.26); - border-left: 0; - } - - .canvas-layer-hud { - top: 54px; - right: 12px; - max-width: calc(100% - 24px); - overflow-x: auto; - } - - .canvas-layer-hud.layer-strip.compact button { - flex: 0 0 auto; - } - - .crystallizer-detail { - display: none; - } - - .knowledge-band .collection-list { - grid-template-columns: minmax(0, 1fr); - } - - .tab-chip { - flex-basis: 138px; - min-width: 84px; - max-width: min(190px, 33%); - } - - .recent-card-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} +@import './styles/foundation.css'; +@import './styles/dashboard-shell.css'; +@import './styles/flow-view.css'; +@import './styles/air-view.css'; +@import './styles/flow-map.css'; +@import './styles/dashboard-captures.css'; +@import './styles/intelligence-panel.css'; +@import './styles/browser-chrome.css'; +@import './styles/knowledge-shelves.css'; +@import './styles/start-page.css'; +@import './styles/crystallizer.css'; +@import './styles/setup-settings.css'; +@import './styles/shared-overrides.css'; diff --git a/src/renderer/src/assets/styles/air-view.css b/src/renderer/src/assets/styles/air-view.css new file mode 100644 index 0000000..7657b60 --- /dev/null +++ b/src/renderer/src/assets/styles/air-view.css @@ -0,0 +1,467 @@ +.air-view { + position: relative; + z-index: 1; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + height: calc(100vh - 95px); + overflow: hidden; + padding: 20px 24px 24px; + background: + radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.96), transparent 20%), + radial-gradient(circle at 82% 14%, rgba(162, 224, 255, 0.24), transparent 26%), + radial-gradient(circle at 48% 92%, rgba(116, 216, 198, 0.14), transparent 34%), + linear-gradient(180deg, rgba(250, 254, 255, 0.8), rgba(235, 247, 252, 0.58)); +} + +.air-view::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + opacity: 0.58; + background-image: + linear-gradient(rgba(66, 133, 172, 0.07) 1px, transparent 1px), + linear-gradient(90deg, rgba(66, 133, 172, 0.06) 1px, transparent 1px); + background-size: 34px 34px; + mask-image: linear-gradient(180deg, #000 0%, transparent 82%); +} + +.air-hero { + position: relative; + z-index: 2; + display: flex; + min-width: 0; + align-items: center; + justify-content: space-between; + gap: 18px; + margin-bottom: 18px; +} + +.air-identity { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 12px; +} + +.air-mark { + display: grid; + flex: 0 0 auto; + place-items: center; + width: 48px; + height: 48px; + border: 1px solid rgba(84, 143, 184, 0.22); + border-radius: 8px; + background: + radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), transparent 44%), + linear-gradient(145deg, rgba(235, 250, 255, 0.96), rgba(118, 202, 226, 0.62)); + color: #226f96; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 16px 32px rgba(64, 139, 172, 0.14); +} + +.air-mark svg { + width: 25px; + height: 25px; +} + +.air-identity h1 { + margin: 0; + color: #123955; + font-size: 30px; + font-weight: 880; + line-height: 1; +} + +.air-identity p { + margin: 5px 0 0; + color: #52728d; + font-size: 12px; + font-weight: 760; +} + +.air-output-note { + min-width: 0; + max-width: 48%; + overflow: hidden; + border: 1px solid rgba(84, 143, 184, 0.16); + border-radius: 8px; + padding: 8px 11px; + background: rgba(255, 255, 255, 0.64); + color: #4f718c; + font-size: 11px; + font-weight: 740; + text-overflow: ellipsis; + white-space: nowrap; +} + +.air-grid { + position: relative; + z-index: 1; + display: grid; + min-height: 0; + grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); + grid-template-rows: auto minmax(0, 1fr); + gap: 14px; +} + +.air-panel { + min-width: 0; + min-height: 0; + border: 1px solid rgba(87, 150, 184, 0.18); + border-radius: 8px; + background: + radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.92), transparent 42%), + rgba(255, 255, 255, 0.62); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + 0 18px 34px rgba(58, 112, 152, 0.09); +} + +.air-lens-panel, +.air-actions-panel { + padding: 14px; +} + +.air-lens-form { + display: grid; + gap: 8px; +} + +.air-lens-form label, +.air-section-heading h2, +.air-actions-panel h2 { + color: #143b55; + font-size: 13px; + font-weight: 860; +} + +.air-search-row { + display: grid; + grid-template-columns: 20px minmax(0, 1fr) auto; + align-items: center; + gap: 8px; + height: 44px; + border: 1px solid rgba(93, 154, 190, 0.2); + border-radius: 8px; + padding: 0 7px 0 12px; + background: + radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(219, 245, 255, 0.58)); +} + +.air-search-row svg { + color: #3d8fab; +} + +.air-search-row input, +.air-search-row select { + min-width: 0; + height: 32px; + border: 0; + padding: 0; + background: transparent; + color: #173f5a; + font-size: 13px; + font-weight: 720; + box-shadow: none; +} + +.air-search-row select { + overflow: hidden; + text-overflow: ellipsis; +} + +.air-search-row input:focus, +.air-search-row select:focus { + box-shadow: none; +} + +.air-search-row button, +.air-action-buttons button, +.air-history-row button { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 8px; +} + +.air-search-row button { + height: 30px; + padding: 0 14px; +} + +.air-lens-buttons { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 8px; + margin-top: 12px; +} + +.air-lens-buttons button { + display: grid; + min-width: 0; + height: 48px; + grid-template-columns: 18px minmax(0, 1fr); + gap: 6px; + align-items: center; + border-radius: 8px; + padding: 0 10px; + background: rgba(255, 255, 255, 0.58); + color: #426985; + font-size: 11px; + font-weight: 820; +} + +.air-lens-buttons button.active, +.air-lens-buttons button:hover { + border-color: rgba(42, 141, 172, 0.3); + background: + radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.96), transparent 42%), + rgba(229, 250, 255, 0.72); + color: #226f96; +} + +.air-lens-buttons svg, +.air-action-buttons svg, +.air-history-row button svg { + width: 16px; + height: 16px; +} + +.air-lens-buttons span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.air-lens-meta { + display: flex; + min-width: 0; + flex-wrap: wrap; + gap: 8px; + margin-top: 10px; + color: #5e7d94; + font-size: 11px; + font-weight: 760; +} + +.air-lens-meta span { + min-width: 0; + max-width: 100%; + overflow: hidden; + border: 1px solid rgba(69, 145, 174, 0.14); + border-radius: 999px; + padding: 4px 8px; + background: rgba(234, 251, 255, 0.65); + text-overflow: ellipsis; + white-space: nowrap; +} + +.air-actions-panel { + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: start; + gap: 10px; +} + +.air-actions-panel p, +.air-section-heading p { + margin: 4px 0 0; + color: #5c7c93; + font-size: 12px; + font-weight: 650; +} + +.air-action-buttons { + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +.air-action-buttons button { + min-height: 38px; + gap: 8px; + padding: 0 12px; + font-size: 12px; + font-weight: 820; +} + +.air-preview-panel { + grid-row: 2; + overflow: hidden; + padding: 14px; +} + +.air-history-panel { + grid-row: 2; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + overflow: hidden; + padding: 14px; +} + +.air-section-heading { + display: flex; + min-width: 0; + align-items: start; + justify-content: space-between; + gap: 12px; + margin-bottom: 12px; +} + +.air-section-heading > div { + min-width: 0; +} + +.air-section-heading > span, +.air-section-heading > svg { + flex: 0 0 auto; + color: #5e7d94; + font-size: 11px; + font-weight: 760; +} + +.air-preview-layout { + display: grid; + min-height: 0; + height: calc(100% - 52px); + grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr); + gap: 12px; +} + +.air-source-stack, +.air-history-list, +.air-markdown-preview { + min-height: 0; + overflow-x: hidden; + overflow-y: auto; +} + +.air-source-stack, +.air-history-list { + display: grid; + align-content: start; + gap: 8px; + padding-right: 4px; +} + +.air-source-row { + display: grid; + min-width: 0; + grid-template-columns: 34px minmax(0, 1fr); + gap: 9px; + border: 1px solid rgba(80, 151, 183, 0.16); + border-radius: 8px; + padding: 9px; + background: rgba(255, 255, 255, 0.62); +} + +.air-source-row > span { + display: grid; + place-items: center; + width: 32px; + height: 32px; + border: 1px solid rgba(43, 146, 112, 0.2); + border-radius: 999px; + background: rgba(225, 249, 242, 0.7); + color: #2b9270; + font-size: 13px; + font-weight: 880; +} + +.air-source-row div, +.air-history-row div:first-child { + min-width: 0; +} + +.air-source-row strong, +.air-history-row strong { + display: block; + overflow: hidden; + color: #143b55; + font-size: 13px; + font-weight: 860; + text-overflow: ellipsis; + white-space: nowrap; +} + +.air-source-row p { + display: -webkit-box; + margin: 4px 0; + overflow: hidden; + color: #416177; + font-size: 12px; + font-weight: 620; + line-height: 1.4; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; +} + +.air-source-row small, +.air-history-row small, +.air-history-row span { + display: block; + overflow: hidden; + color: #638199; + font-size: 10px; + font-weight: 780; + text-overflow: ellipsis; + white-space: nowrap; +} + +.air-markdown-preview { + margin: 0; + border: 1px solid rgba(80, 151, 183, 0.16); + border-radius: 8px; + padding: 14px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 251, 253, 0.72)), + rgba(255, 255, 255, 0.7); + color: #243b55; + font-family: 'SFMono-Regular', 'SF Mono', Consolas, monospace; + font-size: 11px; + line-height: 1.55; + white-space: pre-wrap; + user-select: text; +} + +.air-history-row { + display: grid; + min-width: 0; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + border: 1px solid rgba(80, 151, 183, 0.16); + border-radius: 8px; + padding: 10px; + background: rgba(255, 255, 255, 0.62); +} + +.air-history-row > div:last-child { + display: flex; + flex: 0 0 auto; + gap: 6px; +} + +.air-history-row button { + width: 30px; + height: 30px; + padding: 0; + background: rgba(255, 255, 255, 0.66); + color: #377188; +} + +.air-empty-state { + display: grid; + min-height: 160px; + place-content: center; + padding: 20px; + color: #5c7c93; + font-size: 13px; + font-weight: 680; + line-height: 1.45; + text-align: center; +} diff --git a/src/renderer/src/assets/styles/browser-chrome.css b/src/renderer/src/assets/styles/browser-chrome.css new file mode 100644 index 0000000..0b3b66e --- /dev/null +++ b/src/renderer/src/assets/styles/browser-chrome.css @@ -0,0 +1,475 @@ +.browser-chrome { + position: absolute; + top: var(--titlebar-height); + right: 0; + left: 0; + z-index: 12; + display: grid; + grid-template-rows: 42px 32px 42px; + height: var(--nav-height); + border-bottom: 1px solid rgba(143, 165, 196, 0.22); + background: rgba(255, 255, 255, 0.58); + box-shadow: 0 14px 32px rgba(71, 104, 146, 0.08); + backdrop-filter: blur(24px) saturate(1.35); +} + +.browser-chrome.dashboard-open { + grid-template-rows: 40px 28px 0; + box-sizing: border-box; + height: 72px; + padding-bottom: 4px; +} + +.browser-chrome .address-bar { + position: relative; + top: auto; + right: auto; + left: auto; + height: 42px; + border-bottom: 0; + padding: 8px 14px 4px; + background: transparent; + backdrop-filter: none; +} + +.browser-chrome.dashboard-open .address-bar { + height: 40px; + padding: 7px 14px 3px; +} + +.browser-chrome .history-controls button, +.browser-chrome .address-bar button { + height: 30px; + border-radius: 8px; +} + +.browser-chrome .address-bar input { + height: 30px; + border-radius: 9px; +} + +.browser-chrome .active-app span { + font-size: 12px; +} + +.browser-chrome .active-app small { + font-size: 10px; +} + +.tab-strip { + position: relative; + display: flex; + align-items: center; + gap: 7px; + min-width: 0; + --tab-max-width: min(240px, 33%); + padding: 4px 14px 7px; + overflow-x: auto; + overflow-y: hidden; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(237, 246, 255, 0.2)), + rgba(255, 255, 255, 0.1); + scrollbar-color: rgba(82, 178, 219, 0.42) transparent; + scrollbar-width: thin; + scroll-padding: 14px; +} + +.browser-chrome.dashboard-open .tab-strip { + padding: 2px 14px 4px; +} + +.tab-strip::-webkit-scrollbar { + height: 6px; +} + +.tab-strip::-webkit-scrollbar-track { + background: transparent; +} + +.tab-strip::-webkit-scrollbar-thumb { + border-radius: 999px; + background: + linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.24)), + rgba(82, 178, 219, 0.42); +} + +.tab-chip, +.new-tab-button { + display: inline-grid; + align-items: center; + height: 24px; + min-width: 0; + border-radius: 8px; + box-shadow: none; +} + +.tab-chip { + grid-template-columns: 16px minmax(42px, 1fr); + flex: 0 0 clamp(112px, 18vw, 188px); + gap: 5px; + width: auto; + min-width: 92px; + max-width: var(--tab-max-width); + border-color: color-mix(in srgb, var(--tab-tint, #6d97c8) 28%, rgba(120, 150, 190, 0.28)); + padding: 0 5px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.46)), + color-mix(in srgb, var(--tab-tint, #6d97c8) 18%, transparent); + color: color-mix(in srgb, var(--tab-tint, #557ca8) 34%, #2f4159); + text-align: left; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 7px 18px rgba(52, 86, 132, 0.1); + transform-origin: center bottom; + transition: + flex-basis 520ms cubic-bezier(0.2, 1.25, 0.32, 1), + max-width 520ms cubic-bezier(0.2, 1.25, 0.32, 1), + min-width 520ms cubic-bezier(0.2, 1.25, 0.32, 1), + transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), + border-color 220ms ease, + background 260ms ease, + box-shadow 260ms ease, + color 220ms ease; + will-change: flex-basis; +} + +.tab-strip.many-tabs .tab-chip { + flex-basis: 118px; + min-width: 88px; +} + +.tab-strip.overflow-tabs .tab-chip { + flex-basis: 96px; + min-width: 76px; +} + +.tab-strip.overflow-tabs .tab-title { + font-size: 10px; +} + +.tab-chip.closable { + grid-template-columns: 16px minmax(42px, 1fr) 16px; +} + +.tab-chip.active, +.tab-chip:hover { + border-color: color-mix(in srgb, var(--tab-tint, #5a8fd0) 45%, rgba(86, 139, 218, 0.3)); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68)), + color-mix(in srgb, var(--tab-tint, #6d97c8) 26%, transparent); + color: var(--ink); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 10px 24px color-mix(in srgb, var(--tab-tint, #6d97c8) 22%, rgba(84, 130, 199, 0.12)); + transform: translateY(-1px) scale(1.012); +} + +.tab-chip.active { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74)), + color-mix(in srgb, var(--tab-tint, #6d97c8) 34%, transparent); +} + +.tab-status, +.tab-close, +.new-tab-button, +.tab-count { + display: grid; + place-items: center; +} + +.tab-status svg, +.tab-close svg, +.new-tab-button svg { + width: 13px; + height: 13px; +} + +.tab-status img { + width: 14px; + height: 14px; + border-radius: 4px; +} + +.tab-title { + overflow: hidden; + font-size: 11px; + font-weight: 720; + text-overflow: ellipsis; + white-space: nowrap; + transition: + opacity 180ms ease, + transform 240ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.tab-chip:hover .tab-title { + transform: translateX(1px); +} + +.tab-close { + width: 16px; + height: 16px; + border-radius: 5px; + color: #8a98aa; +} + +.tab-close:hover { + background: rgba(129, 153, 185, 0.14); + color: var(--danger); +} + +.new-tab-button { + flex: 0 0 auto; + width: 24px; + padding: 0; + color: #5d7fae; + background: rgba(255, 255, 255, 0.5); + transition: + transform 150ms ease, + background 150ms ease, + color 150ms ease, + box-shadow 150ms ease; +} + +.tab-count { + flex: 0 0 auto; + min-width: 24px; + height: 24px; + border: 1px solid rgba(125, 211, 252, 0.28); + border-radius: 999px; + padding: 0 7px; + background: + radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.9), transparent 44%), + rgba(229, 248, 255, 0.64); + color: #2d7197; + font-size: 10px; + font-weight: 900; +} + +.tab-context-menu { + position: fixed; + z-index: 140; + display: grid; + gap: 3px; + width: 172px; + border: 1px solid rgba(159, 215, 245, 0.52); + border-radius: 8px; + padding: 7px; + background: + radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.96), transparent 38%), + linear-gradient(145deg, rgba(248, 253, 255, 0.92), rgba(215, 241, 255, 0.72)), + rgba(239, 249, 255, 0.82); + color: #28465f; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.96), + inset 0 -12px 28px rgba(148, 203, 233, 0.14), + 0 16px 34px rgba(53, 104, 148, 0.18); + backdrop-filter: blur(24px) saturate(1.5); +} + +.tab-context-menu::before { + position: absolute; + inset: 1px; + z-index: -1; + border-radius: 7px; + background: + linear-gradient(120deg, rgba(255, 255, 255, 0.7), transparent 38%), + linear-gradient(300deg, rgba(118, 204, 244, 0.18), transparent 42%); + content: ''; +} + +.tab-context-menu-title { + overflow: hidden; + border-bottom: 1px solid rgba(110, 169, 205, 0.16); + padding: 1px 7px 6px; + color: rgba(48, 78, 105, 0.68); + font-size: 10px; + font-weight: 800; + letter-spacing: 0.03em; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; +} + +.tab-context-menu button { + display: flex; + align-items: center; + justify-content: flex-start; + height: 28px; + border: 1px solid transparent; + border-radius: 6px; + padding: 0 8px; + background: transparent; + color: #28465f; + font-size: 11px; + font-weight: 800; + text-align: left; + box-shadow: none; +} + +.tab-context-menu button:hover:not(:disabled), +.tab-context-menu button:focus-visible:not(:disabled) { + border-color: rgba(130, 198, 233, 0.34); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(220, 243, 255, 0.52)), + rgba(166, 220, 247, 0.2); + color: #1d5f88; + outline: none; +} + +.tab-context-menu button:disabled { + color: rgba(77, 101, 124, 0.36); + cursor: default; +} + +.quick-action-row { + position: relative; + z-index: 13; + display: flex; + align-items: center; + gap: 8px; + min-height: 38px; + min-width: 0; + border-top: 1px solid rgba(130, 158, 196, 0.12); + padding: 4px 14px 8px; + overflow-x: auto; + overflow-y: hidden; + background: + linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(255, 255, 255, 0.78)), + rgba(255, 255, 255, 0.86); + box-shadow: 0 10px 24px rgba(71, 104, 146, 0.08); + scrollbar-width: none; +} + +.quick-action-row::-webkit-scrollbar { + display: none; +} + +.browser-capture-dock { + display: flex; + align-items: center; + gap: 7px; + min-width: 0; + margin-left: auto; + border-left: 1px solid rgba(133, 158, 193, 0.18); + padding-left: 10px; +} + +.browser-capture-dock select { + width: 132px; + height: 25px; + border-radius: 999px; + padding: 0 9px; + font-size: 11px; + font-weight: 720; +} + +.browser-capture-dock button { + height: 25px; + border-radius: 999px; + padding: 0 9px; + font-size: 11px; + box-shadow: none; +} + +.browser-capture-dock .capture-page-button { + border-color: rgba(73, 126, 204, 0.28); + background: rgba(232, 243, 255, 0.76); + color: var(--accent-strong); + transition: + transform 160ms ease, + border-color 160ms ease, + background 180ms ease, + box-shadow 180ms ease, + color 160ms ease; +} + +.browser-capture-dock .capture-page-button:hover:not(:disabled) { + border-color: rgba(54, 122, 178, 0.42); + background: + radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(219, 240, 255, 0.9)); + color: #1d6f97; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 8px 18px rgba(70, 124, 180, 0.16); + transform: translateY(-1px); +} + +.browser-capture-dock .capture-page-button:active:not(:disabled) { + transform: translateY(0); +} + +.browser-capture-dock .browser-save-page-button { + min-width: 58px; + height: 25px; + border-radius: 999px; + padding: 0 11px; + font-size: 11px; +} + +.browser-capture-dock span { + max-width: 92px; + overflow: hidden; + color: var(--muted); + font-size: 10px; + font-weight: 760; + text-overflow: ellipsis; + white-space: nowrap; +} + +.quick-action-chip { + height: 25px; + border-radius: 999px; + padding: 0 11px; + background: rgba(255, 255, 255, 0.58); + color: #5b6f89; + font-size: 11px; + font-weight: 760; + box-shadow: none; + white-space: nowrap; + transition: + opacity 180ms ease, + transform 180ms ease, + background 180ms ease, + color 180ms ease, + box-shadow 180ms ease; +} + +.quick-action-chip:first-child { + border-color: rgba(73, 126, 204, 0.25); + background: + radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.9), transparent 48%), + rgba(232, 243, 255, 0.72); + color: var(--accent-strong); +} + +.quick-action-chip:hover { + background: rgba(255, 255, 255, 0.92); + color: var(--ink); + box-shadow: 0 10px 22px rgba(84, 130, 199, 0.12); + transform: translateY(-1px); +} + +.button:hover, +.new-tab-button:hover { + background: rgba(255, 255, 255, 0.9); + color: var(--accent-strong); + box-shadow: 0 8px 18px rgba(84, 130, 199, 0.14); + transform: translateY(-1px); +} + +.spinner { + animation: spin 900ms linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.webview-underlay { + inset: var(--top-bar-height) 0 0; + background: rgba(246, 249, 253, 0.42); +} diff --git a/src/renderer/src/assets/styles/crystallizer.css b/src/renderer/src/assets/styles/crystallizer.css new file mode 100644 index 0000000..d5725bf --- /dev/null +++ b/src/renderer/src/assets/styles/crystallizer.css @@ -0,0 +1,1942 @@ +.crystallizer { + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + height: calc(100vh - 102px); + overflow: hidden; + color: #102033; + background: + linear-gradient( + 135deg, + rgba(255, 255, 255, 0.78), + rgba(240, 250, 255, 0.68) 48%, + rgba(255, 252, 246, 0.72) + ), + linear-gradient( + 90deg, + rgba(14, 165, 233, 0.08), + transparent 34%, + rgba(20, 184, 166, 0.07) 66%, + rgba(184, 110, 45, 0.06) + ); +} + +.crystallizer::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + opacity: 0.46; + background-image: + linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px), + linear-gradient(90deg, rgba(14, 165, 233, 0.06) 1px, transparent 1px); + background-size: 58px 58px; + mask-image: linear-gradient(to bottom, black, transparent 88%); +} + +.crystallizer-header { + position: relative; + z-index: 2; + display: flex; + min-height: 78px; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: 14px 24px 14px 28px; + border-bottom: 1px solid rgba(125, 211, 252, 0.32); + background: rgba(255, 255, 255, 0.58); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); + backdrop-filter: blur(24px) saturate(1.12); +} + +.atlas-heading { + display: inline-flex; + align-items: center; + gap: 8px; + color: #64748b; + font-size: 10px; + font-weight: 900; + letter-spacing: 0.18em; + text-transform: uppercase; + vertical-align: middle; +} + +/* iCE Migration Part */ + +.brand-cluster { + display: flex; + align-items: center; + min-width: 342px; + gap: 12px; +} + +.brand-crystal { + flex: 0 0 auto; + color: #0ea5e9; + filter: drop-shadow(0 0 13px rgba(14, 165, 233, 0.38)); +} + +.brand-cluster h1 { + margin: 0; + color: #0f8cc2; + font-family: var(--font-ice); + font-size: 34px; + font-style: italic; + font-weight: 900; + line-height: 1; + letter-spacing: -0.07em; +} + +.brand-divider { + width: 1px; + height: 30px; + margin-left: 3px; + background: linear-gradient(to bottom, transparent, rgba(14, 165, 233, 0.45), transparent); +} + +.brand-copy { + display: flex; + flex-direction: column; + gap: 3px; + min-width: 0; +} + +.brand-subtitle { + color: #0f766e; + font-size: 11px; + font-weight: 700; + line-height: 1.1; + letter-spacing: 0.04em; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.001ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.001ms !important; + } +} + +@keyframes spin-slow { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +.animate-spin-slow { + animation: spin-slow 12s linear infinite; +} + +.animate-spin-fast { + animation: spin-slow 2.5s linear infinite; +} + +.crystallizer-mark { + display: grid; + place-items: center; + width: 42px; + min-width: 42px; + height: 42px; + border: 1px solid rgba(14, 165, 233, 0.3); + border-radius: 8px; + color: #0f8cc2; + background: rgba(255, 255, 255, 0.72); + box-shadow: 0 16px 36px rgba(8, 47, 73, 0.1); +} + +.crystallizer-mark svg { + width: 25px; + height: 25px; +} + +.crystallizer-brand-subtitle { + color: #0f8cc2; + font-size: 9px; + font-weight: 900; + line-height: 1; + letter-spacing: 0.31em; + text-transform: uppercase; +} + +.crystallizer-brand h1 { + margin: 0; + color: #102033; + font-family: var(--font-old); + font-size: 26px; + font-weight: 800; + line-height: 1; +} + +.crystallizer-search { + display: flex; + width: min(100%, 530px); + align-items: center; + justify-content: flex-end; + gap: 10px; +} + +.crystallizer-search-shell { + display: flex; + align-items: center; + flex: 1 1 280px; + min-width: 240px; + height: 44px; + padding: 0 14px; + color: #94a3b8; + background: rgba(255, 255, 255, 0.74); + border: 1px solid rgba(148, 163, 184, 0.24); + border-radius: 999px; + box-shadow: + 0 12px 42px rgba(8, 47, 73, 0.08), + 0 1px 0 rgba(255, 255, 255, 0.8) inset; + transition: + border-color 160ms ease, + box-shadow 160ms ease, + background 160ms ease; +} + +.crystallizer-search-shell:focus-within { + color: #0284c7; + border-color: rgba(14, 165, 233, 0.52); + background: rgba(255, 255, 255, 0.94); + box-shadow: + 0 20px 62px rgba(14, 165, 233, 0.14), + 0 0 0 4px rgba(14, 165, 233, 0.09); +} + +.crystallizer-search-shell input { + width: 100%; + min-width: 0; + padding: 0 0 0 11px; + color: #102033; + font-size: 14px; + font-weight: 650; + letter-spacing: 0; + background: transparent; + border: 0; + outline: 0; + box-shadow: none; +} + +.crystallizer-search-shell input::placeholder { + color: #94a3b8; + font-weight: 600; +} + +.crystallizer-search button { + display: inline-flex; + width: 148px; + height: 42px; + align-items: center; + justify-content: center; + gap: 8px; + border-radius: 8px; + white-space: nowrap; + + color: #ffffff; + background: linear-gradient(135deg, #0f172a, #075985 58%, #0f766e); + box-shadow: + 0 16px 34px rgba(8, 47, 73, 0.24), + 0 1px 0 rgba(255, 255, 255, 0.28) inset; +} + +.crystallizer-search button span { + font-family: var(--font-display); + font-size: 11px; + font-weight: 900; + text-transform: uppercase; + margin-top: 2px; +} + +.crystallizer-search button:hover { + background: linear-gradient(135deg, #0f172a, #075985 42%, #0f766e); + box-shadow: + 0 20px 42px rgba(8, 47, 73, 0.28), + 0 1px 0 rgba(255, 255, 255, 0.38) inset; +} + +.crystallizer-search .crystallizer-save-button { + width: 92px; + border-color: rgba(15, 140, 194, 0.28); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(239, 249, 255, 0.5)), + rgba(255, 255, 255, 0.68); + color: #0f8cc2; + box-shadow: + 0 12px 30px rgba(8, 47, 73, 0.08), + 0 1px 0 rgba(255, 255, 255, 0.72) inset; + text-shadow: none; +} + +.crystallizer-search .crystallizer-save-button:hover { + border-color: rgba(15, 140, 194, 0.46); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(229, 248, 255, 0.68)), + rgba(255, 255, 255, 0.82); + box-shadow: + 0 16px 34px rgba(8, 47, 73, 0.12), + 0 1px 0 rgba(255, 255, 255, 0.82) inset; +} + +.atlas-heading span, +.dock-head span, +.saved-atlas-title > span { + display: inline-flex; + align-items: center; + gap: 8px; + color: #64748b; + font-size: 10px; + font-weight: 900; + line-height: 1; + letter-spacing: 0.18em; + text-transform: uppercase; +} + +.atlas-heading h2, +.dock-head h2 { + margin: 7px 0 0; + overflow: hidden; + color: #0f172a; + font-size: clamp(20px, 2.3vw, 23px); + font-weight: 850; + line-height: 1.1; + letter-spacing: -0.025em; + text-overflow: ellipsis; + white-space: nowrap; + margin: 0; + font-family: var(--font-ice); +} + +.crystallizer-search button svg { + width: 18px; + height: 18px; +} + +.crystallizer-body { + position: relative; + z-index: 1; + display: grid; + flex: 1; + min-height: 0; + grid-template-columns: minmax(0, 1fr) 318px; +} + +.crystallizer-canvas-shell { + position: relative; + min-width: 0; + min-height: 0; + overflow: hidden; + user-select: none; + -webkit-user-select: none; + -webkit-user-drag: none; +} + +.crystallizer-tools { + position: absolute; + top: 14px; + left: 16px; + z-index: 4; + display: flex; + align-items: center; + gap: 7px; + border: 1px solid rgba(125, 211, 252, 0.28); + border-radius: 8px; + padding: 5px; + background: rgba(255, 255, 255, 0.76); + box-shadow: 0 16px 40px rgba(8, 47, 73, 0.1); + backdrop-filter: blur(18px); +} + +.crystallizer-tools button { + width: auto; + height: 28px; + border-radius: 6px; + padding: 0 10px; + box-shadow: none; +} + +.crystallizer-tools span { + width: 48px; + color: #475569; + font-size: 11px; + font-weight: 900; + text-align: center; +} + +.crystallizer-canvas { + display: block; + width: 100%; + height: 100%; + cursor: grab; + touch-action: none; + user-select: none; + -webkit-user-select: none; + -webkit-user-drag: none; +} + +.crystallizer-canvas.dragging { + cursor: grabbing; +} + +.crystallizer-canvas, +.crystallizer-canvas * { + user-select: none; + -webkit-user-select: none; +} + +.iceberg-shape { + fill: url(#iceberg-body); + stroke: rgba(125, 211, 252, 0.46); + stroke-width: 5px; + filter: drop-shadow(0 46px 70px rgba(8, 47, 73, 0.22)) + drop-shadow(0 0 34px rgba(125, 211, 252, 0.28)); +} + +.crystallizer-body.results-ready .iceberg-shape { + animation: crystallizerIcebergReveal 720ms cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.iceberg-layer-zone { + mix-blend-mode: multiply; +} + +.crystallizer-body.results-ready .iceberg-layer-zone { + transform-origin: center; + animation: crystallizerZoneReveal 680ms ease both; + animation-delay: 120ms; +} + +.iceberg-shade { + fill: url(#iceberg-shadow); + opacity: 0.56; + pointer-events: none; +} + +.crystallizer-body.results-ready .iceberg-shade, +.crystallizer-body.results-ready .iceberg-facet, +.crystallizer-body.results-ready .iceberg-ridge, +.crystallizer-body.results-ready .waterline { + animation: crystallizerFacetReveal 760ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: 180ms; +} + +.iceberg-facet { + fill: rgba(255, 255, 255, 0.2); + stroke: rgba(255, 255, 255, 0.5); + stroke-width: 2px; + pointer-events: none; +} + +.iceberg-facet.soft { + fill: rgba(255, 255, 255, 0.12); + opacity: 0.62; +} + +.iceberg-facet.low { + fill: rgba(52, 78, 108, 0.12); + stroke: rgba(255, 255, 255, 0.24); +} + +.iceberg-ridge { + fill: none; + stroke: rgba(255, 255, 255, 0.58); + stroke-linecap: round; + stroke-width: 3px; + pointer-events: none; +} + +.iceberg-ridge.faint { + stroke: rgba(255, 255, 255, 0.32); + stroke-width: 2px; +} + +.waterline { + stroke: rgba(255, 255, 255, 0.88); + stroke-width: 15px; +} + +.waterline-label { + fill: rgba(71, 85, 105, 0.42); + font-size: 17px; + font-weight: 920; + letter-spacing: 0.24em; + text-anchor: middle; + text-transform: uppercase; + pointer-events: none; +} + +.crystallizer-layer line { + stroke: color-mix(in srgb, var(--layer-accent) 20%, rgba(15, 140, 194, 0.1)); + stroke-dasharray: 8 18; + stroke-width: 1.8px; +} + +.crystallizer-body.results-ready .crystallizer-layer line { + animation: crystallizerLineReveal 700ms ease both; + animation-delay: 260ms; +} + +.crystallizer-layer-label rect { + fill: rgba(255, 255, 255, 0.28); + stroke: color-mix(in srgb, var(--layer-accent) 24%, rgba(255, 255, 255, 0.34)); + stroke-width: 1.1px; + filter: drop-shadow(0 9px 20px rgba(8, 47, 73, 0.05)); +} + +.layer-label-number-mark { + fill: color-mix(in srgb, var(--layer-accent) 84%, #ffffff); + stroke: rgba(255, 255, 255, 0.68); + stroke-width: 1.2px; +} + +.crystallizer-body.results-ready .crystallizer-layer-label, +.crystallizer-body.results-ready .layer-depth-label { + animation: crystallizerLabelReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: 340ms; +} + +.crystallizer-layer-label text, +.layer-depth-label { + pointer-events: none; + text-transform: uppercase; +} + +.layer-label-number { + fill: #ffffff; + font-size: 18px; + font-weight: 920; + text-anchor: middle; +} + +.layer-label-name { + fill: color-mix(in srgb, var(--layer-accent) 72%, #102033); + font-size: 18px; + font-weight: 900; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.layer-label-caption, +.layer-depth-label { + fill: rgba(71, 85, 105, 0.5); + font-size: 11px; + font-weight: 860; + letter-spacing: 0.16em; +} + +.layer-depth-label { + fill: rgba(71, 85, 105, 0.46); + font-size: 14px; + text-anchor: end; +} + +.depth-thread { + fill: none; + opacity: 0.62; + stroke: rgba(71, 85, 105, 0.16); + stroke-linecap: round; + stroke-width: 2.4px; + transition: + opacity 150ms ease, + stroke 150ms ease, + stroke-width 150ms ease, + filter 150ms ease; +} + +.depth-thread.is-highlighted { + opacity: 0.96; + stroke: rgba(98, 216, 235, 0.9); + stroke-width: 4px; + filter: drop-shadow(0 0 9px rgba(98, 216, 235, 0.42)); +} + +.crystallizer-body.results-ready .depth-thread { + animation: crystallizerThreadReveal 680ms ease both; + animation-delay: calc(420ms + min(var(--reveal-index), 12) * 28ms); +} + +.ice-node-hit { + cursor: pointer; + outline: none; +} + +.ice-node-scale { + transform-box: fill-box; + transform-origin: center; + transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.ice-node-hit.hovered .ice-node-scale, +.ice-node-hit:focus-visible .ice-node-scale { + transform: scale(1.025); +} + +.ice-node-hit.selected .ice-node-scale { + transform: scale(1.035); +} + +.ice-node-hit.selected.hovered .ice-node-scale { + transform: scale(1.045); +} + +.crystallizer-body.results-ready .ice-node-hit { + opacity: 0; + animation: crystallizerNodeReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: calc(520ms + min(var(--reveal-index), 16) * 34ms); +} + +.ice-node { + display: grid; + width: 100%; + height: 100%; + grid-template-columns: 28px minmax(0, 1fr); + grid-template-rows: auto auto; + align-content: center; + column-gap: 9px; + row-gap: 2px; + border: 1px solid color-mix(in srgb, var(--layer-accent) 28%, transparent); + border-left: 4px solid var(--layer-accent); + border-radius: 11px; + padding: 9px 10px 9px 8px; + background: + radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.96), transparent 32%), + linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.72)), + color-mix(in srgb, var(--layer-accent) 5%, white); + color: #102033; + text-align: left; + box-shadow: 0 12px 28px rgba(8, 47, 73, 0.12); + transition: + background 180ms ease, + border-color 180ms ease, + filter 160ms ease, + opacity 160ms ease, + box-shadow 180ms ease; + user-select: none; + -webkit-user-select: none; +} + +.ice-node-hit.selected .ice-node, +.ice-node-hit.hovered .ice-node, +.ice-node-hit:focus-visible .ice-node, +.ice-node:hover, +.ice-node:focus-visible { + border-color: color-mix(in srgb, var(--layer-accent) 62%, white); + border-left-color: var(--layer-accent); + background: + radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 1), transparent 34%), + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 255, 0.82)), + color-mix(in srgb, var(--layer-accent) 9%, white); + box-shadow: + 0 18px 36px rgba(8, 47, 73, 0.16), + 0 0 0 3px color-mix(in srgb, var(--layer-accent) 14%, transparent); +} + +.ice-node span { + display: grid; + place-items: center; + width: 24px; + height: 24px; + grid-row: 1 / span 2; + border-radius: 999px; + background: color-mix(in srgb, var(--layer-accent) 88%, #ffffff); + color: #ffffff; + font-size: 11px; + font-weight: 900; + box-shadow: + 0 7px 16px color-mix(in srgb, var(--layer-accent) 18%, transparent), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.ice-node strong { + display: -webkit-box; + min-width: 0; + overflow: hidden; + color: #102033; + font-size: 13px; + font-weight: 900; + line-height: 1.18; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + font-family: var(--font-display); +} + +.ice-node small { + display: -webkit-box; + overflow: hidden; + color: rgba(82, 97, 115, 0.74); + font-size: 9.5px; + font-weight: 680; + line-height: 1.25; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + line-clamp: 1; +} + +/* HTML raised card — floats over the SVG (see Crystallizer render). It mirrors the + .ice-node look but is wider, grows to content and shows the full description. + Positioned via inline left/top/width from the hovered node's live DOM rect. + Always mounted; .is-visible drives a smooth fade + lift in *and* out (no pop). */ +.ice-raised-card { + position: absolute; + z-index: 5; + display: grid; + grid-template-columns: 28px minmax(0, 1fr); + grid-template-rows: auto auto; + align-content: start; + column-gap: 9px; + row-gap: 3px; + border: 1px solid color-mix(in srgb, var(--layer-accent) 62%, white); + border-left: 4px solid var(--layer-accent); + border-radius: 12px; + padding: 11px 13px 13px 10px; + background: + radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 1), transparent 34%), + linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.86)), + color-mix(in srgb, var(--layer-accent) 10%, white); + color: #102033; + text-align: left; + box-shadow: + 0 24px 50px rgba(8, 47, 73, 0.26), + 0 0 0 3px color-mix(in srgb, var(--layer-accent) 18%, transparent); + pointer-events: none; + opacity: 0; + transform: scale(0.955) translateY(3px); + transform-origin: center top; + transition: + opacity 190ms ease, + transform 220ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.ice-raised-card.is-visible { + opacity: 1; + transform: scale(1) translateY(0); +} + +.ice-raised-badge { + display: grid; + place-items: center; + width: 30px; + height: 24px; + grid-row: 1 / span 2; + align-self: start; + border-radius: 999px; + background: color-mix(in srgb, var(--layer-accent) 88%, #ffffff); + color: #ffffff; + font-size: 11px; + font-weight: 900; + box-shadow: + 0 7px 16px color-mix(in srgb, var(--layer-accent) 18%, transparent), + inset 0 1px 0 rgba(255, 255, 255, 0.5); +} + +.ice-raised-card strong { + align-self: center; + min-width: 0; + color: #102033; + font-size: 12px; + font-weight: 900; + line-height: 1.18; + font-family: var(--font-display); +} + +.ice-raised-card small { + grid-column: 2; + color: rgba(60, 76, 96, 0.94); + font-size: 10.5px; + font-weight: 660; + line-height: 1.34; +} + +.text-shimmer { + --text-shimmer-base: rgba(51, 65, 85, 0.64); + --text-shimmer-highlight: rgba(255, 255, 255, 0.98); + --text-shimmer-duration: 2.4s; + --text-shimmer-spread: 48px; + display: inline-block; + background: linear-gradient( + 100deg, + var(--text-shimmer-base) 0%, + var(--text-shimmer-base) calc(44% - var(--text-shimmer-spread)), + var(--text-shimmer-highlight) 50%, + var(--text-shimmer-base) calc(56% + var(--text-shimmer-spread)), + var(--text-shimmer-base) 100% + ); + background-size: 300% 100%; + -webkit-background-clip: text; + background-clip: text; + color: transparent; + -webkit-text-fill-color: transparent; + animation: textShimmer var(--text-shimmer-duration) linear infinite; +} + +.crystallizer-empty { + position: absolute; + inset: 0; + z-index: 8; + display: grid; + place-content: center; + justify-items: center; + gap: 14px; + pointer-events: none; + color: #0f8cc2; + text-align: center; +} + +.crystallizer-empty::before { + position: absolute; + inset: 0; + content: ''; + background: + radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.34), transparent 34%), + linear-gradient(180deg, rgba(239, 249, 255, 0.08), rgba(232, 244, 255, 0.18)); + backdrop-filter: blur(10px) saturate(1.12); + -webkit-backdrop-filter: blur(10px) saturate(1.12); + mask-image: radial-gradient( + circle at 50% 50%, + black 0 38%, + rgba(0, 0, 0, 0.7) 58%, + transparent 86% + ); +} + +.crystallizer-state-card { + position: relative; + z-index: 1; + display: grid; + place-items: center; + min-width: min(360px, 72vw); + min-height: 154px; + overflow: hidden; + border: 1px solid rgba(186, 230, 253, 0.42); + border-radius: 18px; + padding: 28px 42px; + background: + radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(238, 248, 255, 0.46)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.86), + 0 28px 70px rgba(8, 47, 73, 0.16), + 0 0 0 1px rgba(255, 255, 255, 0.34); + backdrop-filter: blur(24px) saturate(1.2); +} + +.crystallizer-state-card::before { + position: absolute; + z-index: 0; + inset: -45%; + content: ''; + background: + conic-gradient( + from 120deg, + transparent, + rgba(125, 211, 252, 0.18), + transparent 40%, + rgba(255, 255, 255, 0.34), + transparent 72% + ), + radial-gradient(circle at 50% 50%, rgba(210, 247, 255, 0.4), transparent 42%); + filter: blur(18px); + opacity: 0.72; + pointer-events: none; +} + +.crystallizer-state-card > svg, +.crystallizer-state-card h2 { + position: relative; + z-index: 2; +} + +.crystallizer-empty svg { + width: 42px; + height: 42px; +} + +.crystallizer-empty h2 { + margin: 0; + margin-top: -30px; + color: #334155; + font-family: var(--font-old); + font-size: 25px; + font-weight: 750; +} + +.crystallizer-empty.error { + color: var(--danger); +} + +.crystallizer-empty.crystallizing .crystallizer-state-card { + min-width: min(430px, 78vw); + min-height: 236px; + border-color: rgba(186, 230, 253, 0.54); + padding: 0; + color: #10a9d2; + background: + radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.98), transparent 36%), + radial-gradient(circle at 32% 78%, rgba(125, 211, 252, 0.22), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(227, 246, 255, 0.48)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 32px 82px rgba(8, 47, 73, 0.2), + 0 0 44px rgba(56, 189, 248, 0.22), + 0 0 0 1px rgba(255, 255, 255, 0.42); + isolation: isolate; +} + +.crystallizer-empty.crystallizing .crystallizing-orb { + min-height: 236px; + padding: 28px 42px; +} + +.crystallizer-empty.crystallizing .crystallizer-state-card::before { + animation: answerHaze 6.5s linear infinite; +} + +.crystallizer-empty.crystallizing .crystallizer-state-card::after { + position: absolute; + z-index: 1; + inset: 0; + content: ''; + border-radius: inherit; + background: + radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.42), transparent 35%), + linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, 0.28) 16%, transparent 30%), + linear-gradient(248deg, transparent 14%, rgba(125, 211, 252, 0.2) 34%, transparent 62%); + filter: blur(0.4px); + opacity: 0.68; + pointer-events: none; + animation: crystallizerGlassGleam 4.8s ease-in-out infinite; +} + +.crystallizer-god-rays, +.crystallizer-prismatic-aura { + position: absolute; + z-index: 1; + pointer-events: none; +} + +.crystallizer-god-rays { + inset: -38%; + background: conic-gradient( + from 216deg at 50% 54%, + transparent 0deg, + rgba(255, 255, 255, 0.58) 9deg, + transparent 18deg, + transparent 42deg, + rgba(125, 211, 252, 0.32) 49deg, + transparent 62deg, + transparent 116deg, + rgba(214, 245, 255, 0.52) 126deg, + transparent 140deg, + transparent 214deg, + rgba(255, 255, 255, 0.38) 224deg, + transparent 238deg, + transparent 360deg + ); + filter: blur(9px); + mix-blend-mode: screen; + opacity: 0.9; + transform-origin: center; + animation: crystallizerGodRays 8.8s ease-in-out infinite; +} + +.crystallizer-prismatic-aura { + inset: -16%; + background: + radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.84), transparent 16%), + radial-gradient(circle at 48% 50%, rgba(56, 189, 248, 0.34), transparent 34%), + radial-gradient(circle at 64% 38%, rgba(192, 132, 252, 0.16), transparent 38%), + radial-gradient(circle at 34% 68%, rgba(34, 211, 238, 0.18), transparent 38%); + filter: blur(18px); + opacity: 0.94; + animation: crystallizerAuraPulse 3.8s ease-in-out infinite; +} + +.crystallizing-orb .answer-loading-haze { + border-radius: inherit; +} + +.answer-crystallizing-orb .crystallizer-god-rays { + inset: -46%; + opacity: 0.72; +} + +.answer-crystallizing-orb .crystallizer-prismatic-aura { + inset: -24%; + opacity: 0.88; +} + +.answer-crystallizing-orb .answer-loading-haze { + background: + radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.72), transparent 26%), + radial-gradient(circle at 50% 50%, rgba(186, 230, 253, 0.58), transparent 48%), + radial-gradient(circle at 44% 62%, rgba(125, 211, 252, 0.22), transparent 64%); +} + +.crystallizer-quantum-core { + position: relative; + z-index: 3; + display: grid; + place-items: center; + width: 78px; + height: 78px; + margin-top: 2px; + border: 1px solid rgba(255, 255, 255, 0.66); + border-radius: 999px; + background: + radial-gradient( + circle at 50% 50%, + rgba(255, 255, 255, 0.98), + rgba(186, 230, 253, 0.44) 48%, + rgba(14, 165, 233, 0.1) 72% + ), + linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(224, 247, 255, 0.42)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 0 26px rgba(56, 189, 248, 0.38), + 0 0 68px rgba(14, 165, 233, 0.24); + animation: crystallizerCoreFloat 3.4s ease-in-out infinite; +} + +.crystallizer-quantum-core::before, +.crystallizer-quantum-core::after { + position: absolute; + inset: -14px; + content: ''; + border-radius: inherit; + border: 1px solid rgba(186, 230, 253, 0.38); + opacity: 0.8; + animation: crystallizerHaloPulse 2.6s ease-in-out infinite; +} + +.crystallizer-quantum-core::after { + inset: -26px; + border-color: rgba(255, 255, 255, 0.3); + animation-delay: 620ms; +} + +.crystallizer-quantum-core svg { + position: relative; + z-index: 1; + width: 34px; + height: 34px; +} + +.crystallizer-loading-title { + z-index: 3; + margin: 6px 0 0; +} + +.crystallizer-empty h2.crystallizer-loading-title { + margin-top: 24px; + font-size: 27px; + letter-spacing: 0; +} + +.answer-crystallizing-orb .crystallizer-loading-title { + margin: 18px 0 0; + line-height: 1.05; +} + +.answer-crystallizing-orb .crystallizer-loading-title .text-shimmer { + font-size: 18px; + font-weight: 760; +} + +.answer-crystallizing-orb .crystallizer-quantum-core { + width: 68px; + height: 68px; + margin-top: 0; +} + +.answer-crystallizing-orb .crystallizing-orb-subtitle { + margin-top: 0; +} + +.crystallizer-shimmer-text { + --text-shimmer-base: rgba(25, 93, 123, 0.72); + --text-shimmer-highlight: rgba(255, 255, 255, 1); + filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.42)); +} + +.crystallizer-dock { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; + position: relative; + z-index: 3; + min-width: 0; + gap: 12px; + border-left: 1px solid rgba(125, 211, 252, 0.26); + padding: 14px; + background: rgba(255, 255, 255, 0.52); + backdrop-filter: blur(22px) saturate(1.08); +} + +.layer-strip.compact { + display: flex; + flex-direction: column; + gap: 8px; +} + +.layer-strip.compact button { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + height: 42px; + align-items: center; + gap: 7px; + border-radius: 10px; + padding: 7px 8px; + box-shadow: none; + color: #475569; + text-align: left; + transition: + transform 150ms ease, + border-color 150ms ease, + background 150ms ease, + box-shadow 150ms ease, + color 150ms ease; +} + +.crystallizer-body.results-ready .layer-strip.compact button { + animation: crystallizerDockReveal 440ms cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(1) { + animation-delay: 160ms; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(2) { + animation-delay: 195ms; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(3) { + animation-delay: 230ms; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(4) { + animation-delay: 265ms; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(5) { + animation-delay: 300ms; +} + +.crystallizer-body.results-ready .layer-strip.compact button:nth-child(6) { + animation-delay: 335ms; +} + +.layer-strip.compact button.active { + border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 46%, white); + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, white); + color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 84%, #102033); +} + +.layer-strip.compact button:hover { + border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 42%, white); + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 8%, white); + box-shadow: 0 9px 20px rgba(8, 47, 73, 0.08); + transform: translateY(-1px); +} + +.layer-strip.compact button:disabled, +.layer-strip.compact button:disabled:hover { + opacity: 0.48; + border-color: rgba(148, 163, 184, 0.18); + background: rgba(241, 245, 249, 0.46); + box-shadow: none; + color: #94a3b8; + cursor: not-allowed; + transform: none; +} + +.layer-strip.compact button:disabled .layer-number, +.layer-strip.compact button:disabled svg { + filter: grayscale(0.5) saturate(0.45); +} + +.layer-strip.compact svg, +.layer-number { + display: grid; + place-items: center; + width: 19px; + height: 19px; + border-radius: 6px; + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 82%, #ffffff); + color: #ffffff; +} + +.layer-strip.compact svg { + padding: 3px; + border: 1px solid rgba(125, 211, 252, 0.42); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 249, 255, 0.62)), + rgba(14, 165, 233, 0.08); + color: #0f8cc2; +} + +.layer-strip.compact strong { + min-width: 0; + overflow: hidden; + font-size: 10px; + font-weight: 920; + letter-spacing: 0.05em; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; +} + +.layer-strip.compact .filter-count { + display: grid; + place-items: center; + min-width: 20px; + height: 20px; + border-radius: 999px; + padding: 0 5px; + background: rgba(15, 23, 42, 0.06); + color: #64748b; + font-size: 10px; + font-weight: 900; +} + +.canvas-layer-hud { + position: absolute; + top: 14px; + right: 16px; + z-index: 5; + display: grid; + grid-auto-flow: column; + grid-auto-columns: minmax(0, 1fr); + width: auto; + max-width: calc(100% - 232px); + align-items: center; + gap: 4px; + border: 1px solid rgba(125, 211, 252, 0.26); + border-radius: 18px; + padding: 6px; + background: + radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.92), transparent 34%), + linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(229, 248, 255, 0.5)); + box-shadow: + 0 14px 34px rgba(8, 47, 73, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.72); + backdrop-filter: blur(18px) saturate(1.12); + -webkit-backdrop-filter: blur(18px) saturate(1.12); +} + +.canvas-layer-hud.layer-strip.compact button { + display: inline-grid; + grid-template-columns: auto auto auto; + justify-content: center; + width: 100%; + height: 26px; + align-items: center; + gap: 4px; + border-radius: 999px; + padding: 0 6px 0 4px; + background: rgba(255, 255, 255, 0.5); + line-height: 1; +} + +.canvas-layer-hud.layer-strip.compact button:hover { + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(229, 248, 255, 0.72)), + color-mix(in srgb, var(--layer-accent, #0f8cc2) 7%, white); + box-shadow: + 0 8px 18px rgba(8, 47, 73, 0.1), + 0 0 0 2px color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, transparent); +} + +.canvas-layer-hud.layer-strip.compact button.active { + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(224, 247, 255, 0.68)), + color-mix(in srgb, var(--layer-accent, #0f8cc2) 12%, white); +} + +.canvas-layer-hud.layer-strip.compact svg, +.canvas-layer-hud.layer-strip.compact .layer-number { + width: 16px; + height: 16px; + flex: 0 0 16px; + border-radius: 999px; + font-size: 13px; +} + +.canvas-layer-hud.layer-strip.compact svg { + padding: 2px; +} + +.canvas-layer-hud.layer-strip.compact strong { + max-width: 58px; + font-size: 8px; + letter-spacing: 0.04em; +} + +.canvas-layer-hud.layer-strip.compact .filter-count { + min-width: 16px; + max-width: 32px; + height: 16px; + padding: 0 4px; + font-size: 8px; + justify-self: end; +} + +.crystallizer-detail { + display: grid; + gap: 8px; + border: 1px solid color-mix(in srgb, var(--layer-accent) 28%, transparent); + border-radius: 8px; + padding: 14px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62)), + color-mix(in srgb, var(--layer-accent) 7%, white); + box-shadow: 0 18px 42px rgba(8, 47, 73, 0.1); +} + +.crystallizer-body.results-ready .crystallizer-detail { + animation: crystallizerDockReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: 430ms; +} + +.crystallizer-detail p, +.crystallizer-detail h2, +.crystallizer-detail small { + margin: 0; + font-family: var(--font-old); +} + +.crystallizer-detail p { + color: var(--layer-accent); + font-size: 10px; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.crystallizer-detail h2 { + color: #102033; + font-size: 15px; + font-weight: 900; + line-height: 1.1; +} + +.crystallizer-detail > span { + color: #64748b; + font-size: 11px; + font-weight: 850; +} + +.crystallizer-depth-meta { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.crystallizer-depth-meta strong, +.crystallizer-depth-meta span { + display: inline-flex; + min-height: 22px; + align-items: center; + border: 1px solid color-mix(in srgb, var(--layer-accent) 24%, rgba(255, 255, 255, 0.58)); + border-radius: 999px; + padding: 0 8px; + background: rgba(255, 255, 255, 0.54); + color: color-mix(in srgb, var(--layer-accent) 70%, #102033); + font-size: 10px; + font-style: normal; + font-weight: 900; + letter-spacing: 0.06em; + line-height: 1; + text-transform: uppercase; +} + +.crystallizer-detail small { + color: #475569; + font-size: 12px; + font-weight: 650; + line-height: 1.45; +} + +.crystallizer-depth-reason { + border-left: 2px solid color-mix(in srgb, var(--layer-accent) 42%, transparent); + padding-left: 9px; + color: #64748b; + font-size: 10px; + font-style: normal; + font-weight: 650; + line-height: 1.38; +} + +.crystallizer-detail button { + display: inline-flex; + width: 100%; + align-items: center; + justify-content: space-between; + border-radius: 8px; + margin-top: 5px; + box-shadow: none; +} + +.crystallizer-detail button svg { + width: 16px; + height: 16px; +} + +.crystal-button, +.responsive-button { + transition: + transform 0.1s ease, + border-color 0.1s ease, + box-shadow 0.1s ease; + cursor: pointer; +} +.crystal-button, +.responsive-button:hover { + border-color: rgba(14, 165, 233, 0.58); + background: + radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), + linear-gradient(135deg, #ecfeff 0%, #bae6fd 18%, #e0f2fe 36%, #ffffff 100%); + color: #082f49; + box-shadow: + 0 0 0 4px rgba(125, 211, 252, 0.16), + 0 18px 34px rgba(14, 165, 233, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.4); + transform: translateY(-1px); +} + +.model-setup-button { + transition: + transform 0.1s ease, + border-color 0.1s ease, + box-shadow 0.1s ease; +} +.model-setup-button:hover { + border-color: rgba(14, 165, 233, 0.58); + background: + radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), + linear-gradient(135deg, #ecfeff 0%, #bae6fd 18%, #e0f2fe 36%, #ffffff 100%); + color: #082f49; + box-shadow: + 0 0 0 4px rgba(125, 211, 252, 0.16), + 0 18px 34px rgba(14, 165, 233, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.4); + transform: translateY(-1px); +} + +.crystallizer-detail .explore-web-button { + position: relative; + overflow: hidden; + border-color: rgba(125, 211, 252, 0.34); + background: + radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.92), transparent 28%), + linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(224, 247, 255, 0.56)); + color: #075985; + isolation: isolate; + transition: + transform 90ms ease, + border-color 110ms ease, + background 110ms ease, + box-shadow 110ms ease, + color 90ms ease; +} + +.crystallizer-detail .explore-web-button::before { + position: absolute; + inset: -40% -22%; + z-index: -1; + content: ''; + background: + linear-gradient( + 112deg, + transparent 0%, + transparent 27%, + rgba(255, 255, 255, 0.94) 39%, + rgba(186, 230, 253, 0.86) 49%, + rgba(255, 255, 255, 0.9) 58%, + transparent 72% + ), + linear-gradient(135deg, #f0fdff 0%, #bae6fd 42%, #e0f2fe 68%, #ffffff 100%); + opacity: 0; + transform: translateX(-72%) skewX(-12deg); + transition: + transform 260ms cubic-bezier(0.16, 1, 0.3, 1), + opacity 80ms ease; +} + +.crystallizer-detail .explore-web-button:hover { + border-color: rgba(14, 165, 233, 0.58); + background: + radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), + linear-gradient(135deg, #ecfeff 0%, #bae6fd 38%, #e0f2fe 66%, #ffffff 100%); + color: #082f49; + box-shadow: + 0 0 0 4px rgba(125, 211, 252, 0.16), + 0 18px 34px rgba(14, 165, 233, 0.18), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + transform: translateY(-1px); +} + +.crystallizer-detail .explore-web-button:hover::before { + opacity: 1; + transform: translateX(72%) skewX(-12deg); +} + +.crystallizer-detail .explore-web-button:active { + transform: translateY(0) scale(0.99); +} + +.crystallizer-placeholder { + display: flex; + min-height: 138px; + place-items: center; + align-items: center; + border: 1px dashed rgba(100, 116, 139, 0.24); + border-radius: 8px; + color: #64748b; + font-size: 12px; + font-weight: 760; +} + +.crystallizer-placeholder span { + color: #94a3b8; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; + margin: auto; + gap: 10px; + display: flex; + align-items: center; +} + +.crystallizer-placeholder span svg { + display: block; + min-width: 30px; + min-height: 30px; + flex-shrink: 0; +} + +.crystallizer-list { + display: flex; + min-height: 0; + flex: 2 1 280px; + flex-direction: column; + gap: 7px; + overflow-y: auto; + overflow-x: hidden; +} + +.crystallizer-list button { + display: grid; + min-height: 38px; + height: auto; + grid-template-columns: 24px minmax(0, 1fr); + align-items: center; + gap: 8px; + border-radius: 8px; + padding: 7px 9px; + text-align: left; + box-shadow: none; + margin-right: 14px; +} + +.crystallizer-body.results-ready .crystallizer-list button { + animation: crystallizerListReveal 460ms cubic-bezier(0.16, 1, 0.3, 1) both; + animation-delay: calc(560ms + min(var(--reveal-index), 18) * 28ms); +} + +.crystallizer-list button.active { + border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 38%, white); + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 10%, white); +} + +.crystallizer-list button:hover { + border-color: color-mix(in srgb, var(--layer-accent, #0f8cc2) 34%, white); + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 7%, white); + box-shadow: 0 8px 18px rgba(8, 47, 73, 0.08); +} + +.crystallizer-list span { + display: grid; + place-items: center; + width: 22px; + height: 22px; + border-radius: 6px; + background: color-mix(in srgb, var(--layer-accent, #0f8cc2) 88%, #ffffff); + color: #ffffff; + font-size: 11px; + font-weight: 900; + box-shadow: 0 7px 16px color-mix(in srgb, var(--layer-accent, #0f8cc2) 18%, transparent); +} + +.crystallizer-list strong { + min-width: 0; + overflow: hidden; + color: #334155; + font-size: 12px; + font-weight: 820; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--font-old); +} + +.saved-atlas-drawer { + display: flex; + flex: 0 0 auto; + flex-direction: column; + min-height: 0; + gap: 7px; + border-top: 1px solid rgba(125, 211, 252, 0.22); + padding-top: 8px; + transition: + flex-basis 220ms ease, + flex-grow 220ms ease; +} + +.crystallizer-dock.saved-atlas-priority .crystallizer-list { + display: none; +} + +.crystallizer-dock.saved-atlas-priority .saved-atlas-drawer.open { + flex: 1 1 auto; +} + +.saved-atlas-head { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + width: 100%; + height: 34px; + border-color: rgba(125, 211, 252, 0.22); + border-radius: 9px; + padding: 0 8px; + background: rgba(239, 249, 255, 0.52); + color: #64748b; + box-shadow: none; +} + +.saved-atlas-title { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 7px; + font-size: 10px; + font-weight: 900; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.saved-atlas-head strong { + display: grid; + place-items: center; + min-width: 20px; + height: 18px; + border-radius: 999px; + padding: 0 6px; + background: + radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.9), transparent 44%), + rgba(15, 140, 194, 0.12); + color: #0f8cc2; + font-size: 10px; + font-weight: bold; +} + +.saved-atlas-head > svg { + width: 14px; + height: 14px; + transition: transform 160ms ease; +} + +.saved-atlas-drawer.open .saved-atlas-head > svg { + transform: rotate(180deg); +} + +.saved-atlas-drawer p { + max-height: 0; + margin: 0; + overflow: hidden; + color: #94a3b8; + font-size: 11px; + font-weight: 760; + opacity: 0; + transition: + max-height 220ms ease, + opacity 160ms ease; +} + +.saved-atlas-drawer.open p { + max-height: 48px; + opacity: 1; +} + +.saved-atlas-list { + display: grid; + max-height: 0; + gap: 4px; + overflow: hidden; + opacity: 0; + transition: + max-height 260ms cubic-bezier(0.16, 1, 0.3, 1), + opacity 180ms ease; + padding: 4px; +} + +.saved-atlas-drawer.open .saved-atlas-list { + max-height: 132px; + overflow: auto; + opacity: 1; +} + +.crystallizer-dock.saved-atlas-priority .saved-atlas-drawer.open .saved-atlas-list { + flex: 1 1 auto; + max-height: none; + min-height: 0; + align-content: start; + grid-auto-rows: max-content; + overflow: auto; +} + +/* Conscious expansion while an iceberg is open: the drawer behaves like a real + drawer and rolls up over the shard list, taking that space until closed again. */ +.crystallizer-dock.saved-atlas-open .crystallizer-list { + display: none; +} + +.crystallizer-dock.saved-atlas-open .saved-atlas-drawer.open { + flex: 1 1 auto; + min-height: 0; +} + +.crystallizer-dock.saved-atlas-open .saved-atlas-drawer.open .saved-atlas-list { + flex: 1 1 auto; + max-height: none; + min-height: 0; + align-content: start; + grid-auto-rows: max-content; + overflow: auto; +} + +.saved-atlas-list article { + display: grid; + grid-template-columns: minmax(0, 1fr) 28px; + align-self: start; + gap: 6px; +} + +.saved-atlas-list article > button { + height: auto; + min-height: 44px; + border-radius: 8px; + box-shadow: none; +} + +.saved-atlas-list article > button:first-child { + display: grid; + justify-items: start; + gap: 3px; + padding: 7px 9px; + text-align: left; +} + +.saved-atlas-list article > button:last-child { + display: grid; + place-items: center; + padding: 0; + color: #94a3b8; +} + +.saved-atlas-list article.active > button:first-child { + border-color: rgba(15, 140, 194, 0.34); + background: rgba(231, 246, 255, 0.82); +} + +.saved-atlas-list strong { + max-width: 100%; + overflow: hidden; + color: #334155; + font-size: 12px; + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; + text-transform: capitalize; + font-family: var(--font-old); +} + +.saved-atlas-list small { + color: #64748b; + font-size: 10px; + font-weight: 700; + line-height: 1; + margin-top: -3px; + font-family: var(--font-old); +} + +@keyframes crystallizerIcebergReveal { + from { + opacity: 0.18; + filter: blur(10px) drop-shadow(0 18px 32px rgba(8, 47, 73, 0.08)); + } + to { + opacity: 1; + filter: blur(0) drop-shadow(0 46px 70px rgba(8, 47, 73, 0.22)) + drop-shadow(0 0 34px rgba(125, 211, 252, 0.28)); + } +} + +@keyframes crystallizerZoneReveal { + from { + opacity: 0; + } +} + +@keyframes crystallizerFacetReveal { + from { + opacity: 0; + filter: blur(5px); + } + to { + filter: blur(0); + } +} + +@keyframes crystallizerLineReveal { + from { + opacity: 0; + stroke-dashoffset: 80; + } +} + +@keyframes crystallizerLabelReveal { + from { + opacity: 0; + filter: blur(8px); + } + to { + opacity: 1; + filter: blur(0); + } +} + +@keyframes crystallizerThreadReveal { + from { + opacity: 0; + stroke-dasharray: 4 18; + stroke-dashoffset: 80; + } + to { + opacity: 1; + } +} + +@keyframes crystallizerNodeReveal { + from { + opacity: 0; + filter: blur(8px); + } + to { + opacity: 1; + filter: blur(0); + } +} + +@keyframes crystallizerDockReveal { + from { + opacity: 0; + transform: translateY(10px); + filter: blur(6px); + } + to { + opacity: 1; + transform: translateY(0); + filter: blur(0); + } +} + +@keyframes crystallizerListReveal { + from { + opacity: 0; + transform: translateX(12px); + filter: blur(5px); + } + to { + opacity: 1; + transform: translateX(0); + filter: blur(0); + } +} + +@keyframes textShimmer { + 0% { + background-position: 140% 0; + } + 100% { + background-position: -140% 0; + } +} + +@keyframes crystallizerGodRays { + 0%, + 100% { + opacity: 0.62; + transform: rotate(-8deg) scale(0.96); + } + 50% { + opacity: 0.96; + transform: rotate(11deg) scale(1.04); + } +} + +@keyframes crystallizerAuraPulse { + 0%, + 100% { + opacity: 0.7; + transform: scale(0.96); + } + 50% { + opacity: 1; + transform: scale(1.06); + } +} + +@keyframes crystallizerGlassGleam { + 0%, + 100% { + opacity: 0.42; + transform: translateX(-3%) skewX(-6deg); + } + 50% { + opacity: 0.82; + transform: translateX(3%) skewX(6deg); + } +} + +@keyframes crystallizerCoreFloat { + 0%, + 100% { + transform: translateY(0) scale(1); + } + 50% { + transform: translateY(-5px) scale(1.025); + } +} + +@keyframes crystallizerHaloPulse { + 0%, + 100% { + opacity: 0.24; + transform: scale(0.92); + } + 50% { + opacity: 0.82; + transform: scale(1.08); + } +} diff --git a/src/renderer/src/assets/styles/dashboard-captures.css b/src/renderer/src/assets/styles/dashboard-captures.css new file mode 100644 index 0000000..df57868 --- /dev/null +++ b/src/renderer/src/assets/styles/dashboard-captures.css @@ -0,0 +1,1093 @@ +.dashboard-hero { + position: relative; + z-index: 1; +} + +.dashboard-hero { + position: relative; + display: flex; + min-height: 294px; + align-items: center; + justify-content: space-between; + margin: 0 -34px 1px; + overflow: hidden; + padding: 68px 74px 48px; + border-bottom: 1px solid rgba(143, 165, 196, 0.16); + background: + radial-gradient(circle at 52% 14%, rgba(255, 255, 255, 0.92), transparent 18%), + radial-gradient(circle at 72% 54%, rgba(126, 218, 238, 0.28), transparent 22%), + radial-gradient(circle at 86% 24%, rgba(143, 114, 207, 0.12), transparent 18%), + linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0)); +} + +.dashboard-hero::before { + position: absolute; + right: 24%; + bottom: -32px; + width: 560px; + height: 218px; + border-radius: 50%; + background: + radial-gradient(circle at 18% 58%, rgba(255, 255, 255, 0.95), transparent 28%), + radial-gradient(circle at 48% 42%, rgba(221, 249, 255, 0.82), transparent 34%), + radial-gradient(circle at 77% 54%, rgba(255, 255, 255, 0.9), transparent 30%); + content: ''; + filter: blur(5px); +} + +.dashboard-hero::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 1.2px, transparent 1.5px); + background-size: 64px 64px; + mask-image: linear-gradient(to bottom, #000, transparent 86%); +} + +.dashboard-hero p, +.panel-header p { + color: black; + font-size: 22px; + font-family: var(--font-display); + letter-spacing: 0; + line-height: 1.45; + text-transform: none; +} +.panel-header p span { + font-family: var(--font-ice); + font-size: 14px; +} +.panel-header h2 { + font-family: var(--font-old); + font-size: 12px; + color: var(--muted); + margin-top: 1px; + line-height: 1; +} + +.hero-copy { + position: relative; + z-index: 2; +} + +.hero-copy p { + margin-left: 30px; +} + +.hero-copy h1 { + font-size: 4rem; + font-weight: 800; + line-height: 1.1; + color: #000; + + /* Icy Gradient Fill */ + background: linear-gradient(135deg, #000000 15%, #bbf1fa 70%, #7ed7ed 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + + /* Layered Text Glow (Chilled Haze) */ + text-shadow: + 0 0 10px rgba(255, 255, 255, 0.6), + /* Crisp white core */ 0 0 25px rgba(126, 215, 237, 0.5), + /* Mid-tone icy blue mist */ 0 0 50px rgba(58, 146, 196, 0.3); /* Deep ambient arctic haze */ +} + +.start-page-hero-copy { + position: relative; + display: grid; + place-items: center; +} + +.start-page-hero-copy::before, +.start-page-hero-copy::after { + position: absolute; + pointer-events: none; + content: ''; +} + +.start-page-hero-copy::before { + inset: -20px -52px; + z-index: -1; + border-radius: 999px; + background: + radial-gradient(circle at 24% 50%, rgba(103, 232, 249, 0.18), transparent 34%), + radial-gradient(circle at 52% 42%, rgba(255, 255, 255, 0.44), transparent 36%), + radial-gradient(circle at 78% 54%, rgba(143, 114, 207, 0.12), transparent 34%); + filter: blur(11px); + opacity: 0.58; + animation: discoverGlow 18s ease-in-out infinite alternate; +} + +.start-page-hero-copy::after { + right: 12%; + bottom: -10px; + left: 12%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(80, 162, 196, 0.42), transparent); +} + +.start-page-hero-copy h1 { + --discover-gradient: linear-gradient( + 105deg, + #071121 10%, + #102846 20%, + #1f7f9a 38%, + #e9fbff 50%, + #5eddec 60%, + #6657c8 76%, + #102846 90%, + #071121 100% + ); + + position: relative; + font-family: var(--font-display); + margin: 0; + font-size: clamp(33px, min(4.2vw, 6.2vh), 20px); + font-weight: 600; + line-height: 0.86; + letter-spacing: 0.064em; + color: #0a172b; + + background: var(--discover-gradient); + background-size: 260% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: discoverTextFlow 24s cubic-bezier(0.45, 0, 0.2, 1) infinite; + + filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) + drop-shadow(0 8px 16px rgba(8, 25, 49, 0.16)) drop-shadow(0 0 14px rgba(103, 232, 249, 0.16)); +} + +@keyframes discoverTextFlow { + 0%, + 100% { + background-position: 6% 50%; + } + + 50% { + background-position: 94% 50%; + } + + 72% { + background-position: 72% 50%; + } +} + +@keyframes discoverGlow { + 0% { + opacity: 0.48; + transform: translate3d(-4px, 1px, 0) scale(0.98); + } + + 50% { + opacity: 0.82; + transform: translate3d(3px, -1px, 0) scale(1.02); + } + + 100% { + opacity: 0.62; + transform: translate3d(5px, 2px, 0) scale(1); + } +} + +.custom-font { + font-family: var(--font-old); +} + +.dashboard-hero h1 { + max-width: 680px; + margin: 0; + color: #14233c; + font-family: var(--font-old); + font-size: 66px; + font-weight: 600; + letter-spacing: 0.12em; + line-height: 1; + text-shadow: 0 18px 40px rgba(67, 127, 154, 0.12); +} + +.dashboard-hero p { + margin-top: 16px; + color: #6f7fa0; +} + +.hero-orb { + position: absolute; + right: 12%; + top: -12px; + z-index: 2; + display: grid; + place-items: center; + width: 320px; + height: 320px; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + animation: heroOrbFloat 8.5s ease-in-out infinite; +} + +.hero-orb::before { + position: absolute; + inset: -54px; + border-radius: 999px; + content: ''; + background: + radial-gradient(circle at 48% 44%, rgba(255, 255, 255, 0.74), transparent 30%), + radial-gradient(circle at 50% 50%, rgba(186, 230, 253, 0.38), transparent 48%), + radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.14), transparent 66%); + filter: blur(5px); + opacity: 0.82; + animation: heroOrbHalo 7.5s ease-in-out infinite; +} + +.hero-orb img { + position: relative; + z-index: 2; + width: 300px; + height: 300px; + object-fit: contain; + filter: drop-shadow(0 26px 32px rgba(58, 115, 146, 0.2)) + drop-shadow(0 0 28px rgba(255, 255, 255, 0.86)); + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + animation: heroOrbSpin 200s linear infinite; +} + +.hero-orb-aura { + position: absolute; + inset: 30px; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.72); + border-radius: 999px; + background: + radial-gradient(circle at 36% 25%, rgba(255, 255, 255, 0.92), transparent 22%), + radial-gradient(circle at 66% 70%, rgba(98, 216, 198, 0.16), transparent 36%), + radial-gradient(circle, rgba(126, 215, 237, 0.18), transparent 62%); + + box-shadow: + inset 0 0 40px rgba(255, 255, 255, 0.6), + /* Brightened inner frost */ 0 0 20px rgba(255, 255, 255, 0.4), + /* Core white intense glow */ 0 0 60px rgba(185, 226, 250, 0.5), + /* Vivid icy cyan mid-glow */ 0 0 120px rgba(58, 146, 196, 0.3), + /* Deep arctic blue wide haze */ 0 30px 80px rgba(0, 0, 0, 0.15); /* Subtle grounding shadow */ + animation: heroOrbGlow 6.75s ease-in-out infinite; +} + +.hero-orb-aura::before, +.hero-orb-aura::after { + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + mix-blend-mode: screen; + content: ''; +} + +.hero-orb-aura::before { + background: + radial-gradient(circle at 38% 14%, rgba(255, 255, 255, 0.96), transparent 26%), + conic-gradient( + from 30deg, + transparent 0deg, + rgba(255, 255, 255, 0.58) 26deg, + rgba(125, 211, 252, 0.24) 58deg, + transparent 100deg, + transparent 360deg + ); + opacity: 0.7; + animation: heroOrbSheen 12s linear infinite; +} + +.hero-orb-aura::after { + inset: 12px; + border: 1px solid rgba(255, 255, 255, 0.38); + background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), transparent 36%); + opacity: 0.54; + animation: heroOrbSheen 18s linear infinite reverse; +} + +@keyframes heroOrbFloat { + 0%, + 100% { + transform: translateY(0) scale(1); + } + 50% { + transform: translateY(-10px) scale(1.012); + } +} + +@keyframes heroOrbSpin { + to { + transform: rotate(360deg); + } +} + +@keyframes heroOrbSheen { + to { + transform: rotate(360deg); + } +} + +@keyframes heroOrbHalo { + 0%, + 100% { + opacity: 0.68; + transform: scale(0.98); + } + 50% { + opacity: 0.98; + transform: scale(1.04); + } +} + +@keyframes heroOrbGlow { + 0%, + 100% { + box-shadow: + inset 0 0 40px rgba(255, 255, 255, 0.6), + 0 0 20px rgba(255, 255, 255, 0.4), + 0 0 60px rgba(185, 226, 250, 0.5), + 0 0 120px rgba(58, 146, 196, 0.3), + 0 30px 80px rgba(0, 0, 0, 0.15); + } + 50% { + box-shadow: + inset 0 0 48px rgba(255, 255, 255, 0.74), + 0 0 34px rgba(255, 255, 255, 0.86), + 0 0 88px rgba(185, 226, 250, 0.76), + 0 0 150px rgba(58, 146, 196, 0.44), + 0 34px 88px rgba(0, 0, 0, 0.12); + } +} + +.start-orb { + position: relative; + z-index: 2; + display: grid; + place-items: center; + width: 100%; + height: 100%; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + animation: startOrbFloat 7.5s ease-in-out infinite; +} + +.start-orb-bloom, +.start-orb-rays, +.start-orb-spark { + position: absolute; + pointer-events: none; + content: ''; +} + +.start-orb-bloom { + inset: -40%; + border-radius: 999px; + background: + radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.78), transparent 21%), + radial-gradient(circle at 42% 52%, rgba(125, 211, 252, 0.44), transparent 38%), + radial-gradient(circle at 62% 60%, rgba(45, 212, 191, 0.24), transparent 52%), + radial-gradient(circle, rgba(120, 119, 255, 0.12), transparent 66%); + filter: blur(10px); + opacity: 0.95; + animation: startOrbBloom 6.8s ease-in-out infinite; +} + +.start-orb-rays { + inset: -30%; + border-radius: 999px; + background: conic-gradient( + from 24deg, + transparent 0deg, + rgba(255, 255, 255, 0.46) 20deg, + rgba(125, 211, 252, 0.22) 48deg, + transparent 84deg, + transparent 132deg, + rgba(186, 230, 253, 0.24) 164deg, + transparent 206deg, + transparent 360deg + ); + filter: blur(3px); + opacity: 0.5; + animation: startOrbRays 24s linear infinite; +} + +.start-orb img { + position: relative; + z-index: 2; + width: 100%; + height: 100%; + object-fit: contain; + filter: drop-shadow(0 26px 32px rgba(58, 115, 146, 0.2)) + drop-shadow(0 0 28px rgba(255, 255, 255, 0.86)); + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + animation: heroOrbSpin 200s linear infinite; +} + +.start-orb-aura { + position: absolute; + inset: 13%; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.72); + border-radius: 999px; + background: + radial-gradient(circle at 36% 25%, rgba(255, 255, 255, 0.92), transparent 22%), + radial-gradient(circle at 66% 70%, rgba(98, 216, 198, 0.16), transparent 36%), + radial-gradient(circle, rgba(126, 215, 237, 0.18), transparent 62%); + + box-shadow: + inset 0 0 40px rgba(255, 255, 255, 0.6), + /* Brightened inner frost */ 0 0 20px rgba(255, 255, 255, 0.84), + /* Core white intense glow */ 0 0 60px rgba(185, 226, 250, 0.75), + /* Vivid icy cyan mid-glow */ 0 0 120px rgba(58, 146, 196, 0.63), + /* Deep arctic blue wide haze */ 0 30px 80px rgba(0, 0, 0, 0.15); /* Subtle grounding shadow */ + animation: startOrbBreath 6.5s ease-in-out infinite; +} + +.start-orb-spark { + z-index: 3; + width: 7px; + height: 7px; + border-radius: 999px; + background: radial-gradient(circle, #ffffff 0 24%, rgba(125, 211, 252, 0.8) 38%, transparent 72%); + filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.9)); + animation: startOrbSpark 4.8s ease-in-out infinite; +} + +.start-orb-spark-1 { + top: 18%; + left: 21%; +} + +.start-orb-spark-2 { + top: 29%; + right: 15%; + animation-delay: -1.1s; +} + +.start-orb-spark-3 { + right: 25%; + bottom: 20%; + animation-delay: -2.2s; +} + +.start-orb-spark-4 { + bottom: 32%; + left: 14%; + animation-delay: -3.3s; +} + +/* Two slowly rotating layers give the orb life: an orbiting inner glimmer and a + sweeping conic sheen. Clipped to the circle by the aura's overflow + radius. */ +.start-orb-aura::before, +.start-orb-aura::after { + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + mix-blend-mode: screen; + content: ''; +} + +.start-orb-aura::before { + background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.9), transparent 38%); + opacity: 0.85; + animation: startOrbOrbit 16s linear infinite; +} + +.start-orb-aura::after { + background: conic-gradient( + from 0deg, + transparent 0deg, + rgba(255, 255, 255, 0.5) 36deg, + transparent 96deg, + transparent 360deg + ); + opacity: 0.55; + animation: startOrbSheen 11s linear infinite reverse; +} + +@keyframes startOrbFloat { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-9px); + } +} + +@keyframes startOrbBloom { + 0%, + 100% { + opacity: 0.72; + transform: scale(0.95); + } + + 50% { + opacity: 1; + transform: scale(1.06); + } +} + +@keyframes startOrbRays { + to { + transform: rotate(360deg); + } +} + +@keyframes startOrbSpark { + 0%, + 100% { + opacity: 0.28; + transform: translateY(0) scale(0.72); + } + + 45% { + opacity: 1; + transform: translateY(-7px) scale(1.2); + } +} + +@keyframes startOrbOrbit { + to { + transform: rotate(360deg); + } +} + +@keyframes startOrbSheen { + to { + transform: rotate(360deg); + } +} + +@keyframes startOrbBreath { + 0%, + 100% { + box-shadow: + inset 0 0 40px rgba(255, 255, 255, 0.6), + 0 0 20px rgba(255, 255, 255, 0.78), + 0 0 60px rgba(185, 226, 250, 0.62), + 0 0 120px rgba(58, 146, 196, 0.5), + 0 30px 80px rgba(0, 0, 0, 0.15); + } + 50% { + box-shadow: + inset 0 0 48px rgba(255, 255, 255, 0.72), + 0 0 32px rgba(255, 255, 255, 0.96), + 0 0 86px rgba(185, 226, 250, 0.92), + 0 0 160px rgba(58, 146, 196, 0.82), + 0 30px 80px rgba(0, 0, 0, 0.15); + } +} + +@media (prefers-reduced-motion: reduce) { + .start-page-hero-copy::before, + .start-page-hero-copy h1, + .start-orb, + .start-orb-bloom, + .start-orb-rays, + .start-orb-spark, + .start-orb-aura, + .start-orb-aura::before, + .start-orb-aura::after { + animation: none; + } +} + +.panel-section { + border: 1px solid var(--line); + border-radius: 16px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62)), + rgba(255, 255, 255, 0.7); + box-shadow: var(--shadow); + backdrop-filter: blur(22px) saturate(1.26); +} + +.section-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.section-heading h2 { + color: var(--ink); + font-size: 14px; + font-weight: 820; +} + +.section-heading span { + overflow: hidden; + color: var(--muted); + font-size: 11px; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.new-collection-button { + width: 168px; + padding: 0 18px; +} + +.collection-list { + display: flex; + flex-direction: column; + gap: 9px; +} + +.collection-list { + max-height: 430px; + overflow: auto; +} + +.collection-accordion { + overflow: hidden; + border: 1px solid rgba(145, 166, 195, 0.16); + border-radius: 14px; + background: rgba(255, 255, 255, 0.34); + transition: + border-color 180ms ease, + background 180ms ease, + box-shadow 180ms ease, + transform 180ms ease; +} + +.collection-accordion.dragging { + opacity: 0.56; + transform: scale(0.992); +} + +.collection-accordion.drop-target { + border-color: rgba(78, 178, 210, 0.44); + background: + radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.9), transparent 34%), + rgba(231, 249, 255, 0.72); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.72), + 0 18px 38px rgba(68, 153, 197, 0.14); + transform: translateY(-1px); +} + +.collection-accordion.reorder-target { + border-color: rgba(116, 145, 218, 0.42); + background: + radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.92), transparent 34%), + rgba(235, 242, 255, 0.74); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.72), + 0 16px 34px rgba(86, 111, 178, 0.13); + transform: translateY(-1px); +} + +.collection-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + width: 100%; + align-items: center; + gap: 8px; + border: 0; + padding: 8px 10px 8px 0; + background: transparent; + box-shadow: none; +} + +.collection-toggle { + display: grid; + grid-template-columns: 48px minmax(0, 1fr) 118px 20px; + min-height: 74px; + align-items: center; + gap: 12px; + min-width: 0; + border: 0; + padding: 10px 0 10px 16px; + background: transparent; + box-shadow: none; + text-align: left; +} + +.collection-toggle > svg { + width: 18px; + height: 18px; + color: var(--muted); + transition: transform 180ms ease; +} + +.collection-accordion.open .collection-toggle > svg { + transform: rotate(90deg); +} + +.collection-row-actions { + display: flex; + gap: 6px; +} + +.collection-row-actions button { + height: 28px; + border-radius: 8px; + padding: 0 9px; + font-size: 11px; + box-shadow: none; + transition: + transform 140ms ease, + border-color 140ms ease, + background 140ms ease, + color 140ms ease, + box-shadow 140ms ease; +} + +.collection-row-actions button:hover { + border-color: rgba(79, 174, 202, 0.28); + background: + radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 40%), + rgba(236, 249, 255, 0.76); + color: var(--accent-strong); + box-shadow: 0 8px 18px rgba(74, 145, 194, 0.1); + transform: translateY(-1px); +} + +.danger-button:hover { + border-color: rgba(184, 91, 89, 0.25); + background: rgba(255, 239, 239, 0.72); + color: var(--danger); +} + +.collection-captures { + border-top: 1px solid rgba(145, 166, 195, 0.15); + padding: 14px; + background: rgba(249, 252, 255, 0.42); +} + +.collection-capture-list { + display: grid; + max-height: 392px; + gap: 8px; + overflow-x: hidden; + overflow-y: auto; + padding: 2px 6px 2px 2px; + scroll-behavior: smooth; +} + +.collection-glyph { + display: grid; + place-items: center; + width: 42px; + height: 42px; + border-radius: 10px; + background: linear-gradient(145deg, #edf6ff, #ffffff); + color: #5c91dd; +} + +.collection-glyph svg { + width: 23px; + height: 23px; +} + +.collection-main, +.collection-meta { + display: grid; + gap: 4px; +} + +.collection-main { + min-width: 0; +} + +.collection-main strong, +.collection-meta strong { + overflow: hidden; + color: var(--ink); + font-size: 13px; + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.collection-meta { + justify-items: start; +} + +.collection-row.active, +.collection-row:hover { + border-color: rgba(86, 139, 218, 0.36); + background: + radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.95), transparent 35%), + linear-gradient(135deg, rgba(233, 244, 255, 0.9), rgba(255, 255, 255, 0.78)); +} + +.collection-row span { + overflow: hidden; + color: var(--ink); + font-size: 13px; + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.capture-link-button { + cursor: pointer; + height: auto; + max-width: 100%; + overflow: hidden; + border: 0; + padding: 0; + background: transparent; + color: var(--accent-strong); + font-size: 11px; + font-weight: 760; + box-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.capture-link-button:hover { + text-decoration: underline; +} + +.recent-card { + min-height: 148px; + border: 1px solid rgba(145, 166, 195, 0.22); + border-radius: 14px; + padding: 14px; + background: rgba(255, 255, 255, 0.62); + cursor: grab; + transition: + transform 150ms ease, + border-color 150ms ease, + background 150ms ease, + box-shadow 150ms ease, + opacity 150ms ease; +} + +.recent-card:hover { + border-color: rgba(79, 174, 202, 0.25); + background: + radial-gradient(circle at 22% 15%, rgba(255, 255, 255, 0.9), transparent 32%), + rgba(248, 253, 255, 0.78); + box-shadow: 0 14px 30px rgba(71, 122, 174, 0.12); + transform: translateY(-2px); +} + +.recent-card.dragging { + border-color: rgba(79, 174, 202, 0.34); + opacity: 0.55; + cursor: grabbing; + transform: scale(0.985); +} + +/* Insertion highlight when reordering a source within its own hub. Scoped to the + capture list so it overrides the list's flatter card style. */ +.collection-capture-list .recent-card.reorder-target { + border-color: rgba(116, 145, 218, 0.5); + box-shadow: + inset 0 0 0 1px rgba(255, 255, 255, 0.7), + 0 12px 26px rgba(86, 111, 178, 0.16); + transform: translateY(-2px); +} + +.recent-source, +.recent-card .data-badges { + display: flex; + align-items: center; + justify-content: space-between; + color: var(--muted); + font-size: 11px; + font-weight: 700; +} + +.recent-delete { + display: grid; + place-items: center; + width: 28px; + height: 28px; + border-color: rgba(145, 166, 195, 0.18); + border-radius: 9px; + padding: 0; + background: rgba(255, 255, 255, 0.58); + color: #7b8ba6; + box-shadow: none; +} + +.recent-delete:hover { + border-color: rgba(184, 91, 89, 0.24); + color: var(--danger); +} + +.recent-delete svg { + width: 15px; + height: 15px; +} + +.recent-card h3 { + margin-top: 12px; + color: var(--ink); + font-size: 14px; + font-weight: 820; +} + +.recent-card-title-row { + display: flex; + min-width: 0; + align-items: center; + gap: 10px; + margin-top: 10px; +} + +.recent-card-title-row h3 { + flex: 1 1 auto; + min-width: 0; + margin-top: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Keep the date/chunk badges intact and let the title truncate, rather than letting + the badges wrap or spill past the card edge in a narrow hub. */ +.recent-card-title-row .data-badges { + flex: 0 0 auto; + white-space: nowrap; +} + +.capture-hub-row { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 10px; +} + +.capture-hub-row span { + display: inline-flex; + max-width: 100%; + align-items: center; + gap: 5px; + overflow: hidden; + border: 1px solid rgba(113, 159, 203, 0.18); + border-radius: 999px; + padding: 3px 8px; + background: rgba(234, 247, 252, 0.7); + color: #54718e; + font-size: 10px; + font-weight: 760; + text-overflow: ellipsis; + white-space: nowrap; +} + +.capture-hub-row svg { + width: 12px; + height: 12px; + flex: 0 0 auto; +} + +.recent-card p { + display: -webkit-box; + margin-top: 8px; + overflow: hidden; + color: #647895; + font-size: 12px; + line-height: 1.45; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.recent-card .data-badges span { + border-radius: 7px; + padding: 3px 8px; + background: rgba(233, 241, 253, 0.9); + color: var(--accent); +} +.recent-card .data-badges time { + border-radius: 7px; + padding: 3px 8px; + margin: 0 5px; + background: rgba(233, 241, 253, 0.9); + color: #5c85be; +} + +.collection-capture-list .recent-card { + min-height: 0; + border-radius: 11px; + padding: 10px 12px; + background: rgba(255, 255, 255, 0.72); + box-shadow: none; +} + +.collection-capture-list .recent-card:hover { + box-shadow: 0 10px 22px rgba(71, 122, 174, 0.1); +} + +.collection-capture-list .recent-source { + gap: 10px; +} + +.collection-capture-list .capture-link-button { + min-width: 0; +} + +.collection-capture-list .recent-delete { + width: 24px; + height: 24px; + border-radius: 8px; +} + +.collection-capture-list .capture-hub-row { + flex: 0 1 auto; + margin-top: 0; + overflow: hidden; + flex-wrap: nowrap; +} + +.collection-capture-list .capture-hub-row span { + min-width: 0; + font-size: 8px; +} + +.collection-row small, +.panel-footer, +.answer-card footer { + color: var(--muted); + font-size: 12px; + font-weight: 650; +} + +.answer-card { + border: 1px solid rgba(145, 166, 195, 0.22); + border-radius: 12px; + background: rgba(255, 255, 255, 0.68); +} + +.empty-state { + display: grid; + min-height: 220px; + place-items: center; + padding: 24px; + color: var(--muted); + text-align: center; +} + +.empty-state h2, +.empty-state h3 { + color: var(--ink); + font-weight: 840; +} + +.empty-state p { + max-width: 420px; + margin-top: 8px; + font-size: 13px; + line-height: 1.45; +} + +.empty-state.large { + min-height: 500px; +} diff --git a/src/renderer/src/assets/styles/dashboard-shell.css b/src/renderer/src/assets/styles/dashboard-shell.css new file mode 100644 index 0000000..db52bdd --- /dev/null +++ b/src/renderer/src/assets/styles/dashboard-shell.css @@ -0,0 +1,10 @@ +.dashboard { + position: relative; + height: calc(100vh - var(--top-bar-height)); + overflow: auto; + padding: 0 34px 34px; +} + +.workspace.dashboard-open .dashboard { + height: calc(100vh - 95px); +} diff --git a/src/renderer/src/assets/styles/flow-map.css b/src/renderer/src/assets/styles/flow-map.css new file mode 100644 index 0000000..ae5b3de --- /dev/null +++ b/src/renderer/src/assets/styles/flow-map.css @@ -0,0 +1,652 @@ +.flow-header { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: minmax(220px, auto) minmax(280px, 520px); + gap: 18px; + align-items: center; + justify-content: space-between; + margin-bottom: 18px; +} + +.flow-brand { + display: inline-flex; + min-width: 0; + align-items: center; + gap: 12px; +} + +.flow-brand-mark { + display: grid; + flex: 0 0 auto; + place-items: center; + width: 48px; + height: 48px; + border: 1px solid rgba(76, 160, 194, 0.24); + border-radius: 16px; + background: + radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.98), transparent 44%), + linear-gradient(145deg, rgba(216, 252, 255, 0.94), rgba(91, 179, 213, 0.72)); + color: #2a7f9d; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.8), + 0 16px 32px rgba(64, 139, 172, 0.16); +} + +.flow-brand h1 { + margin: 0; + color: #123955; + font-size: 30px; + font-weight: 880; + line-height: 1; +} + +.flow-brand p { + margin: 5px 0 0; + color: #52728d; + font-size: 12px; + font-weight: 760; +} + +.flow-search { + display: grid; + grid-template-columns: 20px minmax(0, 1fr) 74px; + align-items: center; + gap: 8px; + height: 44px; + border: 1px solid rgba(93, 154, 190, 0.2); + border-radius: 14px; + padding: 0 7px 0 13px; + background: + radial-gradient(circle at 14% 24%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(219, 245, 255, 0.58)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 14px 28px rgba(59, 121, 162, 0.1); +} + +.flow-search svg { + color: #3d8fab; +} + +.flow-search input { + height: 32px; + border: 0; + padding: 0; + background: transparent; + color: #173f5a; + font-size: 13px; + font-weight: 720; + box-shadow: none; +} + +.flow-search input:focus { + box-shadow: none; +} + +.flow-search button { + display: inline-flex; + align-items: center; + justify-content: center; + height: 30px; + border-radius: 10px; + padding: 0 14px; +} + +.flow-stage { + position: relative; + z-index: 1; + display: grid; + min-height: 0; + grid-template-columns: minmax(0, 1fr) 320px; + gap: 18px; +} + +.flow-canvas { + position: relative; + min-width: 0; + min-height: 0; + overflow: hidden; + border: 1px solid rgba(97, 158, 196, 0.18); + border-radius: 8px; + background: + radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.88), transparent 22%), + radial-gradient(circle at 76% 72%, rgba(144, 228, 220, 0.14), transparent 32%), + linear-gradient(145deg, rgba(251, 254, 255, 0.76), rgba(224, 242, 249, 0.4)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.74), + 0 22px 46px rgba(51, 108, 154, 0.12); +} + +.flow-graph { + display: block; + width: 100%; + height: 100%; + min-height: 520px; +} + +.flow-current-field path { + fill: none; + stroke: rgba(42, 132, 166, 0.105); + stroke-linecap: round; + stroke-width: 7; + stroke-dasharray: 1 24; +} + +.flow-current-field path:nth-child(2n) { + stroke: rgba(74, 162, 182, 0.075); + stroke-width: 5; + stroke-dasharray: 1 30; +} + +.flow-edge { + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + vector-effect: non-scaling-stroke; + transition: + opacity 160ms ease, + stroke-width 160ms ease; +} + +.flow-edge { + stroke-width: calc(0.7px + var(--edge-strength) * 0.9px); + opacity: calc(0.16 + var(--edge-strength) * 0.18); +} + +.flow-edge.contains { + stroke: rgba(65, 139, 172, 0.18); +} + +.flow-edge.semantic { + stroke: rgba(40, 148, 174, 0.3); +} + +.flow-edge.query-match { + stroke: rgba(42, 151, 126, 0.38); +} + +.flow-edge.selected { + opacity: 0.74; + stroke-width: calc(1.1px + var(--edge-strength) * 1.2px); +} + +.flow-node { + cursor: grab; + outline: none; + transition: opacity 160ms ease; +} + +.flow-node:active { + cursor: grabbing; +} + +.flow-node:hover .flow-node-aura { + fill: rgba(78, 195, 218, 0.22); + stroke: rgba(45, 148, 190, 0.4); +} + +.flow-node.muted { + opacity: 0.34; +} + +.flow-node-aura { + fill: rgba(126, 224, 240, 0.08); + stroke: rgba(73, 156, 186, 0.16); + stroke-width: 1.2; +} + +.flow-node-core { + stroke: rgba(255, 255, 255, 0.88); + stroke-width: 1.6; +} + +.flow-node.hub .flow-node-core { + fill: url('#flow-node-hub'); +} + +.flow-node.source .flow-node-core { + fill: url('#flow-node-source'); +} + +.flow-node.query .flow-node-core { + fill: url('#flow-node-query'); +} + +.flow-node.selected .flow-node-aura { + fill: rgba(78, 195, 218, 0.18); + stroke: rgba(45, 148, 190, 0.42); + stroke-width: 2.2; +} + +.flow-node:focus-visible .flow-node-aura { + stroke: rgba(34, 129, 192, 0.72); + stroke-width: 3; +} + +/* Sources that matched the typed query: a teal ring ties them to the query node's current. */ +.flow-node.matched .flow-node-aura { + fill: rgba(46, 166, 135, 0.2); + stroke: rgba(46, 166, 135, 0.46); + stroke-width: 2; +} + +.flow-node.matched .flow-node-core { + stroke: rgba(204, 246, 232, 0.92); + stroke-width: 2; +} + +.flow-node-label { + fill: #244e68; + font-size: 12px; + font-weight: 820; + letter-spacing: 0; + paint-order: stroke; + pointer-events: none; + stroke: rgba(250, 254, 255, 0.86); + stroke-linejoin: round; + stroke-width: 5px; + text-anchor: middle; +} + +.flow-empty-state { + position: absolute; + inset: 0; + display: grid; + place-content: center; + justify-items: center; + gap: 10px; + padding: 24px; + color: #426985; + text-align: center; +} + +.flow-empty-state svg { + color: #2f91aa; +} + +.flow-empty-state strong { + color: #163b55; + font-size: 18px; + font-weight: 860; +} + +.flow-empty-state span { + max-width: 320px; + color: #5c7c93; + font-size: 13px; + font-weight: 650; + line-height: 1.4; +} + +.flow-empty-state button { + margin-top: 4px; +} + +.flow-inspector { + display: grid; + min-width: 0; + min-height: 0; + max-height: 100%; + grid-template-rows: auto auto minmax(0, 1fr) auto; + gap: 12px; + overflow: hidden; +} + +.flow-stats { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; +} + +.flow-stats span { + display: grid; + min-width: 0; + gap: 2px; + border: 1px solid rgba(85, 149, 184, 0.16); + border-radius: 8px; + padding: 10px; + background: rgba(255, 255, 255, 0.58); + box-shadow: 0 12px 24px rgba(66, 128, 166, 0.08); +} + +.flow-stats strong { + color: #173f5a; + font-size: 18px; + font-weight: 880; +} + +.flow-stats small { + color: #5e7d94; + font-size: 10px; + font-weight: 820; + text-transform: uppercase; +} + +.flow-node-detail, +.flow-recommendations, +.flow-matches, +.flow-omitted { + border: 1px solid rgba(87, 150, 184, 0.18); + border-radius: 8px; + background: + radial-gradient(circle at 20% 16%, rgba(255, 255, 255, 0.92), transparent 42%), + rgba(255, 255, 255, 0.58); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + 0 18px 34px rgba(58, 112, 152, 0.09); +} + +.flow-node-detail { + min-height: 0; + overflow: hidden; + padding: 14px; +} + +.flow-node-detail header { + display: grid; + grid-template-columns: 34px minmax(0, 1fr); + gap: 10px; + align-items: start; +} + +.flow-node-detail header > span { + display: grid; + place-items: center; + width: 34px; + height: 34px; + border-radius: 10px; + background: + radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98), transparent 45%), + linear-gradient(145deg, rgba(222, 252, 255, 0.95), rgba(97, 180, 213, 0.64)); + color: #287d9d; +} + +.flow-node-detail small { + display: block; + overflow: hidden; + color: #5b7a92; + font-size: 11px; + font-weight: 780; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-node-detail h2 { + display: -webkit-box; + margin: 3px 0 0; + overflow: hidden; + color: #143b55; + font-size: 17px; + font-weight: 860; + line-height: 1.18; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.flow-node-detail p { + display: -webkit-box; + margin: 12px 0 0; + overflow: hidden; + color: #415f76; + font-size: 12px; + font-weight: 620; + line-height: 1.45; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; + line-clamp: 4; +} + +.flow-node-meta { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 11px; +} + +.flow-node-meta span { + min-width: 0; + max-width: 100%; + overflow: hidden; + border: 1px solid rgba(69, 145, 174, 0.16); + border-radius: 999px; + padding: 4px 8px; + background: rgba(234, 251, 255, 0.7); + color: #377188; + font-size: 10px; + font-weight: 820; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-node-detail footer { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +} + +.flow-node-detail footer button { + display: inline-flex; + align-items: center; + gap: 6px; + height: 30px; + border-radius: 9px; + padding: 0 10px; + color: #2e7591; + font-size: 11px; +} + +.flow-node-detail footer button svg { + flex: 0 0 auto; +} + +.flow-node-detail.empty { + display: grid; + justify-items: start; + gap: 8px; + color: #55768f; +} + +.flow-node-detail.empty strong { + color: #173f5a; + font-size: 15px; + font-weight: 840; +} + +.flow-node-detail.empty span { + font-size: 12px; + font-weight: 640; + line-height: 1.4; +} + +.flow-recommendations { + display: grid; + gap: 8px; + padding: 12px; +} + +.flow-recommendations strong { + color: #173f5a; + font-size: 12px; + font-weight: 860; +} + +.flow-recommendations button { + justify-content: flex-start; + height: 30px; + border-radius: 9px; + color: #52728c; + font-size: 11px; + box-shadow: none; +} + +.flow-hint { + color: #5c7c93; + font-size: 12px; + font-weight: 640; + line-height: 1.4; +} + +.flow-matches { + display: grid; + min-height: 0; + grid-template-rows: auto minmax(0, 1fr); + gap: 12px; + overflow: hidden; + padding: 14px; +} + +.flow-matches > strong { + overflow: hidden; + color: #173f5a; + font-size: 12px; + font-weight: 860; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-match-list { + display: grid; + align-content: start; + gap: 10px; + min-height: 0; + margin: -4px; + padding: 4px 6px 4px 4px; + overflow-y: auto; + scrollbar-color: rgba(82, 178, 219, 0.38) transparent; + scrollbar-width: thin; +} + +.flow-match { + display: grid; + grid-template-columns: 42px minmax(0, 1fr); + align-items: center; + gap: 12px; + width: 100%; + min-height: 96px; + height: 96px; + overflow: hidden; + border: 1px solid rgba(87, 150, 184, 0.16); + border-radius: 11px; + padding: 10px 12px 10px 10px; + background: rgba(255, 255, 255, 0.62); + text-align: left; + cursor: pointer; + transition: + border-color 140ms ease, + background 140ms ease; +} + +.flow-match:hover { + border-color: rgba(46, 166, 135, 0.4); + background: rgba(232, 251, 246, 0.82); +} + +.flow-match.active { + border-color: rgba(46, 166, 135, 0.64); + background: rgba(224, 248, 240, 0.92); +} + +.flow-match-score { + display: grid; + align-self: center; + place-items: center; + width: 40px; + height: 40px; + border-radius: 999px; + border: 1px solid rgba(46, 166, 135, 0.28); + background: + radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95), transparent 52%), + rgba(46, 166, 135, 0.14); + color: #1b7259; + font-size: 13px; + font-weight: 880; + font-variant-numeric: tabular-nums; +} + +.flow-match-copy { + display: grid; + min-width: 0; + max-height: 76px; + gap: 4px; + overflow: hidden; +} + +.flow-match-meta { + overflow: hidden; + color: #5e7d94; + font-size: 10px; + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-match-copy strong { + display: block; + overflow: hidden; + color: #173f5a; + font-size: 13px; + font-weight: 840; + line-height: 1.18; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-match-excerpt { + display: block; + overflow: hidden; + margin-top: 1px; + color: #41566c; + font-size: 11px; + font-weight: 560; + line-height: 1.25; + text-overflow: ellipsis; + white-space: nowrap; +} + +.flow-match-tags { + display: flex; + min-width: 0; + flex-wrap: nowrap; + align-items: center; + gap: 6px; + overflow: hidden; + margin-top: 1px; +} + +.flow-match-strength { + border: 1px solid rgba(46, 166, 135, 0.22); + border-radius: 999px; + padding: 2px 8px; + background: rgba(224, 248, 240, 0.8); + color: #1b7259; + font-size: 9.5px; + font-weight: 820; +} + +.flow-match-open { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + gap: 3px; + border-radius: 999px; + padding: 2px 7px; + color: #2f7591; + font-size: 9.5px; + font-weight: 800; + cursor: pointer; + transition: background 140ms ease; +} + +.flow-match-open:hover { + background: rgba(228, 245, 252, 0.9); +} + +.flow-omitted { + padding: 10px 12px; + color: #5a768d; + font-size: 11px; + font-weight: 680; + line-height: 1.35; +} diff --git a/src/renderer/src/assets/styles/flow-view.css b/src/renderer/src/assets/styles/flow-view.css new file mode 100644 index 0000000..953ee4e --- /dev/null +++ b/src/renderer/src/assets/styles/flow-view.css @@ -0,0 +1,26 @@ +.flow-view { + position: relative; + z-index: 1; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + height: calc(100vh - 95px); + overflow: hidden; + padding: 20px 24px 24px; + background: + radial-gradient(circle at 14% 14%, rgba(255, 255, 255, 0.94), transparent 18%), + radial-gradient(circle at 78% 18%, rgba(147, 239, 255, 0.18), transparent 26%), + radial-gradient(circle at 48% 84%, rgba(73, 167, 174, 0.1), transparent 32%), + linear-gradient(180deg, rgba(250, 254, 255, 0.78), rgba(235, 248, 252, 0.56)); +} + +.flow-view::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + background-image: + linear-gradient(rgba(77, 143, 180, 0.045) 1px, transparent 1px), + linear-gradient(90deg, rgba(77, 143, 180, 0.035) 1px, transparent 1px); + background-size: 56px 56px; + mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.72), transparent 76%); +} diff --git a/src/renderer/src/assets/styles/foundation.css b/src/renderer/src/assets/styles/foundation.css new file mode 100644 index 0000000..65f487a --- /dev/null +++ b/src/renderer/src/assets/styles/foundation.css @@ -0,0 +1,702 @@ +:root { + --rail-width: 76px; + --titlebar-height: 24px; + --nav-height: 116px; + --top-bar-height: 150px; + --panel-width: 404px; + --panel-collapsed-width: 58px; + --ink: #17243a; + --soft-ink: #344766; + --muted: #71819a; + --faint: #9daabe; + --line: rgba(123, 158, 190, 0.28); + --line-strong: rgba(72, 143, 179, 0.34); + --glass: rgba(255, 255, 255, 0.72); + --glass-strong: rgba(255, 255, 255, 0.9); + --cloud: #f7fbff; + --aura: #dff8ff; + --accent: #4eb8df; + --accent-strong: #247fa7; + --prism: #8f72cf; + --aurora: #62d8c6; + --glint: #f1c66b; + --success: #2b9270; + --danger: #b85b59; + --shadow: 0 18px 55px rgba(51, 103, 137, 0.16); + --soft-shadow: 0 10px 30px rgba(62, 132, 163, 0.11); + + --font-ice: 'Cinzel', 'Cormorant Garamond', Georgia, serif; + --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; + --font-old: 'New York', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; + --font-alt: + Didot, 'Bodoni 72', 'Bodoni 72 Smallcaps', 'Baskerville', 'Iowan Old Style', Georgia, serif; +} + +html, +body, +#root { + width: 100%; + height: 100%; + overflow: hidden; +} + +body { + margin: 0; + color: var(--ink); + background: + radial-gradient(circle at 18% 14%, rgba(204, 247, 255, 0.74), transparent 30%), + radial-gradient(circle at 84% 10%, rgba(235, 224, 255, 0.7), transparent 32%), + radial-gradient(circle at 75% 78%, rgba(255, 235, 179, 0.26), transparent 28%), + linear-gradient(135deg, #fbfdff 0%, #edfaff 44%, #f9fcff 100%); + user-select: none; +} + +* { + scrollbar-width: thin; + scrollbar-color: rgba(122, 220, 255, 0.88) rgba(5, 18, 32, 0.2); +} + +*::-webkit-scrollbar { + width: 12px; + height: 12px; + background: rgba(7, 22, 38, 0.14); +} + +*::-webkit-scrollbar-track { + border: 1px solid rgba(168, 232, 255, 0.22); + border-radius: 999px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(116, 205, 255, 0.2)), + rgba(7, 22, 38, 0.16); + box-shadow: inset 0 0 10px rgba(136, 221, 255, 0.12); +} + +*::-webkit-scrollbar-thumb { + min-height: 42px; + border: 3px solid rgba(5, 18, 32, 0.28); + border-radius: 999px; + background: + linear-gradient( + 180deg, + rgba(255, 255, 255, 0.96), + rgba(119, 220, 255, 0.82) 44%, + rgba(28, 127, 190, 0.76) + ), + rgba(122, 220, 255, 0.76); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.86), + 0 0 14px rgba(83, 212, 255, 0.4); + /* filter + box-shadow DO animate smoothly in WebKit, gradient backgrounds don't. + Drive the hover response off those so it's a visible color/glow change. */ + filter: saturate(1) brightness(1); + transition: + border-width 160ms ease, + box-shadow 200ms ease, + filter 200ms ease; +} + +*::-webkit-scrollbar-thumb:hover { + border-width: 2px; + filter: saturate(1.3) brightness(1.12); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.94), + 0 0 22px rgba(101, 226, 255, 0.75); +} + +*::-webkit-scrollbar-thumb:active { + border-width: 1px; + filter: saturate(1.5) brightness(1.22); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 1), + 0 0 30px rgba(120, 232, 255, 0.9); +} + +body::before { + position: fixed; + inset: 0; + pointer-events: none; + content: ''; + opacity: 0.22; + background-image: + radial-gradient(circle, rgba(77, 128, 197, 0.26) 0 1px, transparent 1.2px), + radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.4px); + background-position: + 0 0, + 18px 22px; + background-size: + 56px 56px, + 86px 86px; +} + +button, +input, +select, +textarea { + font: inherit; +} + +button { + cursor: pointer; +} + +button:disabled { + cursor: not-allowed; + opacity: 0.44; + filter: grayscale(0.55) saturate(0.68); +} + +.aether-shell { + position: relative; + display: grid; + grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--panel-width); + width: 100%; + height: 100%; + overflow: hidden; + background: + radial-gradient(circle at 48% -8%, rgba(255, 255, 255, 0.9), transparent 28%), + radial-gradient(circle at 26% 94%, rgba(195, 249, 240, 0.34), transparent 34%), + radial-gradient(circle at 96% 62%, rgba(143, 114, 207, 0.12), transparent 24%); + transition: grid-template-columns 600ms cubic-bezier(0.25, 1.25, 0.4, 1); +} + +.aether-shell.panel-collapsed { + grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--panel-collapsed-width); +} + +.window-titlebar { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 10; + display: grid; + grid-template-columns: 1fr; + align-items: center; + height: var(--titlebar-height); + padding: 0 18px; + border-bottom: 1px solid rgba(143, 165, 196, 0.12); + background: rgba(255, 255, 255, 0.44); + backdrop-filter: blur(20px) saturate(1.18); + -webkit-app-region: drag; +} + +.window-titlebar strong { + justify-self: center; + color: rgba(23, 36, 58, 0.82); + font-family: var(--font-old); + font-size: 14px; + font-weight: 600; + letter-spacing: 0.18em; +} + +.aether-shell::after { + position: absolute; + inset: 0; + pointer-events: none; + content: ''; + background: + linear-gradient(90deg, transparent 0 34%, rgba(255, 255, 255, 0.36) 50%, transparent 70%), + radial-gradient(circle at 72% 34%, rgba(117, 167, 232, 0.16), transparent 18%); + mix-blend-mode: screen; +} + +.app-rail { + position: relative; + z-index: 5; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + height: 100%; + /* Bottom padding reserves room for the absolutely-pinned settings button. */ + padding: calc(var(--titlebar-height) + 28px) 10px 86px; + border-right: 1px solid rgba(143, 165, 196, 0.18); + background: rgba(255, 255, 255, 0.48); + box-shadow: 12px 0 38px rgba(105, 137, 181, 0.08); + backdrop-filter: blur(26px) saturate(1.3); +} + +.brand-mark, +.app-button { + display: grid; + place-items: center; + border: 1px solid rgba(125, 158, 205, 0.24); + border-radius: 18px; + padding: 0; + color: #5f88c7; + line-height: 0; + box-shadow: var(--soft-shadow); + transition: + transform 160ms ease, + box-shadow 160ms ease, + border-color 160ms ease, + background 160ms ease, + color 160ms ease; +} + +.wavy-lines { + position: absolute; + width: 100%; + left: 0; + z-index: -1; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; +} +.wavy-lines-start-page { + position: absolute; + top: clamp(-110px, -14vh, -44px); + left: clamp(-280px, -18vw, -96px); + width: max(150%, 1180px); + height: 120%; + z-index: -20; + object-fit: cover; + opacity: 0.72; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; +} + +.brand-mark { + position: relative; + width: 52px; + height: 52px; + background: + radial-gradient(circle at 44% 28%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(219, 246, 255, 0.74)); + overflow: visible; +} + +/* ÆTHER logo as dashboard button icon */ +.brand-mark-image { + display: block; + width: 47px; + height: 47px; + object-fit: contain; + filter: drop-shadow(0 8px 16px rgba(65, 140, 174, 0.2)); +} + +.brand-mark > svg { + display: block; + width: 32px; + height: 32px; +} + +.app-button > svg { + display: block; + width: 28px; + height: 28px; +} + +.app-button:not(.active) > svg { + transform: translateY(1px); +} + +/* The iCE snowflake sits a touch smaller and higher than the Web View globe + below it, so it reads as snow 'raining' down onto the globe. */ +.ice-button > svg { + width: 23px; + height: 23px; +} + +.flow-button > svg { + width: 25px; + height: 25px; + stroke-width: 1.9; +} + +.air-button > svg { + width: 24px; + height: 24px; + stroke-width: 1.9; +} + +.brand-mark.active, +.brand-mark:hover, +.app-button:hover, +.app-button.active { + border-color: rgba(72, 125, 205, 0.38); + background: + radial-gradient(circle at 30% 20%, #ffffff, transparent 45%), + radial-gradient(circle at 72% 82%, rgba(98, 216, 198, 0.32), transparent 42%), + linear-gradient(145deg, #effcff, #ffffff); + color: var(--accent-strong); + box-shadow: + 0 16px 36px rgba(62, 132, 163, 0.2), + 0 0 0 5px rgba(126, 215, 237, 0.08); + transform: translateY(-1px); +} + +.app-list { + display: flex; + flex: 1; + flex-direction: column; + gap: 12px; + width: 100%; +} + +.app-button { + display: grid; + place-items: center; + position: relative; + width: 50px; + height: 50px; + margin: 0 auto; + background: + radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(145deg, #ffffff, #dbeeff); +} + +/* Pin the settings button to the bottom-left of the rail so it stays put + regardless of window height instead of being pushed past the bottom edge. */ +.settings-button { + position: absolute; + left: 0; + right: 0; + bottom: 18px; + width: 50px; + height: 50px; + margin: 0 auto; + color: #6f82a0; +} + +.tooltip-host { + position: relative; +} + +.tooltip-host::after, +.tooltip-host::before { + position: absolute; + z-index: 80; + pointer-events: none; + opacity: 0; + transition: + opacity 90ms ease, + transform 90ms ease; + content: ''; +} + +.tooltip-host::after { + content: attr(data-tooltip); + min-width: max-content; + max-width: 180px; + border: 1px solid rgba(130, 163, 207, 0.3); + border-radius: 11px; + padding: 4px 8px; + color: #3d5b84; + font-size: 11px; + font-weight: 760; + line-height: 1.2; + background: + radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.98), transparent 45%), + linear-gradient(145deg, #ffffff, #e8f2ff); + box-shadow: 0 10px 24px rgba(82, 126, 188, 0.18); +} + +.tooltip-host::before { + width: 8px; + height: 8px; + border-left: 1px solid rgba(130, 163, 207, 0.3); + border-bottom: 1px solid rgba(130, 163, 207, 0.3); + background: linear-gradient(145deg, #ffffff, #edf5ff); +} + +.tooltip-host:not([data-tooltip])::after, +.tooltip-host:not([data-tooltip])::before { + display: none; +} + +.tooltip-host[data-tooltip-side='right']::after { + top: 50%; + left: calc(100% + 10px); + transform: translateY(-50%) translateX(-2px); +} + +.tooltip-host[data-tooltip-side='right']::before { + top: 50%; + left: calc(100% + 7px); + transform: translateY(-50%) rotate(45deg); +} + +.tooltip-host[data-tooltip-side='left']::after { + top: 50%; + right: calc(100% + 10px); + transform: translateY(-50%) translateX(2px); +} + +.tooltip-host[data-tooltip-side='left']::before { + top: 50%; + right: calc(100% + 7px); + transform: translateY(-50%) rotate(-135deg); +} + +.tooltip-host:not([data-tooltip-side])::after { + bottom: calc(100% + 9px); + left: 50%; + transform: translateX(-50%) translateY(2px); +} + +.tooltip-host:not([data-tooltip-side])::before { + bottom: calc(100% + 5px); + left: 50%; + transform: translateX(-50%) rotate(-45deg); +} + +.tooltip-host:hover::after, +.tooltip-host:hover::before, +.tooltip-host:focus-visible::after, +.tooltip-host:focus-visible::before { + opacity: 1; +} + +.tooltip-host[data-tooltip-side='right']:hover::after, +.tooltip-host[data-tooltip-side='right']:focus-visible::after { + transform: translateY(-50%) translateX(0); +} + +.tooltip-host[data-tooltip-side='left']:hover::after, +.tooltip-host[data-tooltip-side='left']:focus-visible::after { + transform: translateY(-50%) translateX(0); +} + +.tooltip-host:not([data-tooltip-side]):hover::after, +.tooltip-host:not([data-tooltip-side]):focus-visible::after { + transform: translateX(-50%) translateY(0); +} + +.app-button .app-dot { + position: absolute; + display: none; + right: -9px; + width: 5px; + top: 11px; + height: 28px; + border-radius: 6px; + background: linear-gradient(#95c3ff, #5b91e1); + box-shadow: 0 0 18px rgba(85, 137, 217, 0.45); +} + +.app-button.active .app-dot { + display: block; +} + +.workspace { + position: relative; + z-index: 1; + min-width: 0; + height: 100%; + padding-top: var(--top-bar-height); +} + +.workspace.dashboard-open { + padding-top: 95px; +} + +.workspace::before { + position: absolute; + inset: var(--top-bar-height) 0 0; + pointer-events: none; + content: ''; + background: + radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.9), transparent 19%), + radial-gradient(circle at 88% 78%, rgba(207, 229, 255, 0.48), transparent 28%); +} + +.workspace.dashboard-open::before { + inset: 95px 0 0; +} + +.address-bar { + position: absolute; + top: var(--titlebar-height); + right: 0; + left: 0; + z-index: 4; + display: grid; + grid-template-columns: 78px 142px minmax(0, 1fr) 58px; + align-items: center; + gap: 10px; + height: var(--nav-height); + padding: 10px 16px; + border-bottom: 1px solid rgba(143, 165, 196, 0.22); + background: rgba(255, 255, 255, 0.58); + backdrop-filter: blur(24px) saturate(1.35); +} + +.history-controls { + display: flex; + gap: 7px; +} + +.history-controls button { + display: grid; + place-items: center; + width: 36px; + height: 36px; + padding: 0; + border-color: rgba(125, 158, 205, 0.24); + background: + radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 44%), + linear-gradient(145deg, #f2f8ff, #d9eaff); + color: #5f88c7; +} + +.history-controls svg { + width: 18px; + height: 18px; +} + +.active-app { + display: flex; + min-width: 0; + flex-direction: column; + line-height: 1.1; +} + +.active-app span { + overflow: hidden; + color: var(--ink); + font-size: 13px; + font-weight: 780; + text-overflow: ellipsis; + white-space: nowrap; +} + +.active-app small { + color: var(--muted); + font-size: 11px; + font-weight: 680; +} + +input, +select, +textarea { + width: 100%; + border: 1px solid var(--line); + border-radius: 10px; + background: rgba(255, 255, 255, 0.82); + color: var(--ink); + outline: none; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); +} + +input, +textarea, +[contenteditable='true'], +[contenteditable='plaintext-only'] { + -webkit-user-select: text; + user-select: text; +} + +input:focus, +select:focus, +textarea:focus { + border-color: rgba(78, 134, 215, 0.48); + box-shadow: + 0 0 0 4px rgba(106, 159, 233, 0.14), + inset 0 1px 0 rgba(255, 255, 255, 0.9); +} + +.address-bar input { + height: 36px; + padding: 0 12px; + font-size: 13px; +} + +button { + height: 36px; + border: 1px solid rgba(104, 140, 190, 0.24); + border-radius: 10px; + padding: 0 14px; + background: rgba(255, 255, 255, 0.78); + color: var(--soft-ink); + font-size: 13px; + font-weight: 760; + box-shadow: 0 8px 22px rgba(94, 132, 185, 0.08); +} + +.address-bar button, +.start-search button, +.chat-form button, +.semantic-trail-form button, +.new-collection-button, +.save-page-button { + border-color: rgba(67, 128, 182, 0.34); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 44%), + linear-gradient(145deg, #dff3ff, #76b8df 52%, #3f7fbd); + color: #ffffff; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 rgba(28, 89, 142, 0.18), + 0 9px 18px rgba(47, 115, 172, 0.14); + text-shadow: 0 1px 2px rgba(26, 70, 112, 0.22); + font-family: var(--font-ice); + font-weight: 600; + font-size: 15px; +} + +.address-bar button:hover, +.start-search button:hover, +.chat-form button:hover, +.semantic-trail-form button:hover, +.new-collection-button:hover, +.save-page-button:hover { + border-color: rgba(54, 122, 178, 0.42); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 46%), + linear-gradient(145deg, #e8f7ff, #6fb5dd 52%, #3678b7); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.58), + inset 0 -1px 0 rgba(28, 89, 142, 0.16), + 0 11px 22px rgba(47, 115, 172, 0.18); +} + +.save-page-button { + transition: + transform 170ms ease, + border-color 170ms ease, + background 170ms ease, + box-shadow 170ms ease; +} + +.save-page-button:hover { + transform: translateY(-1px); +} + +.save-page-button:active { + transform: translateY(0); +} + +.address-bar .history-controls button { + border-color: rgba(125, 158, 205, 0.24); + background: + radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.96), transparent 44%), + linear-gradient(145deg, #f2f8ff, #d9eaff); + color: #5f88c7; +} + +.address-bar .history-controls button:hover { + background: + radial-gradient(circle at 35% 24%, #ffffff, transparent 44%), + linear-gradient(145deg, #eaf4ff, #cfe5ff); + color: var(--accent-strong); +} + +.danger-button { + border-color: rgba(184, 91, 89, 0.2); + background: rgba(255, 255, 255, 0.72); + color: var(--danger); +} + +.webview-underlay { + position: absolute; + inset: var(--top-bar-height) 0 0; + display: grid; + place-items: center; + color: rgba(93, 118, 154, 0.62); + font-size: 12px; + font-weight: 760; + letter-spacing: 0.1em; + text-transform: uppercase; +} diff --git a/src/renderer/src/assets/styles/intelligence-panel.css b/src/renderer/src/assets/styles/intelligence-panel.css new file mode 100644 index 0000000..26c8c84 --- /dev/null +++ b/src/renderer/src/assets/styles/intelligence-panel.css @@ -0,0 +1,1598 @@ +.intelligence-panel { + z-index: 5; + min-width: 0; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + border-left: 1px solid rgba(143, 165, 196, 0.22); + background: rgba(255, 255, 255, 0.48); + box-shadow: -16px 0 46px rgba(104, 137, 184, 0.08); + backdrop-filter: blur(28px) saturate(1.34); + overscroll-behavior: contain; + scroll-padding-bottom: 28px; + scrollbar-color: rgba(82, 178, 219, 0.38) transparent; + scrollbar-width: thin; + transition: + background 420ms ease, + box-shadow 520ms ease, + border-color 420ms ease; +} + +.intelligence-panel::-webkit-scrollbar { + width: 7px; +} + +.intelligence-panel::-webkit-scrollbar-track { + background: transparent; +} + +.intelligence-panel::-webkit-scrollbar-thumb { + border-radius: 999px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.22)), + rgba(82, 178, 219, 0.38); +} + +.intelligence-panel.collapsed { + width: var(--panel-collapsed-width); + z-index: 26; + overflow: hidden; + border-left-color: rgba(204, 238, 247, 0.42); + background: rgba(255, 255, 255, 0.28); + box-shadow: + -12px 0 42px rgba(116, 196, 224, 0.12), + inset 1px 0 0 rgba(255, 255, 255, 0.52); +} + +.intelligence-panel::before, +.intelligence-panel::after { + position: absolute; + inset: var(--titlebar-height) 0 0; + pointer-events: none; + content: ''; + opacity: 0; + transition: + opacity 520ms ease, + transform 680ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.intelligence-panel::before { + background: + radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.86), transparent 20%), + radial-gradient(circle at 28% 46%, rgba(188, 245, 255, 0.42), transparent 32%), + linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(220, 249, 255, 0.18)); + filter: blur(10px); + transform: translateX(20px) scaleX(0.9); +} + +.intelligence-panel::after { + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px); + background-size: 42px 42px; + mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, transparent 94%); + transform: translateY(18px); +} + +.intelligence-panel.collapsed::before { + opacity: 0.94; + transform: translateX(0) scaleX(1); +} + +.intelligence-panel.collapsed::after { + opacity: 0.46; + transform: translateY(0); + animation: panelStardust 5.8s linear infinite; +} + +.panel-content { + display: flex; + position: relative; + min-height: 100%; + flex-direction: column; + gap: 12px; + padding: calc(var(--titlebar-height) + 24px) 16px 26px; + overflow: visible; + opacity: 1; + transform: translateX(0); + filter: blur(0); + transition: + opacity 300ms ease, + filter 300ms ease, + transform 550ms cubic-bezier(0.25, 1.3, 0.4, 1); +} + +.intelligence-panel.collapsed .panel-content { + pointer-events: none; + opacity: 0; + filter: blur(4px); + transform: translateX(25px) scale(0.93); +} + +.panel-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding-right: 58px; +} + +.panel-header h1 { + margin-top: 6px; + color: var(--ink); + font-size: 13px; + font-weight: 840; + line-height: 1.35; +} + +.status-pill { + display: inline-flex; + align-items: center; + height: 26px; + padding: 0 10px; + border: 1px solid rgba(105, 139, 190, 0.18); + border-radius: 999px; + font-size: 11px; + font-weight: 800; +} + +.status-pill.online { + background: rgba(43, 146, 112, 0.1); + color: var(--success); +} + +.status-pill.offline { + background: rgba(184, 91, 89, 0.1); + color: var(--danger); +} + +.status-pill.neutral { + background: rgba(255, 255, 255, 0.72); + color: var(--muted); +} + +.status-toast { + display: inline-flex; + position: fixed; + top: calc(var(--titlebar-height) + 14px); + right: calc(var(--panel-width) + 18px); + z-index: 80; + max-width: min(420px, calc(100vw - 140px)); + align-items: center; + gap: 10px; + border: 1px solid rgba(111, 157, 209, 0.24); + border-radius: 10px; + padding: 10px 13px; + background: rgba(248, 252, 255, 0.94); + color: var(--ink); + box-shadow: 0 16px 44px rgba(64, 105, 146, 0.18); + backdrop-filter: blur(18px); +} + +.status-toast span { + width: 9px; + height: 9px; + flex: 0 0 auto; + border-radius: 999px; + background: var(--accent-strong); + box-shadow: 0 0 0 5px rgba(75, 158, 215, 0.13); +} + +.status-toast strong { + overflow: hidden; + font-size: 12px; + font-weight: 820; + line-height: 1.35; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-toast.info span { + animation: statusPulse 1.05s ease-in-out infinite; +} + +.status-toast.success span { + background: var(--success); + box-shadow: 0 0 0 5px rgba(42, 148, 111, 0.13); +} + +.status-toast.error { + border-color: rgba(184, 91, 89, 0.28); +} + +.status-toast.error span { + background: var(--danger); + box-shadow: 0 0 0 5px rgba(184, 91, 89, 0.13); +} + +.aether-shell.panel-collapsed .status-toast { + right: calc(var(--panel-collapsed-width) + 18px); +} + +.find-bar { + position: fixed; + z-index: 120; + top: calc(var(--titlebar-height) + 48px); + right: calc(var(--panel-width) + 24px); + display: grid; + grid-template-columns: 18px minmax(150px, 240px) auto auto 30px; + align-items: center; + gap: 8px; + box-sizing: border-box; + height: 42px; + border: 1px solid rgba(41, 132, 202, 0.42); + border-radius: 12px; + padding: 6px 8px 6px 10px; + background: + radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 246, 255, 0.96)), + rgba(255, 255, 255, 0.96); + box-shadow: + 0 0 0 4px rgba(67, 158, 221, 0.12), + 0 18px 48px rgba(82, 125, 176, 0.24); + backdrop-filter: blur(18px); +} + +.aether-shell.panel-collapsed .find-bar { + right: calc(var(--panel-collapsed-width) + 24px); +} + +.find-bar svg { + width: 16px; + height: 16px; + color: var(--accent-strong); +} + +.find-bar input { + min-width: 0; + height: 28px; + border: 0; + padding: 0 2px; + background: transparent; + color: #18324b; + font: inherit; + font-size: 13px; + font-weight: 720; + outline: none; +} + +.find-bar input::placeholder { + color: rgba(86, 107, 134, 0.68); +} + +.find-count { + min-width: 38px; + text-align: center; + font-size: 12px; + font-weight: 720; + font-variant-numeric: tabular-nums; + color: #56708c; + white-space: nowrap; +} + +.find-count.is-empty { + color: #d2604b; +} + +.find-nav { + display: inline-flex; + align-items: center; + gap: 4px; +} + +.find-nav-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: 1px solid rgba(116, 143, 180, 0.18); + border-radius: 9px; + padding: 0; + background: rgba(255, 255, 255, 0.62); + color: #6d7f99; + line-height: 1; + box-shadow: none; + cursor: pointer; +} + +.find-nav-button svg { + width: 16px; + height: 16px; +} + +.find-nav-button:hover:not(:disabled) { + border-color: rgba(67, 145, 204, 0.28); + background: rgba(232, 247, 255, 0.9); + color: var(--accent-strong); +} + +.find-nav-button:disabled { + opacity: 0.4; + cursor: default; +} + +.find-close-button { + width: 28px; + height: 28px; + border: 1px solid rgba(116, 143, 180, 0.18); + border-radius: 9px; + padding: 0; + background: rgba(255, 255, 255, 0.62); + color: #6d7f99; + font-size: 19px; + font-weight: 540; + line-height: 1; + box-shadow: none; +} + +.find-close-button:hover { + border-color: rgba(67, 145, 204, 0.28); + background: rgba(232, 247, 255, 0.9); + color: var(--accent-strong); +} + +.panel-section { + padding: 14px; +} + +.panel-section.mode-section { + display: flex; + flex: 0 0 auto; + min-height: 0; + flex-direction: column; +} + +.panel-section.mode-section.collapsed { + flex: 0 0 auto; +} + +.section-heading { + transition: transform 2s ease; +} + +.chat-section { + flex: 0 0 auto; + min-height: 0; + transition: + background 300ms ease, + border-color 300ms ease; +} + +.chat-section.open { + flex: 0 0 auto; +} + +.answer-section { + flex: 0 0 auto; + overflow: hidden; +} + +.accordion-heading { + width: 100%; + height: auto; + border: 0; + padding: 0; + background: transparent; + box-shadow: none; + text-align: left; +} + +.accordion-heading h2 { + font-family: var(--font-ice); + font-size: 16px; +} +.accordion-heading span { + font-family: var(--font-old); + font-size: 12px; +} + +.accordion-heading > svg { + width: 15px; + height: 15px; + color: var(--muted); + transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.accordion-heading[aria-expanded='true'] > svg { + transform: rotate(90deg); +} + +.flow-heading-icon { + display: inline-grid; + width: 30px; + height: 24px; + place-items: center; + margin-left: auto; + border: 1px solid rgba(90, 185, 224, 0.18); + border-radius: 999px; + color: var(--accent-strong); + background: + radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.9), transparent 42%), + linear-gradient(180deg, rgba(235, 251, 255, 0.86), rgba(182, 234, 250, 0.42)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.86), + 0 6px 16px rgba(64, 154, 205, 0.12); +} + +.flow-heading-icon svg { + width: 17px; + height: 17px; + stroke-width: 2.35; +} + +.ask-panel-body { + display: grid; + min-height: 0; + transform-origin: top center; + overflow: hidden; + + transition: + max-height 500ms cubic-bezier(0.25, 1.4, 0.5, 1), + transform 500ms cubic-bezier(0.25, 1.4, 0.5, 1), + opacity 400ms ease, + margin-bottom 500ms cubic-bezier(0.25, 1.4, 0.5, 1); +} + +.ask-panel-body.is-open { + max-height: 400px; + transform: scale(1) translateY(0); + opacity: 1; + margin-bottom: 10px; +} + +.ask-panel-body.is-closed { + max-height: 0; + transform: scale(0.94) translateY(-12px); + opacity: 0; + margin-bottom: 0; +} + +.ask-context-controls { + display: grid; + flex: 0 0 auto; + grid-template-rows: auto minmax(0, auto); + gap: 9px; + min-height: 0; + margin-bottom: 10px; +} + +.ask-context-controls.has-many-hubs { + flex: 0 0 auto; + grid-template-rows: auto minmax(0, auto); +} + +.ask-current-button, +.ask-hub-picker button, +.ask-current-default { + min-width: 0; + box-shadow: none; +} + +.ask-current-default { + display: flex; + height: 32px; + align-items: center; + justify-content: center; + border-radius: 10px; + color: var(--muted); + font-size: 12px; + font-weight: 780; + margin-top: 2px; +} + +.ask-current-button { + display: flex; + align-items: center; + gap: 10px; + width: 99%; + padding: 24px 8px; + border-radius: 12px; + border-color: rgba(133, 158, 193, 0.16); + background: rgba(255, 255, 255, 0.42); + margin-top: 2px; + text-align: left; + transition: + border-color 0.16s ease, + background 0.16s ease; +} + +.ask-current-button:disabled { + cursor: not-allowed; + opacity: 0.7; +} + +.ask-current-badge { + flex: 0 0 auto; + display: grid; + place-items: center; + width: 38px; + height: 38px; + border-radius: 9px; + border: 1px solid rgba(133, 158, 193, 0.16); + background: rgba(255, 255, 255, 0.6); +} + +.ask-current-text { + display: flex; + flex-direction: column; + gap: 1px; + min-width: 0; + flex: 1 1 auto; +} +.ask-current-text strong { + font-weight: 800; + font-size: 13px; + line-height: 1.2; +} +.ask-current-text small { + font-size: 10px; + line-height: 1.2; + color: var(--muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + margin-left: 1px; +} + +.ask-current-radio { + flex: 0 0 auto; + display: grid; + place-items: center; + width: 18px; + height: 18px; + border-radius: 50%; + border: 2px solid rgba(133, 158, 193, 0.45); + transition: border-color 0.16s ease; +} + +.ask-current-radio.is-on { + border: 4px solid purple; +} + +.ask-current-radio.is-on::after { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: purple; +} + +.ask-current-button.active, +.ask-current-button:hover:not(:disabled) { + border-color: rgba(79, 174, 202, 0.28); + background: rgba(238, 250, 255, 0.78); +} + +.ask-current-button.active .ask-current-badge { + border-color: rgba(79, 174, 202, 0.28); + background: rgba(255, 255, 255, 0.82); +} + +.ask-current-button.active .ask-current-text strong { + color: var(--accent-strong); +} + +.ask-current-default { + gap: 8px; +} + +.ask-current-default span { + display: grid; + place-items: center; + width: 24px; + height: 24px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.72); +} + +.ask-current-default svg { + width: 15px; + height: 15px; +} + +.ask-hub-picker { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + align-content: start; + max-height: 118px; + min-height: 0; + gap: 4px; + overflow: auto; + padding-right: 4px; +} + +.ask-context-controls.has-many-hubs .ask-hub-picker { + max-height: 118px; + overflow: auto; +} + +.ask-hub-picker button { + display: grid; + grid-template-columns: minmax(0, 1fr); + min-height: 36px; + align-content: center; + justify-items: center; + gap: 2px; + border-color: rgba(133, 158, 193, 0.16); + border-radius: 8px; + padding: 25px 4px; + background: rgba(255, 255, 255, 0.42); + text-align: center; +} + +.ask-hub-picker button.active { + border-color: var(--prism) !important; + background: + radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.95), transparent 36%), + rgba(238, 250, 255, 0.78); + color: purple !important; +} +.ask-hub-picker button:hover { + border-color: rgba(79, 174, 202, 0.3); + background: + radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.95), transparent 36%), + rgba(238, 250, 255, 0.78); + color: var(--accent-strong); +} + +.ask-hub-picker button > span:first-child { + display: none; + place-items: center; + width: 28px; + height: 28px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.76); +} + +.ask-hub-picker svg { + width: 16px; + height: 16px; +} + +.ask-hub-copy { + display: grid; + min-width: 0; + max-width: 100%; + width: auto; + height: auto; + place-items: center; + align-content: center; + gap: 1px; + border-radius: 0; + background: transparent; +} + +.ask-hub-picker strong, +.ask-hub-picker small { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ask-hub-picker strong { + font-size: 9.5px; + font-weight: 780; +} + +.ask-hub-picker small { + color: var(--muted); + font-size: 8.5px; + font-weight: 680; +} + +.chat-form { + display: grid; + flex: 0 0 auto; + gap: 8px; +} + +.chat-form textarea { + min-height: 88px; + max-height: 142px; + padding: 10px; + resize: vertical; + font-size: 13px; + line-height: 1.45; + user-select: text; +} + +.trail-section { + flex: 0 0 auto; + gap: 9px; + overflow: visible; + transition: + background 300ms ease, + border-color 300ms ease; +} + +.trail-panel-body { + display: grid; + min-height: 0; + transform-origin: top center; + overflow: hidden; + transition: + max-height 500ms cubic-bezier(0.25, 1.4, 0.5, 1), + transform 500ms cubic-bezier(0.25, 1.4, 0.5, 1), + opacity 400ms ease, + margin-bottom 500ms cubic-bezier(0.25, 1.4, 0.5, 1); +} + +.trail-panel-body.is-open { + max-height: 3200px; + transform: scale(1) translateY(0); + opacity: 1; + margin-bottom: 0; + overflow: visible; +} + +.trail-panel-body.is-closed { + max-height: 0; + transform: scale(0.94) translateY(-12px); + opacity: 0; + margin-bottom: 0; +} + +.semantic-trail-form { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 7px; + margin-bottom: 10px; +} + +.semantic-trail-help { + margin-top: -2px; + color: #66809a; + font-size: 10px; + font-weight: 650; + line-height: 1.35; +} + +#semantic-trail-query { + font-size: 11px; +} + +.semantic-trail-description { + display: grid; + gap: 3px; + margin-bottom: 10px; + border: 1px solid rgba(139, 190, 215, 0.18); + border-radius: 12px; + padding: 10px 11px; + background: + radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.88), transparent 42%), + rgba(244, 251, 255, 0.58); + color: #61758d; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); +} + +.semantic-trail-description strong { + color: #1f344d; + font-size: 11px; + font-weight: 860; +} + +.semantic-trail-description span { + font-size: 10.5px; + font-weight: 680; + line-height: 1.38; +} + +.semantic-trail-form input { + width: 100%; + height: 34px; + border: 1px solid rgba(126, 161, 198, 0.18); + border-radius: 10px; + padding: 0 10px; + background: rgba(255, 255, 255, 0.68); + color: var(--ink); + font: inherit; + font-size: 12px; + font-weight: 720; + outline: none; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); +} + +.semantic-trail-form input:focus { + border-color: rgba(64, 154, 205, 0.42); + background: rgba(250, 254, 255, 0.94); +} + +.semantic-trail-card, +.semantic-trail-loading, +.semantic-trail-empty { + border: 1px solid rgba(139, 190, 215, 0.24); + border-radius: 12px; + background: + radial-gradient(circle at 22% 4%, rgba(255, 255, 255, 0.9), transparent 34%), + rgba(245, 250, 255, 0.76); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.78), + 0 12px 32px rgba(84, 160, 199, 0.1); +} + +.semantic-trail-card { + display: grid; + flex: 0 0 auto; + gap: 12px; + padding: 12px; +} + +.semantic-trail-root { + display: grid; + gap: 6px; + border: 1px solid rgba(119, 168, 205, 0.12); + border-radius: 10px; + padding: 9px; + background: rgba(255, 255, 255, 0.42); +} + +.semantic-trail-root div { + display: grid; + gap: 2px; +} + +.semantic-trail-root span, +.semantic-trail-item-meta { + color: var(--muted); + font-size: 10px; + font-weight: 760; +} + +.semantic-trail-root strong { + overflow: hidden; + color: var(--ink); + font-size: 12px; + font-weight: 860; + text-overflow: ellipsis; + white-space: nowrap; +} + +.semantic-trail-root small { + overflow: hidden; + color: var(--accent-strong); + font-size: 10px; + font-weight: 760; + text-overflow: ellipsis; + white-space: nowrap; +} + +.semantic-trail-root p { + display: -webkit-box; + margin: 0; + overflow: hidden; + color: rgba(60, 80, 105, 0.74); + font-size: 10.5px; + line-height: 1.42; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.semantic-trail-list { + display: grid; + position: relative; + grid-auto-rows: max-content; + gap: 14px; + overflow: visible; + padding: 2px 0 4px; +} + +/* The stream is a fixed-height channel behind the result cards. Light flows DOWN it via + animated background-position, never via transform translate — so it can never drift out + of the results section the way a translated element does in a tall, overflow-visible list. + ::before is the soft water body; ::after is the brighter caustics rippling through it. */ +.semantic-trail-list::before { + position: absolute; + top: 4px; + bottom: 4px; + left: 15px; + width: 36px; + border-radius: 999px; + pointer-events: none; + content: ''; + background: + radial-gradient(60% 22% at 50% 0%, rgba(255, 255, 255, 0.42), transparent 72%), + linear-gradient( + 180deg, + transparent 0, + rgba(150, 216, 247, 0.3) 14%, + rgba(92, 186, 228, 0.32) 52%, + rgba(150, 216, 247, 0.3) 86%, + transparent 100% + ); + filter: blur(7px); + opacity: 0.85; + animation: flowSway 7s ease-in-out infinite; +} + +.semantic-trail-list::after { + position: absolute; + top: 4px; + bottom: 4px; + left: 23px; + width: 20px; + border-radius: 999px; + pointer-events: none; + content: ''; + background: repeating-linear-gradient( + 180deg, + transparent 0, + transparent 30px, + rgba(255, 255, 255, 0.16) 44px, + rgba(255, 255, 255, 0.62) 52px, + rgba(255, 255, 255, 0.16) 60px, + transparent 74px, + transparent 96px + ); + background-size: 100% 96px; + filter: blur(1.4px); + opacity: 0.7; + -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); + mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); + animation: flowStream 3.6s linear infinite; +} + +.semantic-trail-item { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: 50px minmax(0, 1fr); + align-items: start; + gap: 12px; + width: 100%; + height: auto !important; + min-height: 124px; + min-width: 0; + border: 1px solid rgba(126, 161, 198, 0.16); + border-radius: 14px; + padding: 13px; + background: + radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.92), transparent 34%), + rgba(255, 255, 255, 0.62); + color: var(--ink); + line-height: normal; + text-align: left; + box-shadow: none; + overflow: visible; +} + +/* Flow the caustic pattern downward by one tile (matches ::after background-size) so the + loop is seamless. No transform translate, so the element stays inside its channel. */ +@keyframes flowStream { + from { + background-position-y: 0; + } + + to { + background-position-y: 96px; + } +} + +/* Gentle horizontal drift gives the water body life without changing its vertical bounds. */ +@keyframes flowSway { + 0%, + 100% { + transform: translateX(-1.5px); + } + + 50% { + transform: translateX(1.5px); + } +} + +@keyframes flowMapCurrent { + 0%, + 100% { + transform: translateY(-8%) scaleX(0.88); + } + + 50% { + transform: translateY(8%) scaleX(1.08); + } +} + +.semantic-trail-item:hover { + border-color: rgba(64, 154, 205, 0.28); + background: + radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.98), transparent 34%), + rgba(235, 249, 255, 0.86); +} + +.semantic-trail-score { + display: grid; + align-self: start; + grid-template-rows: auto auto; + place-items: center; + width: 46px; + height: 46px; + border: 1px solid rgba(78, 169, 214, 0.28); + border-radius: 999px; + background: + radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.96), transparent 42%), + conic-gradient(from -80deg, rgba(53, 154, 211, 0.42), rgba(196, 237, 255, 0.16)), + rgba(255, 255, 255, 0.78); + color: #1d668f; + font-size: 10px; + font-weight: 880; + font-variant-numeric: tabular-nums; + line-height: 1; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 10px 24px rgba(78, 169, 214, 0.12); +} + +.semantic-trail-score svg { + color: rgba(29, 102, 143, 0.66); +} + +.semantic-trail-score strong { + color: #176b94; + font-size: 11px; + font-weight: 920; +} + +.semantic-trail-item-copy { + display: grid; + align-content: start; + min-width: 0; + gap: 6px; +} + +.semantic-trail-item-copy strong, +.semantic-trail-item-copy small { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.semantic-trail-item-copy strong { + color: var(--ink); + font-size: 12px; + font-weight: 840; +} + +.semantic-trail-item-copy small { + color: var(--accent-strong); + font-size: 10px; + font-weight: 740; +} + +.semantic-trail-excerpt { + display: -webkit-box; + overflow: hidden; + color: #3f5269; + font-size: 11.5px; + font-weight: 620; + line-height: 1.48; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.semantic-trail-reasons { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +.semantic-trail-reasons span { + border: 1px solid rgba(97, 169, 210, 0.18); + border-radius: 999px; + padding: 2px 6px; + background: rgba(230, 248, 255, 0.68); + color: #287196; + font-size: 9px; + font-weight: 820; +} + +.semantic-trail-loading, +.semantic-trail-empty { + display: grid; + gap: 4px; + padding: 10px 11px; + border-color: rgba(139, 190, 215, 0.16); + background: rgba(246, 251, 255, 0.58); + color: var(--muted); + font-size: 11px; + font-weight: 700; + line-height: 1.45; + margin-bottom: 10px; +} + +.semantic-trail-loading strong { + color: var(--ink); + font-size: 12px; + font-weight: 840; +} + +.semantic-trail-label { + display: inline-flex; + align-items: center; + gap: 6px; + color: var(--muted); + font-size: 10px; + font-weight: 900; + margin-top: 5px; +} + +.answer-loading { + position: relative; + display: grid; + min-height: 220px; + place-items: stretch; + margin-top: 10px; + overflow: hidden; + border: 1px solid rgba(139, 190, 215, 0.24); + border-radius: 14px; + background: + radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.94), transparent 26%), + linear-gradient(145deg, rgba(248, 253, 255, 0.9), rgba(231, 249, 255, 0.76)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 16px 42px rgba(84, 160, 199, 0.12); +} + +.crystallizing-orb { + position: relative; + z-index: 1; + display: grid; + width: 100%; + min-height: 190px; + place-items: center; + overflow: visible; + color: #10a9d2; + isolation: isolate; +} + +.answer-crystallizing-orb { + min-height: 100%; + padding: 24px 28px 28px; +} + +.crystallizing-orb-content { + position: relative; + z-index: 3; + display: grid; + place-items: center; + gap: 8px; + text-align: center; +} + +.answer-crystallizing-orb .crystallizing-orb-content { + gap: 10px; + transform: translateY(-2px); +} + +.answer-loading-haze { + position: absolute; + inset: 0; + pointer-events: none; +} + +/* Frosted breath behind the crystal — a calm, slowly breathing icy glow. */ +.answer-loading-haze { + background: + radial-gradient(circle at 50% 44%, rgba(226, 248, 255, 0.72), transparent 56%), + radial-gradient(circle at 50% 60%, rgba(158, 222, 255, 0.3), transparent 62%); + filter: blur(17px); + opacity: 0.85; + animation: iceBreathe 7.5s ease-in-out infinite; +} + +.crystallizing-orb-subtitle { + position: relative; + z-index: 3; + max-width: min(260px, 86%); + margin: 5px auto 0; + color: var(--muted); + font-size: 11px; + font-weight: 720; + line-height: 1.35; + text-align: center; +} + +.answer-card { + position: relative; + padding: 12px; + background: rgba(245, 250, 255, 0.78); + user-select: text; + overflow: hidden; +} + +.answer-markdown { + max-height: min(36vh, 360px); + overflow: auto; + color: #243143; + font-size: 13px; + line-height: 1.5; +} + +.answer-markdown p, +.answer-markdown ul, +.answer-markdown ol { + margin: 0 0 10px; +} + +.answer-markdown p:last-child, +.answer-markdown ul:last-child, +.answer-markdown ol:last-child { + margin-bottom: 0; +} + +.answer-markdown ul, +.answer-markdown ol { + padding-left: 18px; +} + +.answer-markdown li { + margin: 4px 0; +} + +.answer-markdown em { + font-style: italic; +} + +.answer-metrics-subtitle { + margin: 5px 0 -5px; + color: rgba(78, 95, 120, 0.66); + font-size: 11px; + font-weight: 720; + line-height: 1.3; +} + +.answer-divider { + height: 0; + margin: 14px 0; + border: 0; + border-top: 1px solid rgba(120, 190, 220, 0.34); +} + +.answer-inline-math { + display: inline; + border-radius: 5px; + padding: 0 3px; + background: rgba(229, 248, 255, 0.58); + color: #29465f; + font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; + font-size: 0.96em; + font-weight: 680; +} + +.answer-citation-link { + display: inline-flex; + align-items: center; + height: 18px; + margin: 0 1px; + border: 1px solid rgba(78, 143, 208, 0.22); + border-radius: 999px; + padding: 0 5px; + background: rgba(225, 243, 255, 0.68); + color: var(--accent-strong); + font-size: 0.86em; + font-weight: 820; + line-height: 1; + vertical-align: 1px; + box-shadow: none; + cursor: pointer; +} + +.answer-citation-link:hover { + border-color: rgba(50, 137, 199, 0.42); + background: rgba(207, 236, 255, 0.92); + color: #12668f; +} + +.answer-heading { + margin: 12px 0 6px; + color: var(--ink); + font-size: 13px; + font-weight: 840; + line-height: 1.35; +} + +.answer-heading:first-child { + margin-top: 0; +} + +.answer-card footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-top: 2px; +} + +.answer-copy-button { + height: 26px; + border-radius: 8px; + padding: 0 9px; + color: var(--accent-strong); + font-size: 11px; + box-shadow: none; +} + +.answer-stop-button { + height: 26px; + border: 1px solid rgba(78, 143, 208, 0.26); + border-radius: 8px; + padding: 0 9px; + background: rgba(235, 248, 255, 0.85); + color: var(--accent-strong); + font-size: 11px; + font-weight: 780; + box-shadow: none; + cursor: pointer; +} + +.answer-stop-button:hover { + border-color: rgba(50, 137, 199, 0.46); + background: rgba(213, 240, 255, 0.95); +} + +.answer-loading .answer-stop-button { + position: absolute; + right: 10px; + bottom: 10px; + z-index: 1; +} + +.answer-card.is-streaming footer span { + color: var(--muted); + font-size: 11px; + font-weight: 720; +} + +.answer-stream-caret { + display: inline-block; + width: 7px; + height: 13px; + margin-left: 2px; + border-radius: 2px; + background: var(--accent-strong); + vertical-align: -2px; + animation: answerCaretBlink 0.9s steps(2, start) infinite; +} + +@keyframes answerCaretBlink { + to { + visibility: hidden; + } +} + +@keyframes answerHaze { + to { + transform: rotate(360deg); + } +} + +@keyframes iceBreathe { + 0%, + 100% { + opacity: 0.6; + transform: scale(0.96); + } + + 50% { + opacity: 0.92; + transform: scale(1.05); + } +} + +@keyframes statusPulse { + 0%, + 100% { + opacity: 0.55; + scale: 0.78; + } + + 50% { + opacity: 1; + scale: 1.08; + } +} + +.panel-footer { + display: grid; + flex: 0 0 auto; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 12px; + margin-top: 2px; + border-top: 1px solid var(--line); + padding-top: 10px; + padding-bottom: 4px; +} + +.panel-status-text { + grid-column: 1; + min-width: 0; + color: rgba(82, 97, 115, 0.9); + font-size: 11px; + font-weight: 720; + line-height: 1.35; + overflow-wrap: break-word; + white-space: normal; +} + +.inline-model-selector { + display: grid; + grid-column: 2; + justify-self: end; + width: min(180px, 100%); + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: 6px; + border: 1px solid rgba(105, 188, 224, 0.22); + border-radius: 999px; + padding: 4px 7px 4px 9px; + background: + radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.95), transparent 42%), + linear-gradient(145deg, rgba(241, 252, 255, 0.84), rgba(255, 255, 255, 0.6)); + color: #2a7a9f; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + 0 8px 18px rgba(74, 145, 194, 0.08); + + transition: + border-color 0.4s ease, + box-shadow 0.4s ease, + border 0.2s ease; +} + +.inline-model-selector:hover { + border: 2px solid rgba(142, 219, 255, 0.6); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 8px 24px rgba(105, 188, 224, 0.2), + 0 0 8px rgba(165, 230, 255, 0.3); /* Soft frost aura */ +} + +.inline-model-selector span { + color: #2a7a9f; + font-size: 10px; + font-weight: 860; +} + +.inline-model-selector select { + min-width: 0; + height: 24px; + border: 1px solid transparent; + border-radius: 999px; + padding: 0 20px 0 7px; + background: rgba(255, 255, 255, 0.52); + color: var(--ink); + font-size: 11px; + font-weight: 700; + box-shadow: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + box-shadow 0.2s ease; +} + +.inline-model-selector select:hover { + cursor: pointer; + background-color: rgba(224, 247, 255, 0.75); + border-color: rgba(174, 227, 253, 0.4); + box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6); +} + +.inline-model-selector select:focus { + box-shadow: 0 0 0 3px rgba(106, 193, 229, 0.18); +} + +.model-settings-button { + display: inline-flex; + grid-column: 2; + justify-self: end; + align-items: center; + justify-content: center; + gap: 6px; + max-width: 156px; + height: 28px; + overflow: hidden; + border-radius: 999px; + padding: 0 10px; + color: var(--muted); + font-size: 11px; + box-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.model-settings-button svg { + flex: 0 0 auto; + width: 13px; + height: 13px; +} + +.model-settings-button span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (max-width: 1120px) { + .aether-shell { + grid-template-columns: 70px minmax(0, 1fr) 352px; + } + + :root { + --rail-width: 70px; + --panel-width: 352px; + } + + .address-bar { + grid-template-columns: 78px 118px minmax(0, 1fr) 52px; + } + + .flow-stage { + grid-template-columns: minmax(0, 1fr); + overflow: auto; + } + + .flow-canvas { + min-height: 500px; + } + + .flow-inspector { + grid-template-columns: minmax(0, 1fr); + } + + .air-grid { + grid-template-columns: minmax(0, 1fr); + overflow: auto; + } + + .air-actions-panel, + .air-history-panel { + grid-column: 1; + } + + .air-preview-panel { + min-height: 560px; + } + + .flow-node-detail, + .flow-recommendations { + max-width: none; + } +} + +@media (max-width: 820px) { + .flow-view, + .air-view { + padding: 14px; + } + + .flow-header, + .air-hero { + grid-template-columns: minmax(0, 1fr); + } + + .air-hero { + display: grid; + } + + .flow-brand h1 { + font-size: 25px; + } + + .air-identity h1 { + font-size: 25px; + } + + .flow-search { + grid-template-columns: 20px minmax(0, 1fr) 66px; + } + + .air-output-note { + max-width: none; + } + + .air-lens-buttons, + .air-preview-layout { + grid-template-columns: minmax(0, 1fr); + } +} diff --git a/src/renderer/src/assets/styles/knowledge-shelves.css b/src/renderer/src/assets/styles/knowledge-shelves.css new file mode 100644 index 0000000..7d27aac --- /dev/null +++ b/src/renderer/src/assets/styles/knowledge-shelves.css @@ -0,0 +1,483 @@ +.saved-shelves, +.hub-row, +.iceberg-band, +.knowledge-band { + position: relative; + z-index: 1; + border-top: 1px solid rgba(143, 165, 196, 0.18); + padding: 22px 34px; +} + +.saved-shelves { + display: grid; + grid-template-columns: minmax(0, 1.04fr) minmax(300px, 0.96fr); + gap: 1px; + margin: 0 -34px; + padding: 0; + background: + linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(239, 249, 255, 0.24)), + rgba(255, 255, 255, 0.3); +} + +.hub-row { + margin: 0; + padding: 16px 22px 18px 34px; + background: rgba(255, 255, 255, 0.38); +} + +.iceberg-band { + margin: 0; + padding: 16px 34px 18px 22px; + background: + radial-gradient(circle at 12% 18%, rgba(186, 230, 253, 0.24), transparent 28%), + linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(239, 249, 255, 0.2)); +} + +.saved-shelves .hub-row, +.saved-shelves .iceberg-band { + min-width: 0; + border-top: 0; +} + +.saved-shelves .iceberg-band { + border-left: 1px solid rgba(143, 165, 196, 0.18); +} + +.knowledge-band { + margin: 0 -34px; + background: rgba(255, 255, 255, 0.22); +} + +.section-title { + display: grid; + grid-template-columns: 42px minmax(0, 1fr) auto; + align-items: center; + gap: 12px; + margin-bottom: 18px; +} + +.section-title.compact { + grid-template-columns: 30px minmax(0, 1fr); + gap: 9px; + margin-bottom: 10px; +} + +.hub-row .section-title.compact { + grid-template-columns: 30px minmax(0, 1fr) auto; +} + +.saved-iceberg-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); + gap: 8px; + max-height: 154px; + overflow-x: hidden; + overflow-y: auto; + margin: 0; + padding: 1px 5px 5px 1px; + scrollbar-color: rgba(82, 178, 219, 0.34) transparent; + scrollbar-width: thin; + + padding-top: 2px; +} + +.saved-iceberg-card { + position: relative; + min-width: 0; + height: 70px; + cursor: pointer; + transition: + opacity 180ms ease, + transform 240ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.saved-iceberg-card.dragging { + opacity: 0.5; + transform: scale(0.985); +} + +.saved-iceberg-card.drop-target, +.saved-iceberg-card:hover { + transform: translateY(-2px); +} + +.saved-iceberg-open { + position: relative; + display: grid; + width: 100%; + height: 100%; + grid-template-columns: minmax(0, 1fr) 26px; + grid-template-rows: auto 1fr auto; + align-content: center; + justify-items: start; + column-gap: 8px; + overflow: hidden; + border-color: rgba(105, 181, 216, 0.28); + border-radius: 8px; + padding: 8px 9px; + isolation: isolate; + background: + radial-gradient(circle at 92% 18%, rgba(185, 236, 255, 0.52), transparent 34%), + linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 249, 254, 0.84)); + color: #23364d; + cursor: pointer; + text-align: left; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + inset 0 -10px 22px rgba(105, 181, 216, 0.07), + 0 10px 22px rgba(73, 130, 171, 0.1); +} + +.saved-iceberg-open::before { + position: absolute; + inset: 0; + z-index: -1; + content: ''; + background: + linear-gradient(118deg, transparent 0 38%, rgba(126, 205, 233, 0.14) 39% 40%, transparent 41%), + radial-gradient(circle at 40% 0%, rgba(255, 255, 255, 0.86), transparent 30%); + opacity: 0.72; +} + +.saved-iceberg-card.drop-target .saved-iceberg-open, +.saved-iceberg-card:hover .saved-iceberg-open, +.saved-iceberg-open:hover { + border-color: rgba(75, 163, 206, 0.42); + background: + radial-gradient(circle at 92% 18%, rgba(207, 244, 255, 0.68), transparent 34%), + linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(229, 248, 254, 0.9)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.96), + inset 0 -10px 22px rgba(105, 181, 216, 0.1), + 0 12px 24px rgba(73, 130, 171, 0.16); +} + +.saved-iceberg-open span, +.saved-iceberg-open small { + max-width: 100%; + color: #5d7f98; + font-size: 9px; + opacity: 0.75; + font-weight: 900; + letter-spacing: 0.09em; + text-transform: uppercase; +} + +.saved-iceberg-open small { + grid-column: 1 / -1; + max-width: calc(100% - 34px); + font-size: 8px; + opacity: 1; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.saved-iceberg-open strong { + display: -webkit-box; + grid-column: 1; + max-width: 100%; + overflow: hidden; + color: #20344c; + font-size: 12px; + font-weight: 900; + line-height: 1.08; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + text-transform: capitalize; +} + +.saved-iceberg-delete { + position: absolute; + top: 6px; + right: 6px; + z-index: 2; + display: grid; + place-items: center; + width: 21px; + height: 21px; + border-color: rgba(105, 181, 216, 0.24); + border-radius: 999px; + padding: 0; + background: rgba(255, 255, 255, 0.72); + color: #6f8aa3; + box-shadow: none; + backdrop-filter: blur(10px); +} + +.saved-iceberg-delete:hover { + border-color: rgba(184, 91, 89, 0.24); + background: rgba(255, 239, 239, 0.86); + color: var(--danger); +} + +.saved-iceberg-delete svg { + width: 11px; + height: 11px; +} + +.saved-iceberg-flair { + position: absolute; + right: 8px; + bottom: 8px; + z-index: 2; + display: grid; + place-items: center; + width: 24px; + height: 24px; + border: 1px solid rgba(105, 181, 216, 0.28); + border-radius: 8px; + background: + radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.96), transparent 44%), + linear-gradient(145deg, rgba(229, 248, 255, 0.9), rgba(151, 216, 238, 0.42)); + color: #2a87ad; + pointer-events: none; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 6px 14px rgba(73, 130, 171, 0.12); + backdrop-filter: blur(12px); +} + +.section-symbol { + display: grid; + place-items: center; + width: 36px; + height: 36px; + border: 1px solid rgba(79, 174, 202, 0.22); + border-radius: 10px; + color: var(--accent-strong); + background: + radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(238, 252, 255, 0.9), rgba(255, 255, 255, 0.74)); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84); +} + +.section-title.compact .section-symbol { + width: 28px; + height: 28px; + border-radius: 8px; +} + +.section-symbol svg { + width: 21px; + height: 21px; +} + +.section-title.compact .section-symbol svg { + width: 17px; + height: 17px; +} + +.section-title h2 { + color: var(--ink); + font-size: 18px; + font-weight: 840; + font-family: var(--font-ice); +} + +.section-title.compact h2 { + font-size: 14px; + line-height: 1.05; +} + +.section-title p { + color: var(--muted); + font-size: 10px; + line-height: 0.75; + font-weight: 720; +} + +.section-title.compact p { + font-size: 10px; + font-weight: 720; + line-height: 1.25; +} + +/* A single comfortably-capped column. Collapsed and expanded hubs share the same + width, so opening one grows it in place instead of hopping to a full-width row. */ +.knowledge-band .collection-list { + display: flex; + flex-direction: column; + gap: 9px; + width: 100%; + max-height: none; +} + +.knowledge-band .collection-accordion { + min-width: 0; +} + +/* Soft reveal for the captures drawer so the in-place expansion feels calm. */ +.knowledge-band .collection-captures:not([hidden]) { + animation: capturesReveal 240ms cubic-bezier(0.22, 1, 0.36, 1); +} + +@keyframes capturesReveal { + from { + opacity: 0; + transform: translateY(-5px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.knowledge-band .collection-row { + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 4px; + padding: 4px 6px 4px 0; +} + +.knowledge-band .collection-toggle { + grid-template-columns: 36px minmax(0, 1fr) auto 16px; + min-height: 58px; + gap: 8px; + padding: 8px 10px; +} + +.knowledge-band .collection-glyph { + width: 32px; + height: 32px; + border-radius: 8px; +} + +.knowledge-band .collection-glyph svg { + width: 18px; + height: 18px; +} + +.knowledge-band .collection-main, +.knowledge-band .collection-meta { + gap: 2px; +} + +.knowledge-band .collection-main strong, +.knowledge-band .collection-meta strong { + font-size: 12px; +} + +.knowledge-band .collection-main small { + display: -webkit-box; + overflow: hidden; + font-size: 10px; + line-height: 1.25; + white-space: normal; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + line-clamp: 1; +} + +.knowledge-band .collection-meta { + justify-self: end; + min-width: 0; + max-width: none; + padding-right: 4px; + text-align: right; +} + +.knowledge-band .collection-meta small { + display: none; +} + +.knowledge-band .collection-row-actions { + display: flex; + align-items: center; + gap: 5px; + padding-right: 10px; +} + +.knowledge-band .collection-row-actions button { + height: 26px; + border-radius: 8px; + font-size: 11px; +} + +/* Always-visible "Ask this hub" pill — opens AiON focused on the collection. */ +.knowledge-band .collection-ask { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 0 10px; + border-color: rgba(86, 139, 218, 0.3); + background: + radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%), + linear-gradient(135deg, rgba(233, 244, 255, 0.95), rgba(255, 255, 255, 0.82)); + color: var(--accent-strong); + font-weight: 800; +} + +.knowledge-band .collection-ask:hover:not(:disabled) { + border-color: rgba(86, 139, 218, 0.5); + box-shadow: 0 8px 18px rgba(74, 145, 194, 0.14); + transform: translateY(-1px); +} + +.knowledge-band .collection-ask:disabled { + opacity: 0.45; + cursor: not-allowed; +} + +.knowledge-band .collection-ask svg { + width: 13px; + height: 13px; +} + +/* Edit/Delete stay out of the way until the hub is hovered or focused, + then ease in smoothly (width + fade) instead of snapping into view. */ +.knowledge-band .collection-edit, +.knowledge-band .collection-delete { + display: grid; + place-items: center; + width: 0; + padding: 0; + opacity: 0; + overflow: hidden; + pointer-events: none; + transform: translateX(4px); + transition: + width 220ms cubic-bezier(0.22, 1, 0.36, 1), + opacity 160ms ease, + transform 220ms cubic-bezier(0.22, 1, 0.36, 1), + border-color 160ms ease, + background 160ms ease, + color 160ms ease; +} + +.knowledge-band .collection-row:hover .collection-edit, +.knowledge-band .collection-row:hover .collection-delete, +.knowledge-band .collection-row:focus-within .collection-edit, +.knowledge-band .collection-row:focus-within .collection-delete { + width: 26px; + opacity: 1; + pointer-events: auto; + transform: translateX(0); +} + +.knowledge-band .collection-edit svg, +.knowledge-band .collection-delete svg { + width: 13px; + height: 13px; +} + +.knowledge-band .collection-toggle > svg { + width: 15px; + height: 15px; +} + +.hub-shortcuts { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); + gap: 8px; + max-height: 154px; + overflow-x: hidden; + overflow-y: auto; + margin: 0; + padding: 1px 5px 5px 1px; + scrollbar-color: rgba(82, 178, 219, 0.34) transparent; + scrollbar-width: thin; +} diff --git a/src/renderer/src/assets/styles/setup-settings.css b/src/renderer/src/assets/styles/setup-settings.css new file mode 100644 index 0000000..cdac09c --- /dev/null +++ b/src/renderer/src/assets/styles/setup-settings.css @@ -0,0 +1,1292 @@ +.settings-overlay { + position: fixed; + inset: 0; + z-index: 120; + display: grid; + place-items: center; + padding: 28px; + background: + radial-gradient(circle at 28% 18%, rgba(210, 247, 255, 0.58), transparent 28%), + radial-gradient(circle at 72% 82%, rgba(166, 219, 255, 0.34), transparent 30%), + rgba(242, 249, 255, 0.72); + backdrop-filter: blur(26px) saturate(1.18); + animation: settings-overlay-in 260ms ease both; +} + +#model-setup-title { + font-size: 58px; +} + +.model-setup-overlay { + position: fixed; + inset: 0; + z-index: 124; + display: grid; + place-items: center; + padding: 28px; + background: + linear-gradient( + 135deg, + rgba(246, 252, 255, 0.86), + rgba(232, 247, 255, 0.72) 42%, + rgba(248, 244, 255, 0.78) + ), + rgba(242, 249, 255, 0.76); + backdrop-filter: blur(30px) saturate(1.2); + animation: settings-overlay-in 260ms ease both; +} + +.model-setup-modal { + position: relative; + display: grid; + gap: 14px; + width: 100%; + max-height: calc(100vh - 150px); + overflow-x: hidden; + overflow-y: auto; + border: 1px solid rgba(105, 164, 205, 0.32); + border-radius: 26px; + padding: 18px; + background: + linear-gradient( + 120deg, + rgba(255, 255, 255, 0.96), + rgba(238, 250, 255, 0.9) 52%, + rgba(250, 247, 255, 0.92) + ), + rgba(255, 255, 255, 0.9); + box-shadow: + 0 34px 90px rgba(45, 88, 130, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.92); + isolation: isolate; + animation: settings-modal-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.model-setup-shell { + display: grid; + gap: 12px; + width: min(980px, calc(100vw - 56px)); + max-height: calc(100vh - 56px); + min-height: 0; +} + +.model-setup-bottom { + display: grid; + grid-template-columns: minmax(260px, 1fr) auto; + gap: 12px; + align-items: start; + min-width: 0; +} + +.model-setup-modal::before { + position: absolute; + inset: 0; + z-index: -1; + content: ''; + background: + linear-gradient(115deg, transparent 0 18%, rgba(113, 217, 234, 0.2) 28%, transparent 40% 100%), + linear-gradient(72deg, transparent 0 48%, rgba(148, 121, 214, 0.14) 58%, transparent 70% 100%); + mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.48)); +} + +.model-setup-glass { + position: absolute; + inset: 10px; + z-index: -1; + border: 1px solid rgba(255, 255, 255, 0.68); + border-radius: 20px; + pointer-events: none; +} + +.model-setup-hero { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); + gap: 18px; + align-items: center; + min-height: 150px; +} + +.model-setup-copy { + display: grid; + align-content: center; + gap: 7px; + min-width: 0; +} + +.model-setup-kicker { + display: inline-flex; + width: fit-content; + align-items: center; + gap: 8px; + border: 1px solid rgba(77, 168, 202, 0.24); + border-radius: 999px; + padding: 6px 10px; + background: rgba(255, 255, 255, 0.62); + color: #287c9f; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.model-setup-kicker svg { + width: 14px; + height: 14px; +} + +.model-setup-copy h1 { + margin: 0; + color: #162f4e; + font-family: var(--font-display); + font-size: clamp(40px, 6.2vw, 68px); + font-weight: 760; + letter-spacing: 0; + line-height: 0.9; +} + +.model-setup-copy p { + max-width: 620px; + margin: 0; + color: #4f6884; + font-size: 14px; + font-weight: 640; + line-height: 1.42; + font-family: var(--font-old); +} + +.model-setup-crystal { + position: relative; + display: grid; + place-items: center; + min-height: 148px; + overflow: visible; + isolation: isolate; + animation: heroOrbFloat 8.5s ease-in-out infinite; +} + +.model-setup-crystal::before { + position: absolute; + z-index: 0; + inset: -10%; + content: ''; + border-radius: 999px; + background: + radial-gradient(circle at 48% 38%, rgba(255, 255, 255, 0.72), transparent 30%), + radial-gradient(circle at 50% 50%, rgba(186, 230, 253, 0.38), transparent 50%), + radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.14), transparent 68%); + filter: blur(6px); + opacity: 0.86; + animation: heroOrbHalo 7.5s ease-in-out infinite; +} + +.model-setup-crystal::after { + position: absolute; + z-index: 3; + width: min(144px, 72%); + aspect-ratio: 1; + content: ''; + border-radius: 28%; + background: linear-gradient( + 118deg, + transparent 12%, + rgba(255, 255, 255, 0.72) 28%, + rgba(207, 245, 255, 0.32) 39%, + transparent 54% + ); + filter: blur(0.4px); + mix-blend-mode: screen; + opacity: 0.5; + transform: rotate(30deg); + pointer-events: none; + animation: modelSetupCrystalSheen 5.8s ease-in-out infinite; +} + +.model-setup-crystal img { + position: relative; + z-index: 2; + width: min(150px, 74%); + max-height: 150px; + object-fit: contain; + filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.96)) + drop-shadow(0 0 8px rgba(255, 255, 255, 0.78)) drop-shadow(0 0 20px rgba(149, 224, 255, 0.58)) + drop-shadow(0 18px 28px rgba(48, 119, 170, 0.22)); + pointer-events: none; + user-select: none; + -webkit-user-drag: none; +} + +@keyframes modelSetupCrystalSheen { + 0%, + 100% { + opacity: 0.18; + transform: translateX(-18px) rotate(30deg) scale(0.96); + } + 42% { + opacity: 0.62; + } + 58% { + opacity: 0.5; + transform: translateX(18px) rotate(30deg) scale(1.04); + } +} + +.model-setup-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); + gap: 14px; + align-items: stretch; +} + +.model-setup-options { + display: grid; + gap: 12px; + min-width: 0; +} + +.model-choice { + position: relative; + display: grid; + grid-template-columns: 26px 40px minmax(0, 1fr) auto; + gap: 10px; + align-items: center; + min-height: 98px; + border: 1px solid rgba(111, 153, 199, 0.22); + border-radius: 18px; + padding: 10px 12px; + background: + linear-gradient(130deg, rgba(255, 255, 255, 0.82), rgba(237, 249, 255, 0.6)), + rgba(255, 255, 255, 0.7); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.76), + 0 12px 28px rgba(68, 115, 169, 0.1); + cursor: pointer; + transition: + transform 180ms ease, + border-color 180ms ease, + background 180ms ease, + box-shadow 180ms ease; +} + +.model-choice:hover { + border-color: rgba(54, 140, 183, 0.34); + transform: translateY(-1px); +} + +.model-choice.installed { + border-color: rgba(72, 153, 119, 0.24); + background: + linear-gradient(130deg, rgba(250, 255, 252, 0.86), rgba(232, 249, 244, 0.58)), + rgba(255, 255, 255, 0.68); + cursor: default; +} + +.model-choice.installed:hover { + transform: none; +} + +.model-choice.selected { + border-color: rgba(53, 154, 185, 0.46); + background: + linear-gradient( + 130deg, + rgba(255, 255, 255, 0.94), + rgba(222, 249, 255, 0.76) 48%, + rgba(244, 239, 255, 0.78) + ), + rgba(255, 255, 255, 0.84); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 16px 34px rgba(72, 148, 190, 0.16); +} + +.model-choice input { + position: absolute; + width: 1px; + height: 1px; + opacity: 0; +} + +.model-choice-check, +.model-choice-icon { + display: grid; + place-items: center; + border-radius: 12px; +} + +.model-choice-check { + width: 24px; + height: 24px; + border: 1px solid rgba(95, 144, 184, 0.28); + background: rgba(255, 255, 255, 0.68); + color: transparent; +} + +.model-choice.selected .model-choice-check { + border-color: rgba(43, 146, 112, 0.3); + background: linear-gradient(145deg, rgba(223, 255, 247, 0.96), rgba(84, 190, 157, 0.82)); + color: #ffffff; +} + +.model-choice.installed .model-choice-check { + border-color: rgba(43, 146, 112, 0.26); + background: rgba(225, 255, 244, 0.76); + color: #2b926f; +} + +.model-choice-check svg { + width: 15px; + height: 15px; + stroke-width: 3; +} + +.model-choice-icon { + width: 40px; + height: 40px; + border: 1px solid rgba(91, 167, 207, 0.2); + background: + linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(225, 246, 255, 0.74)), + rgba(255, 255, 255, 0.7); + color: #2d82a7; +} + +.model-choice-icon svg { + width: 20px; + height: 20px; +} + +.model-choice-copy { + display: grid; + gap: 3px; + min-width: 0; +} + +.model-choice-copy strong { + color: #1d344f; + font-size: 18px; + font-weight: 900; +} + +.model-choice-copy em { + color: #287c9f; + font-size: 12px; + font-style: normal; + font-weight: 860; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.model-choice-copy small { + color: #566f8c; + font-size: 12px; + font-weight: 640; + line-height: 1.28; +} + +.model-choice-copy code, +.model-core-card code, +.model-access-card code, +.model-dir-card code { + overflow-wrap: anywhere; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 11px; + font-weight: 760; +} + +.model-choice-size { + align-self: start; + border: 1px solid rgba(143, 114, 207, 0.18); + border-radius: 999px; + padding: 5px 9px; + background: rgba(255, 255, 255, 0.62); + color: #5d4f91; + font-size: 11px; + font-weight: 900; + white-space: nowrap; +} + +.model-choice.installed .model-choice-size { + border-color: rgba(43, 146, 112, 0.2); + background: rgba(232, 255, 247, 0.72); + color: #2b7d64; +} + +.model-setup-side { + display: grid; + gap: 12px; + min-width: 0; +} + +.model-core-card, +.model-access-card, +.model-dir-card { + display: grid; + align-content: start; + gap: 7px; + min-width: 0; + border: 1px solid rgba(112, 169, 205, 0.22); + border-radius: 18px; + padding: 14px; + background: + linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(235, 249, 255, 0.56)), + rgba(255, 255, 255, 0.64); +} + +.model-core-card span, +.model-access-card > span, +.model-dir-card span { + display: flex; + align-items: center; + gap: 8px; + color: #287c9f; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.model-core-card span svg { + width: 15px; + height: 15px; +} + +.model-core-card strong { + color: #1d344f; + font-size: 18px; + font-weight: 900; +} + +.model-core-card.installed { + border-color: rgba(43, 146, 112, 0.2); + background: + linear-gradient(145deg, rgba(250, 255, 252, 0.86), rgba(233, 250, 245, 0.6)), + rgba(255, 255, 255, 0.62); +} + +.model-core-card.installed small, +.model-choice.installed .model-choice-copy code, +.model-core-card code { + color: #2b7d64; +} + +.model-access-card { + gap: 10px; +} + +.model-access-card p { + margin: 0; + color: #566f8c; + font-size: 12px; + font-weight: 640; + line-height: 1.45; +} + +.model-access-links { + display: grid; + grid-template-columns: 1fr; + gap: 3px; +} + +.model-access-links a { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + min-width: 0; + border: 1px solid rgba(88, 150, 194, 0.2); + border-radius: 12px; + padding: 5px 9px; + background: rgba(255, 255, 255, 0.58); + color: #276f9b; + font-size: 11px; + font-weight: 860; + text-decoration: none; +} + +.model-access-links a:hover { + border-color: rgba(58, 143, 183, 0.32); + background: rgba(255, 255, 255, 0.82); +} + +.model-access-links svg { + flex: 0 0 auto; + width: 13px; + height: 13px; +} + +.model-setup-progress { + display: grid; + gap: 8px; + min-width: 0; + border: 1px solid rgba(174, 215, 239, 0.42); + border-radius: 22px; + padding: 10px 12px; + background: + radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(135deg, rgba(248, 253, 255, 0.92), rgba(235, 248, 255, 0.76)), + rgba(255, 255, 255, 0.82); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 16px 42px rgba(58, 127, 180, 0.14); + backdrop-filter: blur(18px) saturate(1.12); +} + +.model-progress-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; +} + +.model-progress-heading span { + color: #287c9f; + font-size: 11px; + font-weight: 900; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.model-progress-heading strong { + color: #1d344f; + font-size: 12px; + font-weight: 860; +} + +.model-progress-meter, +.model-progress-line { + position: relative; + overflow: hidden; + border-radius: 999px; + background: rgba(98, 132, 174, 0.14); +} + +.model-progress-meter { + height: 8px; +} + +.model-progress-meter span, +.model-progress-line i { + display: block; + width: 100%; + height: 100%; + border-radius: inherit; + transform-origin: left center; + transition: transform 180ms ease; +} + +.model-progress-meter span { + background: linear-gradient(90deg, #55c7d9, #69d8bd 44%, #9a7dd5); + box-shadow: 0 0 18px rgba(85, 199, 217, 0.35); +} + +.model-progress-list { + display: grid; + gap: 8px; +} + +.model-progress-row { + display: grid; + grid-template-columns: 28px minmax(0, 1fr) auto; + gap: 9px; + align-items: center; + min-width: 0; + border: 1px solid rgba(115, 153, 198, 0.14); + border-radius: 14px; + padding: 8px; + background: rgba(255, 255, 255, 0.5); +} + +.model-progress-icon { + display: grid; + place-items: center; + width: 28px; + height: 28px; + border-radius: 10px; + background: rgba(231, 247, 255, 0.72); + color: #2d82a7; +} + +.model-progress-icon svg { + width: 16px; + height: 16px; +} + +.model-progress-row.downloading .model-progress-icon svg { + animation: model-download-spin 1s linear infinite; +} + +.model-progress-row.complete .model-progress-icon, +.model-progress-row.skipped .model-progress-icon { + background: rgba(223, 255, 247, 0.82); + color: #2b9270; +} + +.model-progress-row.error .model-progress-icon { + background: rgba(255, 233, 232, 0.82); + color: var(--danger); +} + +.model-progress-copy { + display: grid; + gap: 1px; + min-width: 0; +} + +.model-progress-copy strong, +.model-progress-copy small { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.model-progress-copy strong { + color: #24384f; + font-size: 12px; + font-weight: 860; +} + +.model-progress-copy small, +.model-progress-size { + color: #6f8299; + font-size: 10px; + font-weight: 720; +} + +.model-progress-size { + white-space: nowrap; +} + +.model-progress-line { + grid-column: 2 / 4; + height: 5px; +} + +.model-progress-line i { + background: linear-gradient(90deg, #55c7d9, #69d8bd 54%, #9a7dd5); +} + +.model-setup-error { + margin: -4px 0 0; + border: 1px solid rgba(184, 91, 89, 0.2); + border-radius: 14px; + padding: 10px 12px; + background: rgba(255, 247, 246, 0.78); + color: var(--danger); + font-size: 12px; + font-weight: 760; + line-height: 1.45; +} + +.model-setup-actions { + display: flex; + justify-content: flex-end; + gap: 10px; + min-width: max-content; + border: 1px solid rgba(174, 215, 239, 0.46); + border-radius: 22px; + padding: 10px; + background: + radial-gradient(circle at 24% 8%, rgba(255, 255, 255, 0.98), transparent 44%), + linear-gradient(135deg, rgba(248, 253, 255, 0.94), rgba(235, 248, 255, 0.8)), + rgba(255, 255, 255, 0.84); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 18px 46px rgba(58, 127, 180, 0.18); + backdrop-filter: blur(18px) saturate(1.12); +} + +.model-setup-actions button { + min-width: 116px; +} + +.model-setup-actions button:hover { + padding: 0 10px; + border-color: rgba(86, 139, 218, 0.3); + background: + radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%), + linear-gradient(135deg, rgba(233, 244, 255, 0.95), rgba(255, 255, 255, 0.82)); + color: var(--accent-strong); + font-weight: 800; +} + +.model-setup-actions button:hover:not(:disabled) { + border-color: rgba(86, 139, 218, 0.5); + box-shadow: 0 8px 18px rgba(74, 145, 194, 0.14); + transform: translateY(-1px); +} + +@keyframes model-download-spin { + to { + transform: rotate(360deg); + } +} + +@media (max-width: 880px) { + .model-setup-overlay { + padding: 16px; + } + + .model-setup-modal { + max-height: calc(100vh - 122px); + padding: 14px; + } + + .model-setup-shell { + width: calc(100vw - 32px); + max-height: calc(100vh - 32px); + } + + .model-setup-hero, + .model-setup-grid { + grid-template-columns: minmax(0, 1fr); + } + + .model-setup-hero { + min-height: auto; + } + + .model-setup-crystal { + min-height: 132px; + } + + .model-setup-crystal img { + max-height: 112px; + } + + .model-choice { + grid-template-columns: 26px 38px minmax(0, 1fr); + } + + .model-choice-size { + grid-column: 3; + justify-self: start; + } +} + +@media (max-width: 560px) { + .model-setup-copy h1 { + font-size: 40px; + } + + .model-choice { + grid-template-columns: 26px minmax(0, 1fr); + } + + .model-choice-icon { + display: none; + } + + .model-choice-copy, + .model-choice-size { + grid-column: 2; + } + + .model-progress-row { + grid-template-columns: 28px minmax(0, 1fr); + } + + .model-progress-size { + grid-column: 2; + justify-self: start; + } + + .model-progress-line { + grid-column: 1 / 3; + } + + .model-setup-bottom { + grid-template-columns: minmax(0, 1fr); + } + + .model-setup-actions { + justify-self: stretch; + justify-content: flex-end; + align-items: stretch; + flex-direction: column; + min-width: 0; + } +} + +.settings-modal { + width: min(740px, calc(100vw - 56px)); + max-height: calc(100vh - 56px); + /* Clip the inner scroll body so its scrollbar stays inside the rounded corners. */ + overflow: hidden; + /* Top/bottom padding equals the corner radius, so the modal-body sits in a + rectangle whose top/bottom can never overlap the rounded corners — and neither + can the scrollbar that lives inside it. */ + padding: 28px 0; + border: 1px solid rgba(101, 145, 190, 0.24); + border-radius: 28px; + background: + radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(232, 246, 255, 0.88)); + box-shadow: + 0 32px 80px rgba(54, 91, 132, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.8); + transform-origin: center; + animation: settings-modal-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; +} + +.settings-modal-body { + max-height: calc(100vh - 112px); + overflow-y: auto; + padding: 0 20px; +} + +/* Modal-specific scrollbar: cooler glow at rest, brighter aurora-glow on hover. + filter animates smoothly in WebKit (gradient backgrounds do not), so the + responsiveness lands as a real change in color/glow you can feel. */ +.settings-modal-body::-webkit-scrollbar { + width: 14px; + background: transparent; +} + +.settings-modal-body::-webkit-scrollbar-track { + border: 0; + background: transparent; + box-shadow: none; +} + +.settings-modal-body::-webkit-scrollbar-thumb { + min-height: 48px; + border: 4px solid transparent; + border-radius: 999px; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.98), + rgba(150, 224, 255, 0.92) 44%, + rgba(54, 150, 206, 0.82) + ); + background-clip: padding-box; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 0 0 rgba(83, 212, 255, 0); + filter: saturate(1) brightness(1); + transition: + border-width 160ms ease, + box-shadow 200ms ease, + filter 200ms ease; +} + +.settings-modal-body::-webkit-scrollbar-thumb:hover { + border-width: 3px; + filter: saturate(1.2) brightness(1.1); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.96), + 0 0 14px rgba(101, 226, 255, 0.6); +} + +.settings-modal-body::-webkit-scrollbar-thumb:active { + border-width: 2px; + filter: saturate(1.35) brightness(1.18); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 1), + 0 0 22px rgba(120, 232, 255, 0.78); +} + +@keyframes settings-overlay-in { + from { + opacity: 0; + backdrop-filter: blur(0) saturate(1); + } + to { + opacity: 1; + backdrop-filter: blur(26px) saturate(1.18); + } +} + +@keyframes settings-modal-in { + 0% { + opacity: 0; + filter: blur(10px); + transform: translateY(14px) scale(0.975); + } + 58% { + opacity: 1; + filter: blur(0); + transform: translateY(-2px) scale(1.006); + } + 100% { + opacity: 1; + filter: blur(0); + transform: translateY(0) scale(1); + } +} + +.settings-modal header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 18px; + margin-bottom: 18px; +} + +.settings-modal header p { + margin: 0 0 4px; + color: var(--accent-strong); + font-size: 11px; + font-weight: 900; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.settings-modal h2 { + margin: 0; + font-family: var(--font-old); + font-size: 25px; +} + +.settings-modal header button { + height: 31px; + border-radius: 999px; + box-shadow: none; +} + +.settings-field { + border: 1px solid rgba(123, 158, 190, 0.2); + border-radius: 18px; + padding: 14px; + background: rgba(255, 255, 255, 0.54); +} + +.settings-field.developer-mode-field { + margin-top: 14px; + transition: + border-color 0.16s ease, + background 0.16s ease, + box-shadow 0.16s ease; +} + +.settings-field.developer-mode-field:hover { + border-color: rgba(79, 174, 202, 0.4); + background: rgba(238, 250, 255, 0.78); + box-shadow: 0 8px 22px rgba(82, 126, 188, 0.12); +} + +.settings-model-setup-field { + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; + margin-top: 14px; +} + +.settings-model-setup-copy { + display: flex; + min-width: 0; + align-items: center; + gap: 12px; +} + +.settings-model-setup-copy svg { + flex: 0 0 auto; + color: var(--accent-strong); +} + +.settings-model-setup-copy span { + display: grid; + gap: 3px; +} + +.settings-model-setup-copy strong { + color: var(--ink); + font-size: 13px; + font-weight: 900; +} + +.settings-model-setup-copy small { + color: var(--muted); + font-size: 12px; + font-weight: 650; + line-height: 1.35; +} + +.settings-update-field { + display: grid; + gap: 12px; + margin-top: 14px; +} + +.settings-update-head, +.settings-update-actions { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 14px; +} + +.settings-update-head label { + margin: 0 0 4px; +} + +.settings-update-head p { + margin: 0; +} + +.update-badge { + flex: 0 0 auto; + border: 1px solid rgba(105, 188, 224, 0.28); + border-radius: 999px; + padding: 5px 10px; + background: rgba(240, 250, 255, 0.72); + color: #2a7a9f; + font-size: 10px; + font-weight: 900; + text-transform: uppercase; +} + +.update-badge.available { + border-color: rgba(42, 148, 111, 0.26); + background: rgba(227, 248, 238, 0.78); + color: var(--success); +} + +.settings-update-status { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 7px; +} + +.settings-update-status strong { + flex: 1 0 100%; + color: var(--ink); + font-size: 13px; + font-weight: 900; +} + +.settings-update-status span { + border: 1px solid rgba(105, 188, 224, 0.18); + border-radius: 999px; + padding: 4px 8px; + background: rgba(255, 255, 255, 0.54); + color: var(--muted); + font-size: 10px; + font-weight: 800; +} + +.settings-update-notes { + display: -webkit-box; + max-height: 96px; + overflow: hidden; + border-left: 3px solid rgba(54, 122, 178, 0.26); + padding-left: 10px; + margin: 0 !important; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; +} + +.settings-update-actions { + align-items: center; +} + +.settings-update-actions > div { + display: flex; + flex: 0 0 auto; + flex-wrap: wrap; + justify-content: flex-end; + gap: 8px; +} + +.settings-update-actions button { + height: 34px; + border-radius: 999px; + box-shadow: none; +} + +.settings-update-toggle { + flex: 1 1 auto; + min-width: 240px; +} + +.settings-field label { + display: block; + margin-bottom: 4px; + color: var(--ink); + font-size: 13px; + font-weight: 900; +} + +.settings-field p { + margin: 0 0 12px; + color: var(--muted); + font-size: 12px; + line-height: 1.45; +} + +.settings-field select { + width: 100%; + height: 36px; + border-radius: 12px; + padding: 0 12px; + font-weight: 760; +} + +.settings-checkbox-row { + display: grid !important; + grid-template-columns: 18px minmax(0, 1fr); + align-items: start; + gap: 10px; + margin: 0 !important; + cursor: pointer; +} + +.settings-checkbox-row input { + width: 16px; + height: 16px; + margin-top: 3px; + accent-color: var(--accent-strong); + cursor: pointer; +} + +.settings-checkbox-row span { + display: grid; + gap: 2px; + min-width: 0; +} + +.settings-checkbox-row strong { + color: var(--ink); + font-size: 13px; + font-weight: 900; +} + +.settings-checkbox-row small { + color: var(--muted); + font-size: 12px; + font-weight: 680; + line-height: 1.4; +} + +.settings-engine-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 10px; + margin-top: 12px; +} + +.settings-engine-list button { + display: grid; + height: auto; + min-height: 70px; + justify-items: start; + gap: 5px; + border-radius: 16px; + padding: 12px; + text-align: left; + box-shadow: none; + transition: + transform 160ms ease, + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease; +} + +.settings-engine-list button:hover:not(:disabled), +.settings-engine-list button.selected { + border-color: rgba(54, 122, 178, 0.34); + background-position: 10% 10%; + box-shadow: 0 10px 24px rgba(70, 124, 180, 0.12); + transform: translateY(-1px); +} + +.settings-engine-list strong { + color: var(--ink); + font-size: 13px; +} + +.settings-engine-list span { + color: var(--muted); + font-size: 11px; + line-height: 1.35; +} + +.settings-shortcuts { + display: grid; + gap: 12px; + margin-top: 14px; + border: 1px solid rgba(125, 211, 252, 0.22); + border-radius: 18px; + padding: 14px; + background: + radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.82), transparent 38%), + linear-gradient(145deg, rgba(239, 249, 255, 0.58), rgba(255, 255, 255, 0.42)); +} + +.settings-shortcuts h2 { + color: #20344c; + font-size: 15px; +} + +.settings-shortcuts p { + margin: 3px 0 0; + color: #6f8299; + font-size: 11px; +} + +.settings-shortcut-columns { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + align-items: start; +} + +.settings-shortcut-column { + display: grid; + gap: 8px; + align-content: start; +} + +.settings-shortcut-column h3 { + margin: 0 0 1px; + color: var(--accent-strong); + font-size: 10px; + font-weight: 900; + letter-spacing: 0.14em; + text-transform: uppercase; +} + +.settings-shortcut-list { + display: grid; + gap: 7px; +} + +.settings-shortcut-row { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + align-items: center; + gap: 10px; + min-width: 0; + border: 1px solid rgba(125, 158, 205, 0.16); + border-radius: 12px; + padding: 7px 10px; + background: rgba(255, 255, 255, 0.56); +} + +.settings-shortcut-row kbd { + display: inline-flex; + width: 135px; + align-items: center; + justify-content: center; + border: 1px solid rgba(105, 181, 216, 0.28); + border-radius: 8px; + padding: 3px 6px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(229, 248, 255, 0.72)), + rgba(255, 255, 255, 0.7); + color: #24779d; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 10px; + font-weight: 800; + white-space: nowrap; +} + +.settings-shortcut-row span { + overflow: hidden; + color: #24384f; + font-size: 11px; + font-weight: 780; + text-align: left; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/renderer/src/assets/styles/shared-overrides.css b/src/renderer/src/assets/styles/shared-overrides.css new file mode 100644 index 0000000..2224fe8 --- /dev/null +++ b/src/renderer/src/assets/styles/shared-overrides.css @@ -0,0 +1,517 @@ +.empty-state button { + height: 30px; + box-shadow: none; +} + +.empty-state { + min-height: 172px; + border: 1px dashed rgba(115, 148, 194, 0.28); + border-radius: 14px; + background: rgba(255, 255, 255, 0.34); +} + +.empty-row { + border: 1px dashed rgba(115, 148, 194, 0.22); + border-radius: 12px; + padding: 16px; + color: var(--muted); + font-size: 12px; + font-weight: 680; + text-align: center; +} + +.intelligence-panel { + position: relative; +} + +.panel-icon-toggle { + position: absolute; + top: calc(var(--titlebar-height) + 22px); + left: 50%; + z-index: 70; + display: grid; + place-items: center; + width: 38px; + height: 38px; + border-radius: 12px; + padding: 0; + opacity: 0; + pointer-events: none; + color: #5e87c3; + background: + radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.98), transparent 38%), + radial-gradient(circle at 70% 82%, rgba(168, 237, 255, 0.36), transparent 46%), + rgba(255, 255, 255, 0.72); + transform: translateX(-50%); + transition: + opacity 320ms ease 160ms, + transform 280ms cubic-bezier(0.16, 1, 0.3, 1), + background 240ms ease, + color 240ms ease, + box-shadow 240ms ease; +} + +.intelligence-panel.collapsed .panel-icon-toggle { + opacity: 1; + pointer-events: auto; + animation: panelBeacon 3.8s ease-in-out infinite; +} + +.panel-icon-toggle svg { + width: 20px; + height: 20px; +} + +.panel-icon-toggle:hover { + background: rgba(255, 255, 255, 0.94); + color: var(--accent-strong); + box-shadow: 0 12px 24px rgba(84, 130, 199, 0.16); + transform: translate(-50%, -1px); +} + +@keyframes panelBeacon { + 0%, + 100% { + box-shadow: + 0 14px 30px rgba(84, 130, 199, 0.13), + 0 0 0 0 rgba(172, 236, 255, 0.32); + } + + 50% { + box-shadow: + 0 18px 40px rgba(84, 160, 199, 0.22), + 0 0 0 8px rgba(172, 236, 255, 0); + } +} + +@keyframes panelStardust { + to { + background-position: 42px 84px; + } +} + +.panel-header { + padding-right: 0; +} + +.panel-header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.panel-close { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border-radius: 9px; + padding: 0; + color: var(--muted); + box-shadow: none; +} + +.panel-close svg { + width: 17px; + height: 17px; +} + +.model-island { + display: grid; + position: absolute; + right: 14px; + bottom: 58px; + left: 14px; + z-index: 6; + gap: 10px; + border: 1px solid rgba(133, 158, 193, 0.18); + border-radius: 14px; + padding: 12px; + background: + radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.92), transparent 40%), + rgba(250, 253, 255, 0.94); + box-shadow: 0 18px 44px rgba(75, 114, 170, 0.18); +} + +.model-island.compact-model-island { + right: 14px; + bottom: 52px; + left: auto; + width: min(248px, calc(100% - 28px)); + gap: 0; + border-color: rgba(105, 188, 224, 0.24); + border-radius: 999px; + padding: 9px 10px 10px; + background: + radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.98), transparent 42%), + linear-gradient(145deg, rgba(240, 252, 255, 0.96), rgba(255, 255, 255, 0.78)); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.86), + 0 14px 34px rgba(72, 151, 190, 0.16); +} + +.model-island.compact-model-island label { + gap: 4px; + color: #2a7a9f; + font-size: 10px; + font-weight: 860; + letter-spacing: 0.04em; + text-transform: uppercase; +} + +.model-island.compact-model-island select { + height: 30px; + border-color: rgba(99, 174, 214, 0.22); + border-radius: 999px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 249, 255, 0.78)), + rgba(255, 255, 255, 0.84); + color: var(--ink); + font-size: 12px; + font-weight: 820; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 8px 18px rgba(74, 145, 194, 0.1); +} + +.model-heading { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 10px; +} + +.model-heading h2 { + color: var(--ink); + font-size: 13px; + font-weight: 840; +} + +.model-heading p, +.model-heading span, +.model-island label { + color: var(--muted); + font-size: 11px; + font-weight: 720; +} + +.model-heading span { + max-width: 156px; + overflow: hidden; + border: 1px solid rgba(105, 139, 190, 0.16); + border-radius: 999px; + padding: 4px 8px; + background: rgba(255, 255, 255, 0.62); + text-overflow: ellipsis; + white-space: nowrap; +} + +.model-island label { + display: grid; + gap: 6px; +} + +.model-island select { + height: 32px; + border-radius: 9px; + padding: 0 10px; + font-size: 12px; +} + +.frozen-tab { + border-color: rgba(125, 211, 252, 0.34); + background: + radial-gradient(circle at 80% 12%, rgba(255, 255, 255, 0.98), transparent 24%), + linear-gradient(135deg, #ecfeff 0%, #bae6fd 38%, #e0f2fe 66%, #ffffff 100%) !important; + color: #075985; + isolation: isolate; + transition: + transform 90ms ease, + border-color 110ms ease, + background 110ms ease, + box-shadow 110ms ease, + color 90ms ease; +} + +.frozen-tab:hover { + border-color: rgba(14, 165, 233, 0.58); + color: #082f49; + transform: translateY(-1px); +} + +.mode-section { + min-height: 0; +} + +.mode-section .empty-row { + margin-top: 14px; +} + +.citation-list { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-top: 10px; +} + +.citation-list button { + max-width: min(100%, 260px); + height: 26px; + overflow: hidden; + border: 1px solid rgba(145, 166, 195, 0.18); + border-radius: 999px; + padding: 4px 8px; + background: rgba(255, 255, 255, 0.58); + color: #566b86; + font-size: 11px; + font-weight: 700; + box-shadow: none; + text-overflow: ellipsis; + white-space: nowrap; +} + +.citation-list button:hover { + border-color: rgba(79, 174, 202, 0.34); + background: rgba(255, 255, 255, 0.9); + color: var(--accent-strong); +} + +.dialog-backdrop { + position: fixed; + inset: 0; + z-index: 30; + display: grid; + place-items: center; + background: rgba(219, 232, 249, 0.36); + backdrop-filter: blur(18px); +} + +.collection-dialog { + width: min(460px, calc(100vw - 40px)); + border: 1px solid rgba(118, 146, 187, 0.24); + border-radius: 18px; + padding: 18px; + background: + radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.96), transparent 36%), + rgba(250, 253, 255, 0.92); + box-shadow: 0 24px 70px rgba(75, 114, 170, 0.22); +} + +.collection-dialog header, +.collection-dialog footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.collection-dialog header p { + color: var(--muted); + font-size: 11px; + font-weight: 780; +} + +.collection-dialog header h2 { + color: var(--ink); + font-size: 18px; + font-weight: 840; +} + +.collection-dialog header button { + display: grid; + place-items: center; + width: 32px; + height: 32px; + padding: 0; + box-shadow: none; +} + +.collection-dialog header svg { + width: 17px; + height: 17px; +} + +.dialog-fields { + display: grid; + gap: 12px; + margin: 18px 0; +} + +.dialog-fields label { + display: grid; + gap: 6px; + color: var(--muted); + font-size: 12px; + font-weight: 760; +} + +.dialog-fields input, +.dialog-fields textarea { + font-size: 13px; +} + +.dialog-fields input { + height: 38px; + padding: 0 12px; +} + +.dialog-fields textarea { + min-height: 92px; + padding: 10px 12px; + resize: vertical; +} + +.icon-picker { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 8px; +} + +.icon-picker button { + display: grid; + height: 58px; + min-width: 0; + place-items: center; + gap: 4px; + border-color: rgba(122, 154, 196, 0.18); + border-radius: 12px; + padding: 6px; + background: rgba(255, 255, 255, 0.54); + box-shadow: none; +} + +.icon-picker button.active, +.icon-picker button:hover { + border-color: rgba(79, 174, 202, 0.38); + background: + radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.96), transparent 42%), + linear-gradient(145deg, rgba(232, 251, 255, 0.9), rgba(255, 255, 255, 0.72)); + color: var(--accent-strong); +} + +.icon-picker svg { + width: 20px; + height: 20px; +} + +.icon-picker span { + max-width: 100%; + overflow: hidden; + font-size: 10px; + font-weight: 740; + text-overflow: ellipsis; + white-space: nowrap; +} + +.delete-copy { + margin: 20px 0; + color: #33455f; + font-size: 14px; + line-height: 1.5; +} + +.delete-copy strong { + color: var(--ink); + font-weight: 820; +} + +.primary-button, +.danger-primary { + border-color: rgba(76, 151, 190, 0.4); + background: + radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.95), transparent 36%), + linear-gradient( + 145deg, + rgba(229, 252, 255, 0.96), + rgba(118, 196, 229, 0.94) 48%, + rgba(54, 129, 188, 0.92) + ); + color: #ffffff; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.62), + 0 12px 26px rgba(52, 139, 184, 0.16); + text-shadow: 0 1px 8px rgba(26, 80, 121, 0.25); +} + +.danger-primary { + border-color: rgba(184, 91, 89, 0.25); + background: linear-gradient(180deg, #d87a78, #b85b59); +} + +button:disabled, +button:disabled:hover { + border-color: rgba(121, 144, 176, 0.18); + background: + radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.7), transparent 42%), + linear-gradient(145deg, rgba(233, 239, 246, 0.72), rgba(218, 228, 238, 0.62)); + color: rgba(77, 95, 120, 0.58); + box-shadow: none; + cursor: not-allowed; + opacity: 0.5; + text-shadow: none; +} + +.history-controls button:disabled, +.history-controls button:disabled:hover { + color: rgba(92, 111, 138, 0.48); +} + +@media (max-width: 1120px) { + .saved-shelves { + grid-template-columns: minmax(0, 1fr); + } + + .saved-shelves .iceberg-band { + border-top: 1px solid rgba(143, 165, 196, 0.18); + border-left: 0; + } + + .crystallizer-header { + align-items: stretch; + flex-direction: column; + gap: 12px; + } + + .crystallizer-brand { + min-width: 0; + } + + .crystallizer-search { + width: 100%; + } + + .crystallizer-body { + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr) 260px; + } + + .crystallizer-dock { + border-top: 1px solid rgba(125, 211, 252, 0.26); + border-left: 0; + } + + .canvas-layer-hud { + top: 54px; + right: 12px; + max-width: calc(100% - 24px); + overflow-x: auto; + } + + .canvas-layer-hud.layer-strip.compact button { + flex: 0 0 auto; + } + + .crystallizer-detail { + display: none; + } + + .knowledge-band .collection-list { + grid-template-columns: minmax(0, 1fr); + } + + .tab-chip { + flex-basis: 138px; + min-width: 84px; + max-width: min(190px, 33%); + } +} diff --git a/src/renderer/src/assets/styles/start-page.css b/src/renderer/src/assets/styles/start-page.css new file mode 100644 index 0000000..f4cd21c --- /dev/null +++ b/src/renderer/src/assets/styles/start-page.css @@ -0,0 +1,370 @@ +.start-page { + position: absolute; + inset: var(--top-bar-height) 0 0; + isolation: isolate; + display: grid; + min-height: 0; + place-items: stretch; + overflow: hidden; + padding: clamp(18px, 3.2vh, 34px) clamp(28px, 5vw, 76px); +} + +.start-page-inner { + position: relative; + z-index: 1; + display: grid; + width: min(860px, 100%); + height: 100%; + max-height: 100%; + align-content: center; + justify-self: center; + justify-items: center; + gap: clamp(12px, 2vh, 22px); + min-height: 0; +} + +.start-mark { + display: grid; + place-items: center; + width: clamp(170px, 28vh, 292px); + height: clamp(170px, 28vh, 292px); + opacity: 1; +} + +.start-mark img { + width: 100%; + height: 100%; + object-fit: contain; + user-select: none; +} + +.start-search { + display: flex; + width: min(760px, 100%); + gap: 10px; +} + +.start-search input { + flex: 1 1 auto; + min-width: 0; + height: 48px; + border: 1px solid rgba(145, 166, 195, 0.28); + border-radius: 14px; + padding: 0 18px; + background: rgba(255, 255, 255, 0.78); + color: var(--ink); + font-size: 14px; + font-weight: 600; + box-shadow: 0 12px 30px rgba(94, 132, 185, 0.1); + transition: + border-color 160ms ease, + box-shadow 160ms ease, + background 160ms ease; +} + +.start-search input:focus { + border-color: rgba(86, 139, 218, 0.5); + background: rgba(255, 255, 255, 0.94); + box-shadow: 0 14px 34px rgba(74, 145, 194, 0.16); + outline: none; +} + +.start-search button { + flex: 0 0 auto; + height: 48px; + border-radius: 14px; + padding: 0 22px; + font-size: 13px; + font-weight: 800; +} + +.start-empty { + max-width: 520px; + margin: 0; + color: var(--muted); + font-size: 13px; + font-weight: 650; + text-align: center; +} + +.start-portals { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + gap: 12px; + max-height: clamp(112px, 22vh, 190px); + overflow: auto; + padding: 2px 4px 10px; + scrollbar-color: rgba(82, 178, 219, 0.34) transparent; + scrollbar-width: thin; +} + +.start-portals::-webkit-scrollbar { + width: 7px; +} + +.start-portals::-webkit-scrollbar-track { + background: transparent; +} + +.start-portals::-webkit-scrollbar-thumb { + border-radius: 999px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.22)), + rgba(82, 178, 219, 0.34); +} + +@media (max-height: 760px) { + .start-page { + padding-block: 16px; + } + + .start-page-inner { + gap: 10px; + } + + .start-mark { + width: clamp(128px, 22vh, 178px); + height: clamp(128px, 22vh, 178px); + } + + .start-page-hero-copy h1 { + font-size: clamp(31px, min(4.2vw, 5.8vh), 48px); + } + + .start-search input, + .start-search button { + height: 44px; + } + + .start-portals { + max-height: 96px; + } +} + +.start-portal { + display: grid; + width: 132px; + height: 118px; + justify-items: center; + gap: 7px; + border-radius: 16px; + padding: 13px 10px 10px; + border: 1px solid + color-mix(in srgb, var(--portal-tint, var(--accent)) 28%, rgba(104, 140, 190, 0.22)); + background: + radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 48%), + radial-gradient( + circle at 88% 90%, + color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent), + transparent 42% + ), + rgba(255, 255, 255, 0.58); + color: var(--ink); + box-shadow: 0 12px 28px rgba(94, 132, 185, 0.08); + transition: + transform 160ms ease, + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease; +} + +.start-portal:hover { + border-color: color-mix( + in srgb, + var(--portal-tint, var(--accent)) 46%, + rgba(255, 255, 255, 0.46) + ); + box-shadow: 0 6px 14px + color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, rgba(62, 132, 163, 0.12)); + transform: translateY(-2px); +} + +.start-portal span { + display: grid; + place-items: center; + width: 38px; + height: 40px; + border-radius: 12px; + background: + radial-gradient(circle at 35% 22%, #ffffff, transparent 44%), + linear-gradient(145deg, #dff9ff, #ffffff); + color: var(--accent-strong); + font-family: var(--font-old); + font-size: 18px; + font-weight: 700; +} + +.start-portal strong, +.start-portal small { + max-width: 100%; + overflow: hidden; +} + +.start-portal strong { + font-size: 11px; + font-weight: 900; + line-height: 1.1; + white-space: normal; + word-break: break-word; +} + +.start-portal small { + color: var(--muted); + font-size: 10px; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.hub-shortcut { + position: relative; + min-width: 0; + transition: + opacity 180ms ease, + transform 260ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.hub-shortcut.dragging { + opacity: 0.52; + transform: scale(0.985); +} + +.hub-shortcut.drop-target .hub-launch { + border-color: color-mix(in srgb, var(--portal-tint, var(--accent)) 54%, rgba(255, 255, 255, 0.5)); + box-shadow: + 0 18px 36px color-mix(in srgb, var(--portal-tint, var(--accent)) 22%, rgba(62, 132, 163, 0.12)), + 0 0 0 4px color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent); + transform: translateY(-2px) scale(1.018); +} + +.hub-launch { + display: grid; + width: 100%; + height: 70px; + grid-template-columns: 28px minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr) auto; + align-items: center; + justify-items: stretch; + column-gap: 8px; + row-gap: 2px; + border-radius: 8px; + padding: 8px 9px; + border-color: color-mix( + in srgb, + var(--portal-tint, var(--accent)) 28%, + rgba(104, 140, 190, 0.22) + ); + background: + radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.96), transparent 48%), + radial-gradient( + circle at 88% 90%, + color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, transparent), + transparent 42% + ), + rgba(255, 255, 255, 0.58); + color: var(--ink); + text-align: left; + box-shadow: 0 10px 22px rgba(94, 132, 185, 0.08); + transition: + transform 160ms ease, + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease; +} + +.hub-launch:hover { + border-color: color-mix( + in srgb, + var(--portal-tint, var(--accent)) 46%, + rgba(255, 255, 255, 0.46) + ); + background: + radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98), transparent 48%), + radial-gradient( + circle at 88% 90%, + color-mix(in srgb, var(--portal-tint, var(--accent)) 24%, transparent), + transparent 42% + ), + rgba(255, 255, 255, 0.86); + box-shadow: 0 6px 14px + color-mix(in srgb, var(--portal-tint, var(--accent)) 18%, rgba(62, 132, 163, 0.12)); + transform: translateY(-1px); +} + +.hub-launch span { + display: grid; + place-items: center; + grid-row: 1 / -1; + width: 28px; + height: 28px; + border-radius: 8px; + background: + radial-gradient(circle at 35% 22%, #ffffff, transparent 44%), + linear-gradient(145deg, #dff9ff, #ffffff); + color: var(--accent-strong); + font-family: var(--font-old); + font-size: 14px; + font-weight: 700; +} + +.hub-launch strong, +.hub-launch small { + max-width: 100%; + overflow: hidden; +} + +.hub-launch strong { + display: -webkit-box; + font-size: 11px; + font-weight: 900; + line-height: 1.1; + white-space: normal; + word-break: normal; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; +} + +.hub-launch small { + color: var(--muted); + font-size: 9px; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; +} + +.hub-delete { + position: absolute; + top: 5px; + right: 5px; + display: grid; + place-items: center; + width: 20px; + height: 20px; + border-radius: 8px; + padding: 0; + opacity: 0; + background: rgba(255, 255, 255, 0.78); + color: var(--muted); + box-shadow: none; + transition: + opacity 140ms ease, + color 140ms ease, + background 140ms ease; +} + +.hub-shortcut:hover .hub-delete, +.hub-delete:focus-visible { + opacity: 1; +} + +.hub-delete:hover { + color: var(--danger); +} + +.hub-delete svg { + width: 11px; + height: 11px; +} diff --git a/src/renderer/src/components/ModelSetupModal.tsx b/src/renderer/src/components/ModelSetupModal.tsx index 625e8d6..be48de4 100644 --- a/src/renderer/src/components/ModelSetupModal.tsx +++ b/src/renderer/src/components/ModelSetupModal.tsx @@ -136,176 +136,185 @@ export function ModelSetupModal({ return (
-
-
+ +
+
+
+ + {complete + ? 'Ready' + : busy + ? 'Installing' + : progress.length + ? 'Prepared' + : 'Waiting'} + + + {progressTotal + ? `${formatBytes(progressDownloaded)} / ${formatBytes(progressTotal)}` + : complete + ? 'Complete' + : hasNewChatSelection || !coreInstalled + ? 'Ready' + : 'Nothing to install'} + +
+
+ +
-
- - -
- + {progress.length > 0 ? ( +
+ {progress.map((item) => { + const itemPercent = + item.status === 'complete' || item.status === 'skipped' + ? 100 + : progressPercent(item.downloadedBytes, item.totalBytes) + return ( +
+ + + {item.label} + {item.message ?? item.filename} + + + {item.totalBytes + ? `${formatBytes(item.downloadedBytes)} / ${formatBytes(item.totalBytes)}` + : formatBytes(item.downloadedBytes)} + + +
+ ) + })} +
+ ) : null} +
+ +
+ + +
+
+
) }