/* ════════════════════════════════════════════════════════════════════
styles/workspace.css — Workspace surface
Liquid glass, desktop only, fully self-contained.
Layer 1 — ISOLATION. When body[data-active-tab="workspace"] is on,
hide every other engine's chrome (input bar, mode pill,
tabs row, controls, gallery, etc.) so the workspace surface
is the only thing on screen.
Layer 2 — LAYOUT. Sidebar (240px) + main content. Max-width 1200px.
Layer 3 — COMPONENTS. All .ws-* scoped. Cards, buttons, badges,
stats, connector grid, empty states.
Loaded BEFORE _overrides.css so the override layer stays the
absolute cascade tail.
════════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────────
GLOBAL POPUP-OPEN STATE
When any modal / drawer / dialog is on screen, the platform's popup-
stack manager (src/workspace.js → SOJ.popupStack) sets body.sj-popup-
open. We hide the entire workspace + every engine surface so only the
animated theme background remains visible behind the popup. Removed
when the last popup closes — page reappears underneath.
──────────────────────────────────────────────────────────────────── */
body.sj-popup-open #workspacePage,
body.sj-popup-open #chatEngine,
body.sj-popup-open #musicStudioInline,
body.sj-popup-open #vibeCodeEngine,
body.sj-popup-open .gallery,
body.sj-popup-open #gallery,
body.sj-popup-open .canvas-timeline,
body.sj-popup-open .messages,
body.sj-popup-open .input-bar,
body.sj-popup-open #inputBar,
body.sj-popup-open .mode-pill-top,
body.sj-popup-open #modePillTop,
body.sj-popup-open .controls {
visibility: hidden !important;
}
/* Keep header strip + theme background visible so user knows where they
are — only the *interactive* engine surfaces fade behind the popup. */
/* ────────────────────────────────────────────────────────────────────
LAYER 1 — ISOLATION
──────────────────────────────────────────────────────────────────── */
/* The page section is `hidden` by default. setActiveTab() flips
body[data-active-tab="workspace"] when the user clicks the tab.
These two rules ensure clean show/hide with the universal [hidden]
guard in mind. */
body[data-active-tab="workspace"] #workspacePage[hidden] { display: block !important; }
body:not([data-active-tab="workspace"]) #workspacePage { display: none !important; }
/* HIDE every other engine's UI when Workspace is active. The chat tabs,
bottom input bar, mode pill, visual studio controls, gallery, etc.
are all built into the shared shell — without this, they bleed
through and the workspace looks chaotic. */
body[data-active-tab="workspace"] #inputBar,
body[data-active-tab="workspace"] .input-bar,
body[data-active-tab="workspace"] #modePillTop,
body[data-active-tab="workspace"] .mode-pill-top,
body[data-active-tab="workspace"] .controls,
body[data-active-tab="workspace"] #chatEngine,
body[data-active-tab="workspace"] #musicStudioInline,
body[data-active-tab="workspace"] #vibeCodeEngine,
body[data-active-tab="workspace"] .gallery,
body[data-active-tab="workspace"] #gallery,
body[data-active-tab="workspace"] .canvas-timeline,
body[data-active-tab="workspace"] .standard-result-stage,
body[data-active-tab="workspace"] .staged-loader,
body[data-active-tab="workspace"] .messages,
body[data-active-tab="workspace"] .director-console,
body[data-active-tab="workspace"] .director-summary,
body[data-active-tab="workspace"] .scene-card,
body[data-active-tab="workspace"] .vc-stage,
body[data-active-tab="workspace"] .ms-pane,
body[data-active-tab="workspace"] .cinema-studio,
body[data-active-tab="workspace"] .trim-editor,
body[data-active-tab="workspace"] .stitch-progress,
body[data-active-tab="workspace"] .cast-modal,
body[data-active-tab="workspace"] .ms-mode-toggle,
/* Platform Masters floating launcher — belongs to the agent panel
that lives in Visual Studio surface; Workspace is its own engine. */
body[data-active-tab="workspace"] #sojAgentLauncher,
body[data-active-tab="workspace"] .soj-agent-launcher,
/* Visual Studio canvas nav row (the small pill with ◀ ▦ ▶ at the
bottom-center). Belongs exclusively to VS — has no purpose in
Workspace and bleeds through because it's position:fixed. */
body[data-active-tab="workspace"] #canvasNavRow,
body[data-active-tab="workspace"] .canvas-nav-row,
/* Visual Studio scene-card chip strips that also leak. */
body[data-active-tab="workspace"] #storyChipsTab,
body[data-active-tab="workspace"] .story-chips-tab,
/* Defensive — any agent scrim or composer FAB that escaped its own
surface. None of these belong to Workspace. */
body[data-active-tab="workspace"] .soj-agent-scrim,
body[data-active-tab="workspace"] .vs-composer-fab,
body[data-active-tab="workspace"] .composer-fab {
display: none !important;
}
/* ── Story-board bleed fix (2026-05-29) ──────────────────────────────
`visual-studio.css` line 11482 ships:
[data-theme] .story-board.active { display: flex !important }
…with specificity 30. When a user enters Workspace AFTER ever
touching Story Mode, `.story-board.active` is still on the DOM and
that rule keeps the entire #storyBoard header painted on top of
Workspace — so the "Enter story, name to continue" input plus the
Format and Engine chips bleed through.
To beat 30+!important we need higher specificity. `[data-theme]` +
`body[data-active-tab="workspace"]` + `.story-board.active` = 41,
which wins. We hide the whole storyboard plus every header element
defensively so future story-head additions don't re-leak. */
[data-theme] body[data-active-tab="workspace"] #storyBoard,
[data-theme] body[data-active-tab="workspace"] .story-board,
[data-theme] body[data-active-tab="workspace"] .story-board.active,
[data-theme] body[data-active-tab="workspace"] .story-head,
[data-theme] body[data-active-tab="workspace"] .story-title-input,
[data-theme] body[data-active-tab="workspace"] .story-saved-tag,
[data-theme] body[data-active-tab="workspace"] .story-chip,
[data-theme] body[data-active-tab="workspace"] .story-chip-pop,
[data-theme] body[data-active-tab="workspace"] .story-stitch-btn {
display: none !important;
}
/* The top header (logo + BETA + tabs + coins + account) stays visible —
that's the global nav. We only hide content-area chrome below it. */
/* ────────────────────────────────────────────────────────────────────
LAYER 2 — PAGE LAYOUT
──────────────────────────────────────────────────────────────────── */
.ws-page {
position: fixed;
inset: 45px 0 0 0; /* below global header — moved up another 15px per user request */
overflow: hidden;
color: rgba(255, 255, 255, 0.92);
z-index: 5;
}
.ws-shell {
display: grid;
grid-template-columns: 260px 1fr;
gap: 24px;
height: 100%;
max-width: 100%;
padding: 24px;
box-sizing: border-box;
/* IMPORTANT: min-height:0 lets the grid children participate in
overflow scrolling. Without it the inner panes expand to fit
content and the parent .ws-page (overflow:hidden) just clips
them off-screen with no scrollbar. */
min-height: 0;
}
/* ── Right pane scroll container ────────────────────────────────────
.ws-main is the right side of the grid. It must scroll its own
content vertically while the sidebar stays put. Without this rule
the Connected services list (5000+px tall) was being clipped by
.ws-page and there was no scrollbar anywhere on the page.
The !important + the parent min-height:0 are both required —
grid items have an implicit min-height:auto that ignores the
parent's height clamp without them. */
.ws-main {
overflow-y: auto !important;
overflow-x: hidden !important;
min-height: 0 !important;
/* Fill the parent grid row exactly */
height: 100%;
max-height: 100%;
/* Padded right gutter so cards don't hug the scrollbar */
padding: 8px 28px 40px 8px;
scrollbar-gutter: stable;
/* Smooth-scroll feels right in liquid glass UIs */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* Each section view inside .ws-main is the actual scrolling body —
give it enough room to render its tall content. */
.ws-main > .ws-section {
min-height: 0;
}
/* Same for the sidebar — it had overflow-y: auto already but
needs min-height:0 to actually engage. */
.ws-nav {
min-height: 0;
max-height: 100%;
}
/* Custom thin scrollbar in liquid-glass style */
.ws-main::-webkit-scrollbar { width: 10px; }
.ws-main::-webkit-scrollbar-track { background: transparent; }
.ws-main::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.10);
border: 2px solid transparent;
border-radius: 8px;
background-clip: content-box;
}
.ws-main::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: content-box; }
/* ────────────────────────────────────────────────────────────────────
LAYER 3 — LEFT SIDEBAR
──────────────────────────────────────────────────────────────────── */
.ws-nav {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 24px 60px rgba(0, 0, 0, 0.30);
overflow-y: auto;
}
/* ── 2026-06-05 (K) — collapsible sidebar ──────────────────────────────
The chevron at the top-left collapses the nav to an icon-only rail flush
against the left screen edge; the whole workspace UI stretches to fill.
State class .ws-nav-collapsed lives on #workspacePage (persisted in
localStorage by workspace.js). Pure liquid glass throughout. */
/* The collapse control IS the brand mark — it sits where the ◇ logo was,
beside the "Workspace" title. No extra top row, no extra space. */
.ws-nav__collapse {
appearance: none;
flex: 0 0 38px;
width: 38px; height: 38px;
display: grid; place-items: center;
padding: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.82);
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.ws-nav__collapse:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.08));
color: rgba(255, 255, 255, 1);
}
.ws-nav__collapse-ic { width: 17px; height: 17px; transition: transform 200ms ease; }
/* Collapsed: reclaim the whole screen — rail flush left, shell padding
trimmed, and the 1100px section cap LIFTED so every section's content
stretches across the freed width. (Top inset stays 45px — pulling the
pane under the global header broke the expand click.) */
.ws-page.ws-nav-collapsed .ws-section { max-width: none; }
.ws-page.ws-nav-collapsed .ws-shell {
grid-template-columns: 60px 1fr;
/* Top/bottom padding matches the expanded 24px — the rail and the content
sit at EXACTLY the same height whether open or closed. */
padding: 24px 14px 24px 0;
gap: 14px;
}
.ws-page.ws-nav-collapsed .ws-nav {
padding: 14px 8px;
border-radius: 0 22px 22px 0; /* rail touches the left screen edge */
border-left: none;
align-items: center;
gap: 14px;
/* hug the icons — no dead tail below the last one */
align-self: start;
height: auto;
max-height: 100%;
position: relative;
z-index: 9; /* tooltips float over the main pane */
overflow: visible;
}
.ws-page.ws-nav-collapsed .ws-nav__collapse-ic { transform: rotate(180deg); }
.ws-page.ws-nav-collapsed .ws-nav__brand {
padding: 0 0 10px;
justify-content: center;
}
.ws-page.ws-nav-collapsed .ws-nav__brand-text { display: none; }
.ws-page.ws-nav-collapsed .ws-nav__collapse { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; }
.ws-page.ws-nav-collapsed .ws-nav__sections { width: 100%; }
.ws-page.ws-nav-collapsed .ws-nav__item {
justify-content: center;
gap: 0;
padding: 11px 0;
}
.ws-page.ws-nav-collapsed .ws-nav__label,
.ws-page.ws-nav-collapsed .ws-nav__badge { display: none; }
.ws-page.ws-nav-collapsed .ws-nav__icon { flex: 0 0 17px; width: 17px; height: 17px; }
.ws-page.ws-nav-collapsed .ws-nav__footer { display: none; }
/* Icon-mode tooltip — ONE shared body-level element (workspace.js positions
it). It must live OUTSIDE the frosted nav: a backdrop-filter inside another
backdrop-filter ancestor cannot frost what's behind it, which is why the
::after version read as transparent. Body-level = true liquid glass. */
.ws-nav-tip {
position: fixed;
z-index: 3000;
padding: 7px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(36px) saturate(170%);
-webkit-backdrop-filter: blur(36px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 12px 32px rgba(0, 0, 0, 0.40);
color: rgba(255, 255, 255, 0.97);
font: 500 12px/1 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
transform: translateY(-50%) translateX(-4px);
pointer-events: none;
transition: opacity 130ms ease, transform 130ms ease;
}
.ws-nav-tip.ws-is-on { opacity: 1; transform: translateY(-50%) translateX(0); }
.ws-nav__brand {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 8px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ws-nav__logo {
flex: 0 0 38px;
width: 38px; height: 38px;
border-radius: 12px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
border: 1px solid rgba(255, 255, 255, 0.14);
font: 600 18px/1 ui-serif, Georgia, serif;
color: rgba(255, 255, 255, 0.92);
}
.ws-nav__title {
font: 600 16px/1.2 ui-sans-serif, system-ui;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
.ws-nav__sub {
font: 400 11.5px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.48);
margin: 2px 0 0;
}
.ws-nav__sections {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 4px;
}
.ws-nav__item {
position: relative;
appearance: none;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
background: transparent;
border: 1px solid transparent;
color: rgba(255, 255, 255, 0.62);
font: 500 13px/1.2 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
cursor: pointer;
transition:
background 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
text-align: left;
}
.ws-nav__item:hover {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.90);
}
.ws-nav__item.ws-is-active {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.98);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.ws-nav__icon {
flex: 0 0 16px;
width: 16px; height: 16px;
color: currentColor;
opacity: 0.85;
}
.ws-nav__label {
flex: 1 1 auto;
min-width: 0;
}
.ws-nav__badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
font: 600 10.5px/1 ui-sans-serif, system-ui;
background: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.85);
}
.ws-nav__badge--phase {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.42);
font-size: 9.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.ws-nav__footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ws-nav__hint {
font: 400 11px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.36);
letter-spacing: 0.02em;
}
/* ────────────────────────────────────────────────────────────────────
LAYER 3 — MAIN CONTENT AREA
──────────────────────────────────────────────────────────────────── */
/* (Duplicate .ws-main rule removed — used to set
`overflow-y: auto; overflow-x: hidden` which the CSS minifier
combined into `overflow: hidden auto` shorthand, defeating the
!important longhand earlier in the file and leaving the right
pane unscrollable. Padding moved into the consolidated rule above.) */
.ws-section {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Dashboard overview — use more horizontal canvas at rest (2026-06-13). */
.ws-main > .ws-section[data-ws-section-view="overview"] {
max-width: min(1560px, 100%);
}
.ws-section[hidden] { display: none !important; }
/* 2026-06-04 (K) — CONTAINED SCROLL.
The page is viewport-locked (.ws-page fixed). The right pane (.ws-main) is a
FIXED FRAME — it never scrolls. Each SECTION is its own scroll viewport, so
the scrollbar is contained to the section box (the container the content is
in), NOT the full pane / drawer height. The section header is sticky-pinned
and made an OPAQUE frosted lid so body content scrolling under it is hidden —
it never slides up behind the translucent title. */
.ws-main {
overflow: hidden !important; /* fixed frame — the section scrolls, not the pane */
padding: 8px 16px 8px 8px !important;
}
.ws-main > .ws-section {
height: 100%;
max-height: 100%;
min-height: 0;
overflow: hidden; /* the body viewport scrolls, not the section */
}
/* 2026-06-05 (K) — SCROLL DISSOLVE v2 (no masks on content ancestors!).
The header is a normal glass card OUTSIDE the scroll viewport, so content
can physically never slide behind it. Everything after the header lives in
.ws-section__viewport > .ws-section__scroll (wrapped at boot by
workspace.js). The dissolve is a VEIL: an absolutely-positioned sibling
strip at the top of the viewport carrying its own backdrop-filter + its
own fading mask — content scrolling up melts into frost and vanishes.
CRITICAL: never put mask-image on .ws-section__scroll or any ancestor of
the cards — it kills backdrop-filter for every descendant and the whole
panel goes transparent (live incident 2026-06-05). */
.ws-section__viewport {
flex: 1 1 auto;
min-height: 0;
position: relative;
display: flex;
flex-direction: column;
/* 2026-06-05 (K): the gap between the top bar and whatever sits below it
is exactly 5px across ALL workspace sections — both at rest and as the
dissolve point. Section gap is 20px, so pull the viewport up 15px. */
margin-top: -15px;
}
.ws-section__scroll {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 20px; /* same rhythm as .ws-section */
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
padding-bottom: 28px;
}
.ws-section__scroll::-webkit-scrollbar { width: 10px; }
.ws-section__scroll::-webkit-scrollbar-track { background: transparent; }
.ws-section__scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
}
.ws-section__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); background-clip: content-box; }
/* The veil — progressive frost. INVISIBLE at rest (content lives at its
natural position, no reserved space); fades in only once the user scrolls,
so departing content melts into it. Full-strength blur at its top edge
fading to nothing at its bottom; pointer-transparent; clear of the
scrollbar lane. workspace.js toggles .is-on at scrollTop > 0. */
.ws-section__veil {
position: absolute;
top: 0; left: 0; right: 12px;
height: 48px;
z-index: 6;
pointer-events: none;
opacity: 0;
transition: opacity 220ms ease;
backdrop-filter: blur(26px) saturate(160%);
-webkit-backdrop-filter: blur(26px) saturate(160%);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 25%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 25%, transparent 100%);
}
.ws-section__veil.is-on { opacity: 1; }
/* Self-managing sections (own internal scroll + pinned footer) must NOT also
scroll at the wrapper level — they fill the frame and scroll inside. */
.ws-main > .ws-section[data-ws-section-view="command-center"] .ws-section__scroll,
.ws-main > .ws-section[data-ws-section-view="files"] .ws-section__scroll {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.ws-main > .ws-section[data-ws-section-view="command-center"] .ws-section__veil,
.ws-main > .ws-section[data-ws-section-view="files"] .ws-section__veil { display: none; }
.ws-section[data-ws-section-view="command-center"] [data-cc-body] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* #wsFilesMount is an unstyled host div between the scroll frame and .wf —
it must pass the flex chain through or .wf collapses to content height
and dead space appears below the Files UI (K 2026-06-06). */
.ws-section[data-ws-section-view="files"] #wsFilesMount { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ws-section[data-ws-section-view="files"] .wf { flex: 1 1 auto; min-height: 0; }
/* 2026-06-05 (K) — COMPACT ONE-ROW HEADS, every workspace section: title and
description sit side by side on one line (sub ellipsizes), vertical padding
trimmed, head buttons shrunk to fit the single bar. Max working space. */
.ws-section__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 13px 22px;
border-radius: 18px;
/* Pure liquid glass — matches the cards below */
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 32px rgba(0, 0, 0, 0.22);
/* The contained-scroll behaviour (sticky opaque lid + section-level scroll)
is defined in the "CONTAINED SCROLL" block below, scoped to .ws-main. */
flex: 0 0 auto;
}
.ws-section__head > div:first-child {
display: flex;
align-items: baseline;
gap: 16px;
flex: 1 1 auto;
min-width: 0;
}
.ws-section__title {
font: 600 22px/1.15 var(--sj-font-display, ui-sans-serif, system-ui);
letter-spacing: -0.025em;
color: rgba(255, 255, 255, 0.97);
margin: 0;
flex: 0 0 auto;
}
.ws-section__sub {
font: 400 14px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
margin: 0;
flex: 1 1 auto;
min-width: 0;
max-width: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Head buttons fit the single compact bar (double-class beats the
flex-wrap:wrap in workspace-routines.css regardless of load order) */
.ws-section__head .ws-section__head-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.ws-section__head .ws-section__head-actions .ws-btn {
padding: 7px 12px;
font-size: 12px;
white-space: nowrap;
}
.ws-phase-tag {
flex: 0 0 auto;
align-self: center;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
font: 500 11px/1 ui-sans-serif, system-ui;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — STATS GRID (Overview header)
──────────────────────────────────────────────────────────────────── */
.ws-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ws-stat {
padding: 18px 18px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 32px rgba(0, 0, 0, 0.22);
transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms ease;
}
.ws-stat:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.14);
}
.ws-stat__num {
font: 600 32px/1 var(--sj-font-display, ui-sans-serif, system-ui);
letter-spacing: -0.03em;
color: rgba(255, 255, 255, 0.97);
margin-bottom: 6px;
}
.ws-stat__lab {
font: 400 12.5px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — TWO-COLUMN GRID
──────────────────────────────────────────────────────────────────── */
.ws-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — CARDS
──────────────────────────────────────────────────────────────────── */
.ws-card {
padding: 20px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 32px rgba(0, 0, 0, 0.22);
}
.ws-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.ws-card__title {
font: 600 14px/1.2 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
.ws-card__pill {
flex: 0 0 auto;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font: 500 11px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — QUICK ACTIONS LIST (Overview)
──────────────────────────────────────────────────────────────────── */
.ws-quick {
display: flex;
flex-direction: column;
gap: 8px;
}
.ws-quick__item {
appearance: none;
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.88);
cursor: pointer;
text-align: left;
transition:
background 160ms ease,
border-color 160ms ease,
transform 100ms ease;
}
.ws-quick__item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
}
.ws-quick__item:active { transform: translateY(1px); }
.ws-quick__icon {
flex: 0 0 36px;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
display: grid; place-items: center;
font: 500 16px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.85);
}
.ws-quick__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ws-quick__title {
font: 500 13.5px/1.2 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.94);
}
.ws-quick__sub {
font: 400 12px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.50);
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — INSIGHTS / WEEK ROWS
──────────────────────────────────────────────────────────────────── */
.ws-week {
display: flex;
flex-direction: column;
}
.ws-week__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ws-week__row:last-child { border-bottom: 0; }
.ws-week__lab {
font: 400 13px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.62);
}
.ws-week__val {
font: 500 14px/1.2 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.01em;
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — EMPTY STATES
──────────────────────────────────────────────────────────────────── */
.ws-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 36px 24px;
gap: 8px;
}
.ws-empty__icon {
width: 44px; height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid; place-items: center;
font: 500 22px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 6px;
}
.ws-empty__text {
font: 500 14px/1.45 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.82);
margin: 0;
max-width: 460px;
}
.ws-empty__sub {
font: 400 12.5px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.48);
margin: 0;
max-width: 460px;
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — CONNECTOR GRID (Connected section)
──────────────────────────────────────────────────────────────────── */
/* ── Category section: ONE glass tile per category. Holds the header
+ the grid of connector cards inside it. The cards themselves
become flat surfaces inside the glass so the whole category
reads as a single object. ────────────────────────────────────── */
.ws-cat-section {
position: relative;
margin: 16px 0;
padding: 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(28px) saturate(170%);
-webkit-backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 16px 36px rgba(0, 0, 0, 0.28);
}
/* Horizontal row list (2026-06-04 per K): one compact full-width row
per connector — logo | name | description | action button — instead
of the old 3-per-row tall card grid. Denser, scannable, no dead
space; the description fills the middle and the action anchors the
right edge like a settings list. */
.ws-connector-grid {
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 4px 4px;
}
.ws-connector-card {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 8px 10px 8px 12px;
min-height: 52px;
border-radius: 12px;
/* Flatter — the parent .ws-cat-section already carries the glass.
We give the card a subtle hairline so children read as distinct
items inside the tile without double-glassing. */
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition:
background-color 160ms ease,
border-color 160ms ease;
}
.ws-connector-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.14);
}
.ws-connector-card__logo {
flex: 0 0 34px;
width: 34px; height: 34px;
border-radius: 9px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
border: 1px solid rgba(255, 255, 255, 0.10);
font: 600 13px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.95);
}
.ws-connector-card__title {
/* Fixed name column so every row's description starts on the same
vertical line — the list reads like a table without being one. */
flex: 0 0 168px;
font: 600 13.5px/1.25 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.95);
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-connector-card__health {
/* Inline pill between the description and the action button. */
position: static;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 999px;
font: 600 9px/1 ui-sans-serif, system-ui;
letter-spacing: 0.05em;
text-transform: uppercase;
z-index: 2;
white-space: nowrap;
/* Heavier glass so it reads cleanly when the title row sits behind it */
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
}
.ws-connector-card__health--active { background: rgba(72, 187, 120, 0.18); color: #b9f6d6; border: 1px solid rgba(72, 187, 120, 0.30); }
.ws-connector-card__health--idle { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.50); border: 1px solid rgba(255, 255, 255, 0.10); }
.ws-connector-card__health--needs_reauth { background: rgba(245, 158, 11, 0.18); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.30); }
.ws-connector-card__health--pending { background: rgba(245, 158, 11, 0.18); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.30); }
.ws-connector-card__health--suspended { background: rgba(244, 63, 94, 0.20); color: #fecaca; border: 1px solid rgba(244, 63, 94, 0.34); }
.ws-connector-card__health--expired { background: rgba(244, 63, 94, 0.20); color: #fecaca; border: 1px solid rgba(244, 63, 94, 0.34); }
.ws-connector-card__health::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
}
.ws-connector-card__blurb {
/* Single-line middle column; ellipsis past the available width.
Search still matches the full description text server-side. */
flex: 1 1 auto;
min-width: 0;
font: 400 12.5px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.58);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-connector-card__actions {
display: flex;
gap: 8px;
padding-top: 0;
margin-left: auto;
flex-shrink: 0;
}
/* In row layout the buttons must not stretch full-width; give them a
consistent min width so Connect / Disconnect align down the list. */
.ws-connector-card__actions .ws-btn {
width: auto;
min-width: 104px;
padding-top: 7px;
padding-bottom: 7px;
font-size: 12.5px;
}
/* Narrow screens: drop the description, let the name take the space —
logo + name + button still make a complete, tappable row. */
@media (max-width: 720px) {
.ws-connector-card__blurb { display: none; }
.ws-connector-card__title { flex: 1 1 auto; }
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — BUTTONS
──────────────────────────────────────────────────────────────────── */
/* ─── BUTTONS — pure liquid glass, no solid fills, no colour ───── */
.ws-btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 16px;
border-radius: 11px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
color: rgba(255, 255, 255, 0.92);
font: 600 12.5px/1 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, transform 100ms ease, box-shadow 140ms ease;
white-space: nowrap;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 4px 12px rgba(0, 0, 0, 0.12);
}
.ws-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 6px 16px rgba(0, 0, 0, 0.18);
}
.ws-btn:active { transform: translateY(1px); }
.ws-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Ghost — lighter, no inset highlight, for secondary actions */
.ws-btn--ghost {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.72);
box-shadow: none;
}
.ws-btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
/* Destructive — same glass recipe, just a slightly darker border
so it reads as "stop and think" without breaking the no-colour rule */
.ws-btn--danger {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.20);
color: rgba(255, 255, 255, 0.85);
}
.ws-btn--danger:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.30);
}
/* Primary — pure liquid glass with stronger inset highlight + thicker
border so it reads as "the recommended action" without being a solid
white block. */
.ws-btn--primary {
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.32);
color: rgba(255, 255, 255, 0.98);
font-weight: 700;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.28) inset,
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 6px 18px rgba(0, 0, 0, 0.20);
}
.ws-btn--primary:hover {
background: rgba(255, 255, 255, 0.20);
border-color: rgba(255, 255, 255, 0.44);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.36) inset,
0 0 0 1px rgba(255, 255, 255, 0.10) inset,
0 8px 24px rgba(0, 0, 0, 0.26);
}
.ws-btn--block {
width: 100%;
justify-content: center;
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — CONFIRMATION CARD (modal-ish, for actions)
──────────────────────────────────────────────────────────────────── */
.ws-confirm-card {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px;
border-radius: 22px;
/* PURE liquid glass — no dark fill */
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 40px 100px rgba(0, 0, 0, 0.40),
0 8px 32px rgba(0, 0, 0, 0.24);
width: min(520px, calc(100vw - 48px));
}
.ws-confirm-card__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ws-confirm-card__icon {
width: 36px; height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.12);
display: grid; place-items: center;
font: 600 16px/1 ui-sans-serif, system-ui;
}
.ws-confirm-card__title {
font: 600 14.5px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
margin: 0;
}
.ws-confirm-card__subtitle {
font: 400 12.5px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.60);
margin: 4px 0 0;
}
.ws-confirm-card__field-row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 6px 14px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font: 400 12px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
}
.ws-confirm-card__field-row:last-child { border-bottom: 0; }
.ws-confirm-card__field-row > b {
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
}
.ws-confirm-card__preview {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
font: 400 12.5px/1.55 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.88);
white-space: pre-wrap;
word-wrap: break-word;
max-height: 240px;
overflow: auto;
}
.ws-confirm-card__actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — INLINE CONNECT + SUCCESS CHIP + EXAMPLES PANEL
(used from chat/other engines, also styled here for portability)
──────────────────────────────────────────────────────────────────── */
.ws-inline-connect {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
margin: 8px 0;
}
.ws-inline-connect__icon {
flex: 0 0 32px;
width: 32px; height: 32px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.10);
display: grid; place-items: center;
font: 600 13px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.85);
}
.ws-inline-connect__text {
flex: 1 1 auto;
font: 400 13px/1.45 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.78);
}
.ws-inline-connect__text > b {
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
}
.ws-inline-connect__dismiss {
flex: 0 0 auto;
appearance: none;
border: 0;
background: transparent;
color: rgba(255, 255, 255, 0.50);
font: 600 16px/1 ui-sans-serif, system-ui;
cursor: pointer;
padding: 6px;
border-radius: 6px;
}
.ws-inline-connect__dismiss:hover {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.92);
}
.ws-success-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 8px;
border-radius: 999px;
background: rgba(72, 187, 120, 0.16);
border: 1px solid rgba(72, 187, 120, 0.32);
color: #cdf5e0;
font: 600 12px/1 ui-sans-serif, system-ui;
text-decoration: none;
max-width: 360px;
transition: background 140ms ease;
}
.ws-success-chip:hover { background: rgba(72, 187, 120, 0.26); }
.ws-success-chip::before {
content: '';
width: 14px; height: 14px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
rgba(72, 187, 120, 0.85);
flex: 0 0 14px;
}
.ws-success-chip__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ws-examples-panel {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
margin-top: 12px;
}
.ws-examples-panel__title {
font: 600 11px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0;
}
.ws-examples-panel__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ws-examples-panel__item {
font: 400 13px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.85);
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
transition: background 120ms ease;
text-align: left;
}
.ws-examples-panel__item:hover { background: rgba(255, 255, 255, 0.10); }
.ws-examples-panel__item::before { content: '"'; color: rgba(255, 255, 255, 0.40); margin-right: 4px; }
.ws-examples-panel__item::after { content: '"'; color: rgba(255, 255, 255, 0.40); margin-left: 4px; }
/* ────────────────────────────────────────────────────────────────────
COMPONENTS — SKELETON LOADER
──────────────────────────────────────────────────────────────────── */
.ws-skeleton {
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 40%,
rgba(255, 255, 255, 0.04) 80%);
background-size: 200% 100%;
animation: ws-shimmer 1.6s linear infinite;
border-radius: 10px;
}
.ws-skeleton--card {
height: 150px;
border-radius: 16px;
}
@keyframes ws-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ────────────────────────────────────────────────────────────────────
ACCESSIBILITY — REDUCED MOTION
──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ws-connector-card,
.ws-stat,
.ws-quick__item,
.ws-nav__item,
.ws-btn,
.ws-success-chip { transition: none; }
.ws-skeleton { animation: none; }
}
/* ────────────────────────────────────────────────────────────────────
FOCUS STATES
──────────────────────────────────────────────────────────────────── */
.ws-btn:focus-visible,
.ws-quick__item:focus-visible,
.ws-nav__item:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.50);
outline-offset: 2px;
}
/* ── Connector toolbar (search + stats) — workspace inline grid ────── */
.ws-connector-toolbar {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
padding: 12px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
backdrop-filter: blur(12px);
}
.ws-connector-search {
flex: 1;
background: transparent;
border: 0; outline: none;
color: #fff;
font: 500 14px/1.4 ui-sans-serif, system-ui, sans-serif;
padding: 6px 4px;
}
.ws-connector-search::placeholder { color: rgba(255,255,255,0.42); }
.ws-connector-stats {
display: flex; align-items: center; gap: 6px;
font: 500 12.5px/1 ui-sans-serif, system-ui, sans-serif;
color: rgba(255,255,255,0.62);
white-space: nowrap;
}
.ws-connector-stats__dot { opacity: 0.55; }
.ws-connector-body {
display: flex; flex-direction: column; gap: 22px;
}
.ws-connector-cat-label {
font: 600 11px/1.2 ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin: 4px 4px -6px;
}
/* ── Liquid-glass category header (new) ──────────────────────────────
Replaces the small uppercase text label with a full-width pill
carrying the category name + (optionally) a master "Connect X" button
that fires a single OAuth flow covering every sub-service. */
.ws-cat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px 14px;
margin: 0 0 6px;
/* Inside the .ws-cat-section glass tile — flat strip, no own glass. */
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 0;
}
.ws-cat-header__title {
font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.92);
}
/* Bigger title for the "family" categories (Google, Microsoft) that
carry the master Connect button — they read like section titles. */
.ws-cat-header--family .ws-cat-header__title {
font-size: 17px;
letter-spacing: -0.005em;
text-transform: none;
color: rgba(255, 255, 255, 0.96);
}
.ws-cat-header__bulk-btn {
padding: 9px 18px;
font-size: 13px;
font-weight: 600;
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
}
.ws-cat-header__bulk-btn--done {
background: rgba(72, 187, 120, 0.18);
border-color: rgba(72, 187, 120, 0.30);
color: #b9f6d6;
cursor: default;
}
/* Disconnect variant — soft red glass instead of green */
.ws-cat-header__bulk-btn--disconnect {
color: rgba(255, 200, 200, 0.92);
border-color: rgba(244, 63, 94, 0.30);
background: rgba(244, 63, 94, 0.08);
}
.ws-cat-header__bulk-btn--disconnect:hover {
background: rgba(244, 63, 94, 0.14);
border-color: rgba(244, 63, 94, 0.42);
}
/* ── Official brand logos (Simple Icons via CDN) ──────────────────── */
.ws-connector-card__logo-img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
/* Default white-ish drop shadow so logos pop against dark glass */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
/* When cdn.simpleicons.org returns 404 for a deprecated enterprise
slug (Slack, LinkedIn, Microsoft suite, Amazon, Salesforce, Canva,
etc.), buildLogoNode swaps the ![]()
for a with this class.
We render the jsdelivr SVG as a CSS mask, then paint the brand
color through it via background-color — so every logo keeps its
official brand color instead of being a flat white silhouette.
--brand-color and --logo-url are set inline per element from
LOGO_SLUGS. */
.ws-connector-card__logo-img--mask {
background-color: var(--brand-color, #ffffff);
-webkit-mask: var(--logo-url) center / contain no-repeat;
mask: var(--logo-url) center / contain no-repeat;
/* The drop-shadow from the .ws-connector-card__logo-img base rule
uses filter, which would re-color the mask. Remove it here and
add a separate text-shadow-equivalent if needed. */
filter: none;
}
/* ── ws-dock retired (ws21) ──────────────────────────────────────────
The "N unread · N connected · Workspace ›" pill at the top of every
engine is gone — user is designing their own status bar. This rule
ensures any leftover DOM from a cached workspace-dock.js can't
render even if it somehow loads from a stale cache. */
.ws-dock,
.ws-dock__chip,
.ws-dock__link,
.ws-dock__panel,
[data-ws-dock] .ws-dock {
display: none !important;
}
/* ── Liquid-glass dialog (wsDialog helper — confirm/alert/warn) ────── */
.ws-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
place-items: center;
/* Transparent — body.sj-popup-open hides .ws-page so only the
animated theme background shows through behind the dialog. */
background: transparent;
animation: wsDialogBackdropIn 180ms cubic-bezier(.2,.7,.2,1);
}
@keyframes wsDialogBackdropIn { from { opacity: 0 } to { opacity: 1 } }
.ws-dialog {
width: min(440px, calc(100vw - 48px));
padding: 22px;
border-radius: 22px;
display: flex;
flex-direction: column;
gap: 14px;
/* PURE liquid glass — frosted, no dark fill */
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 40px 100px rgba(0, 0, 0, 0.40),
0 8px 32px rgba(0, 0, 0, 0.24);
animation: wsDialogIn 220ms cubic-bezier(.2,.7,.2,1);
}
@keyframes wsDialogIn {
from { opacity: 0; transform: translateY(8px) scale(.985) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.ws-dialog__title {
font: 600 15px/1.35 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
}
.ws-dialog__body {
font: 400 13px/1.55 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.72);
}
.ws-dialog__actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 4px;
}
/* Compact + centered variant — used for the Business/Creator account
confirmation. Tighter padding, centered title + buttons, wider
buttons so the dialog reads as a clean "yes/no" prompt. */
.ws-dialog--compact {
width: min(380px, calc(100vw - 48px));
padding: 16px 18px;
gap: 12px;
border-radius: 18px;
}
.ws-dialog--centered {
text-align: center;
}
.ws-dialog--centered .ws-dialog__title {
font-size: 15.5px;
letter-spacing: -0.005em;
}
.ws-dialog--centered .ws-dialog__actions {
justify-content: center;
gap: 10px;
margin-top: 6px;
}
.ws-dialog--centered .ws-dialog__btn {
min-width: 110px;
padding: 7px 16px;
}
.ws-btn--danger {
background: rgba(248, 113, 113, 0.16);
border: 1px solid rgba(248, 113, 113, 0.40);
color: rgba(254, 226, 226, 0.96);
}
.ws-btn--danger:hover {
background: rgba(248, 113, 113, 0.22);
border-color: rgba(248, 113, 113, 0.55);
}
/* Legacy inline notice — retired in ws22 (replaced by wsDialog popup
triggered on Connect click). Forced hidden in case stale builds
render it. */
.ws-connector-card__notice { display: none !important; }
/* ── Inline post-connect welcome (workspace, replaces modal) ───────── */
.ws-conn-welcome {
position: fixed; inset: 0; z-index: 100002;
/* Pure liquid glass — transparent background, only blur. No
black tinting. The garden background of the app stays visible. */
background: transparent;
backdrop-filter: blur(28px) saturate(170%);
-webkit-backdrop-filter: blur(28px) saturate(170%);
display: grid; place-items: center;
padding: 24px;
animation: wsConnWelcomeFade 0.22s ease;
}
@keyframes wsConnWelcomeFade { from { opacity: 0; } to { opacity: 1; } }
.ws-conn-welcome-card {
width: 100%; max-width: 340px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 24px 60px -16px rgba(0, 0, 0, 0.5);
overflow: hidden; outline: none;
color: #fff;
animation: wsConnWelcomeRise 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes wsConnWelcomeRise {
from { transform: translateY(12px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.ws-conn-welcome-head {
display: flex; align-items: center; gap: 9px;
padding: 11px 13px 10px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ws-conn-welcome-icon {
width: 24px; height: 24px;
display: inline-grid; place-items: center;
flex: 0 0 auto;
font-size: 18px; line-height: 1; /* emoji last-resort fallback */
}
/* When the icon slot hosts a real brand SVG (img from cdn.simpleicons.org
or the masked-tile fallback), size it to fit the slot. */
.ws-conn-welcome-icon img,
.ws-conn-welcome-icon .ws-connector-card__logo-img {
width: 22px; height: 22px; display: block;
}
.ws-conn-welcome-icon .ws-connector-card__logo-img--mask {
background-color: var(--brand-color);
-webkit-mask-image: var(--logo-url);
mask-image: var(--logo-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.ws-conn-welcome-title {
flex: 1;
font-size: 14px; font-weight: 600;
letter-spacing: -0.01em;
}
.ws-conn-welcome-x {
background: transparent; border: 0; color: rgba(255,255,255,0.55);
font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.ws-conn-welcome-x:hover { color: #fff; }
.ws-conn-welcome-body {
padding: 11px 13px 4px;
font-size: 13px; line-height: 1.45;
color: rgba(255,255,255,0.85);
}
.ws-conn-welcome-body p { margin: 0; }
.ws-conn-welcome-foot {
padding: 8px 13px 12px;
display: flex; justify-content: flex-end;
}
.ws-conn-welcome-foot .ws-btn {
padding: 6px 14px; font-size: 13px;
}
/* ── BYOC / credentials form modal ───────────────────────────────── */
.ws-byoc-card {
max-width: 440px; /* wider than welcome to fit form fields */
}
.ws-byoc-body {
padding: 12px 16px 12px;
display: flex; flex-direction: column; gap: 10px;
}
.ws-byoc-help {
margin: 0;
font-size: 12.5px; line-height: 1.45;
color: rgba(255,255,255,0.78);
}
.ws-byoc-link {
font-size: 12.5px; font-weight: 600;
color: #6cb6ff; text-decoration: none;
align-self: flex-start;
}
.ws-byoc-link:hover { text-decoration: underline; }
.ws-byoc-redirect {
margin: 0;
font-family: ui-monospace, "SF Mono", monospace;
font-size: 11.5px; line-height: 1.35;
color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.05);
padding: 7px 10px;
border-radius: 6px;
white-space: pre-wrap;
word-break: break-all;
border: 1px solid rgba(255,255,255,0.08);
}
.ws-byoc-field {
display: flex; flex-direction: column; gap: 4px;
}
.ws-byoc-field__label {
font-size: 11.5px; font-weight: 600;
color: rgba(255,255,255,0.75);
letter-spacing: 0.02em;
}
.ws-byoc-field input,
.ws-byoc-field textarea {
width: 100%; box-sizing: border-box;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
color: #fff;
font-size: 13px;
padding: 8px 10px;
font-family: inherit;
resize: vertical;
}
.ws-byoc-field textarea {
font-family: ui-monospace, "SF Mono", monospace;
font-size: 11.5px;
min-height: 100px;
}
.ws-byoc-field input:focus,
.ws-byoc-field textarea:focus {
outline: none;
border-color: rgba(108,182,255,0.6);
background: rgba(255,255,255,0.09);
}
.ws-byoc-error {
margin: 0;
font-size: 12px;
color: #ff8a8a;
}
.ws-byoc-error[hidden] { display: none; }
/* ── Composio security notice (D2) ───────────────────────────────── */
.ws-composio-notice-card { max-width: 400px; }
.ws-composio-notice-head {
display: flex; align-items: flex-start; gap: 11px;
padding: 16px 16px 14px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ws-composio-notice-title {
font-size: 14px; font-weight: 600; color: #fff;
margin: 0; line-height: 1.3; letter-spacing: -0.01em;
}
.ws-composio-notice-sub {
font-size: 12px; color: rgba(255,255,255,0.5); margin: 3px 0 0 0;
}
.ws-composio-notice-body { padding: 16px 16px 14px; }
.ws-composio-notice-text {
font-size: 14px; line-height: 1.6;
color: rgba(255,255,255,0.78); margin: 0 0 18px 0;
}
.ws-composio-notice-text strong { color: #fff; font-weight: 600; }
.ws-composio-notice-foot { display: flex; gap: 10px; }
.ws-composio-notice-foot .ws-btn { padding: 8px 16px; font-size: 14px; }
.ws-composio-notice-foot .ws-btn--primary { flex: 1; }
/* ── Hide the legacy floating Connections launcher + modal ────────── */
/* The launcher pill and the catalog modal are superseded by the
inline Workspace → Connected services grid. JS also gates the
launcher via body.no-soj-conn-launcher; we hide here too for safety
in case the JS short-circuit is bypassed. */
#sojConnLauncher,
#sojConnectionsPanel { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
MY AGENTS — workspace section
════════════════════════════════════════════════════════════════════
Retires the floating "Masters" launcher. Every agent lives here:
Platform Masters + custom agents the user builds. The card grid
mirrors Connected services rhythm so the two sections feel like
one Workspace, and the configure modal uses the same glass surface
language as the rest of the app. */
/* Also hide the legacy Masters launcher in case a cached build renders
it before agent-ui.js's purge runs. */
#sojAgentLauncher { display: none !important; }
/* ── Unified liquid-glass shell wrapping the whole roster ──────────
Replaces the "floating chips" look: one frosted container holds
every agent card. Cards inside lose their own backdrop-filter
(the shell provides the glass) and get a subtle inner-tint +
hairline border so they read as inset compartments, not stickers. */
.ws-agents-shell {
padding: 22px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(40px) saturate(170%);
-webkit-backdrop-filter: blur(40px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 30px 80px rgba(0, 0, 0, 0.30);
}
.ws-agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
align-items: stretch;
}
.ws-agent-card {
position: relative;
display: flex; flex-direction: column;
gap: 10px;
height: 100%;
padding: 16px 16px 14px;
border-radius: 14px;
/* Inside the shell — no own blur, just a tinted inset compartment */
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
min-height: 180px;
}
.ws-agent-card:hover {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
.ws-agent-card__row {
display: flex; align-items: center; gap: 10px;
}
.ws-agent-card__logo {
width: 36px; height: 36px;
display: grid; place-items: center;
font-size: 18px; line-height: 1;
border-radius: 10px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.92);
}
.ws-agent-card__title {
flex: 1; min-width: 0;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.96);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-agent-card__phase {
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
}
.ws-agent-card__blurb {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.ws-agent-card__skills {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 2px;
}
.ws-agent-card__skill-chip {
font-size: 11px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
}
.ws-agent-card__skill-chip--more {
color: rgba(255, 255, 255, 0.55);
background: transparent;
}
.ws-agent-card__meta {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
font-size: 11.5px;
color: rgba(255, 255, 255, 0.55);
margin-top: auto;
}
/* No truncation, no italics — price and hint render in full, plainly. */
.ws-agent-card__price {
font: 600 12px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.88);
}
.ws-agent-card__price-hint {
font: 500 11px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.60);
}
/* Brain tag — the model this agent thinks with (Configure → Brain). */
.ws-agent-card__brain {
margin-left: auto;
padding: 3px 8px;
border-radius: 999px;
background: rgba(140, 170, 255, 0.10);
border: 1px solid rgba(140, 170, 255, 0.25);
color: rgba(190, 208, 255, 0.92);
font: 600 10.5px/1 ui-sans-serif, system-ui;
white-space: nowrap;
}
/* Usage line — runs · coins · last run; live while a run is in flight. */
.ws-agent-card__stats {
display: flex; align-items: center; gap: 6px;
min-height: 16px;
margin-top: auto;
padding-top: 4px;
font: 500 11px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.50);
}
.ws-agent-card__stats.is-running { color: rgba(170, 235, 195, 0.92); }
.ws-agent-card__pulse {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(110, 220, 150, 0.95);
flex-shrink: 0;
animation: ws-agent-pulse 1.4s ease-in-out infinite;
}
@keyframes ws-agent-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.75); }
}
/* Run modal extras */
.ws-agent-modal__card--run { max-width: 520px; }
.ws-agent-run__price {
margin: 0 0 10px;
font: 500 11.5px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.58);
}
/* Run modal spending limit — ports Command Center light-beam slider */
.ws-agent-run__limit {
margin-top: 4px;
padding: 14px 15px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ws-agent-run__limit-h {
font: 700 12.5px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 6px;
}
.ws-agent-run__limit-note {
margin: 0 0 10px;
font: 500 11px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
}
.ws-agent-run__limit .cc-budget-pop__scale {
margin-top: 3px;
font: 500 10px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.5);
}
.ws-agent-run__limit-read {
margin-top: 8px;
font: 600 11.5px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.8);
}
.ws-agent-run__err {
margin: 10px 0 0;
font: 500 12px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 170, 170, 0.95);
}
.ws-agent-skills__truth-note {
margin: 6px 0 10px;
font: 500 11px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.48);
}
.ws-agent-card__custom-tag {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
.ws-agent-card__actions {
display: flex; gap: 8px;
flex-shrink: 0;
}
.ws-btn--block { width: 100%; justify-content: center; }
/* ── Configure modal ─────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
Agent Configure modal — pure liquid glass, tabbed
(Profile / Skills / Connectors). Sibling design language to the
Routines + MCP dialogs.
════════════════════════════════════════════════════════════════════ */
.ws-agent-modal {
position: fixed; inset: 0;
z-index: 9000;
display: grid; place-items: center;
padding: 32px 16px;
background: transparent;
animation: wsAgentModalIn .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes wsAgentModalIn { from { opacity: 0 } to { opacity: 1 } }
.ws-agent-modal__card {
width: min(720px, 100%);
max-height: calc(100vh - 64px);
display: flex; flex-direction: column;
padding: 0;
border-radius: 22px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 40px 100px rgba(0, 0, 0, 0.40);
color: rgba(255, 255, 255, 0.96);
outline: none;
animation: wsAgentCardIn .26s cubic-bezier(.2,.7,.2,1);
}
@keyframes wsAgentCardIn {
from { opacity: 0; transform: translateY(8px) scale(.985) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.ws-agent-modal__head {
display: flex; align-items: center; gap: 12px;
padding: 18px 22px 14px;
}
.ws-agent-modal__icon {
width: 34px; height: 34px;
display: grid; place-items: center;
font: 600 17px/1 ui-sans-serif, system-ui;
border-radius: 11px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.96);
}
.ws-agent-modal__title {
flex: 1; min-width: 0;
font: 600 16px/1.25 ui-sans-serif, system-ui;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.96);
}
.ws-agent-modal__x {
width: 30px; height: 30px;
display: grid; place-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 9px;
color: rgba(255, 255, 255, 0.78);
font: 400 22px/1 ui-sans-serif, system-ui;
cursor: pointer;
}
.ws-agent-modal__x:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
/* ─── Tabs ─── */
.ws-agent-tabs {
display: flex; gap: 4px;
padding: 4px;
margin: 0 22px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-agent-tab {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 12px;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
font: 500 12.5px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.66);
cursor: pointer;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.ws-agent-tab:hover { color: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.04); }
.ws-agent-tab.is-active {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.98);
/* The "little white light" treatment */
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 14px rgba(255, 255, 255, 0.12);
}
.ws-agent-tab__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.10);
font: 600 10.5px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.92);
}
.ws-agent-modal__body {
padding: 16px 22px 8px;
overflow-y: auto;
display: flex; flex-direction: column; gap: 10px;
}
.ws-agent-tabpanel {
display: flex; flex-direction: column; gap: 12px;
}
.ws-agent-modal__foot {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px 18px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
gap: 8px;
}
/* ─── Labels + form fields ─── */
.ws-agent-label {
font: 600 11px/1 ui-sans-serif, system-ui;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-top: 6px;
}
.ws-agent-help {
margin: 0 0 4px;
font: 400 12.5px/1.5 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.62);
}
.ws-agent-field {
width: 100%;
padding: 11px 13px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.96);
font: 400 13.5px/1.45 ui-sans-serif, system-ui;
resize: vertical;
outline: none;
transition: border-color 140ms ease, background 140ms ease;
}
.ws-agent-field:focus {
border-color: rgba(180, 200, 255, 0.40);
background: rgba(255, 255, 255, 0.07);
}
.ws-agent-field--brief { min-height: 110px; line-height: 1.55; }
.ws-agent-link {
font: 500 11.5px/1 ui-sans-serif, system-ui;
color: rgba(180, 200, 255, 0.92);
background: transparent;
border: 0;
cursor: pointer;
padding: 6px 8px;
border-radius: 7px;
}
.ws-agent-link:hover { background: rgba(180, 200, 255, 0.10); }
/* ─── Skills panel ─── */
.ws-agent-skills {
display: flex; flex-direction: column; gap: 14px;
}
.ws-agent-skills__counter {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font: 500 12px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.78);
}
.ws-agent-skills__counter-actions { display: flex; gap: 2px; }
.ws-agent-skill-cat {
display: flex; flex-direction: column; gap: 8px;
}
.ws-agent-skill-cat__head {
display: flex; align-items: center; justify-content: space-between;
padding: 0 2px;
}
.ws-agent-skill-cat__head-name {
font: 600 11px/1 ui-sans-serif, system-ui;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.ws-agent-skill-cat__head-count {
font: 500 10.5px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.45);
}
.ws-agent-skill-cat__list {
display: flex; flex-wrap: wrap; gap: 6px;
}
.ws-agent-skill-chip {
font: 500 12px/1 ui-sans-serif, system-ui;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.74);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease,
color 160ms ease, box-shadow 220ms ease, transform 160ms ease;
}
.ws-agent-skill-chip:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.96);
}
/* "Little white light" — the equipped state. Subtle outer glow +
inner highlight, never the harsh white pill block. */
.ws-agent-skill-chip.is-on {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.40);
color: rgba(255, 255, 255, 1);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 18px rgba(255, 255, 255, 0.18);
}
.ws-agent-skill-chip.is-on:hover {
background: rgba(255, 255, 255, 0.18);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.22) inset,
0 0 22px rgba(255, 255, 255, 0.24);
}
/* ─── Connectors panel ─── */
.ws-agent-connectors { display: flex; flex-direction: column; gap: 14px; }
.ws-agent-conn-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-agent-conn-head__title {
font: 600 13.5px/1.3 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
}
.ws-agent-conn-head__sub {
font: 400 12.5px/1.55 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.66);
margin-top: 4px;
}
.ws-agent-conn-head__actions { display: flex; gap: 4px; flex-shrink: 0; }
.ws-agent-conn-empty { padding: 8px 4px; }
/* Dedicated empty-state card when the user has no connectors. Replaces
the header + empty-grid that used to read as "actionable but blank".
Pure liquid glass, soft inner highlight, big primary CTA into the
Connectors tab. */
.ws-agent-conn-empty-card {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 40px 28px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.045);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.ws-agent-conn-empty-card__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 13px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
font: 400 22px/1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 14px;
}
.ws-agent-conn-empty-card__title {
font: 600 14.5px/1.35 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
margin-bottom: 6px;
}
.ws-agent-conn-empty-card__sub {
font: 400 12.5px/1.55 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.62);
max-width: 380px;
}
.ws-agent-conn-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 8px;
}
.ws-agent-conn-tile {
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding: 12px 14px;
text-align: left;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.10);
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease,
box-shadow 220ms ease, transform 160ms ease;
}
.ws-agent-conn-tile:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
}
.ws-agent-conn-tile.is-on {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.34);
color: rgba(255, 255, 255, 0.98);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.16) inset,
0 0 18px rgba(255, 255, 255, 0.14);
}
.ws-agent-conn-tile__name {
font: 600 13px/1.2 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.96);
}
.ws-agent-conn-tile__sub {
font: 400 11.5px/1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.55);
}
.ws-agent-conn-tile__dot {
position: absolute;
top: 12px; right: 12px;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
transition: background 160ms ease, box-shadow 220ms ease;
}
.ws-agent-conn-tile.is-on .ws-agent-conn-tile__dot {
background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98), rgba(220, 230, 255, 0.85));
box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}
/* Story-mode / immersive guards (mirror the connectors hide-when-app-
is-in-immersive-mode rule). */
body.in-story-mode .ws-agent-modal,
body.director-default-on .ws-agent-modal { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
BRAIN PICKER — inline model selector in the Configure modal Profile tab
════════════════════════════════════════════════════════════════════ */
.ws-brain-picker {
margin-top: 4px;
}
/* ── Trigger button — same glass as .ws-agent-field inputs ── */
.ws-brain-trigger {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
color: rgba(255, 255, 255, 0.92);
font: 500 13.5px / 1 ui-sans-serif, system-ui;
cursor: pointer;
text-align: left;
transition: background 140ms ease, border-color 140ms ease;
}
.ws-brain-trigger:hover,
.ws-brain-trigger.is-open {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.24);
}
.ws-brain-trigger__icon {
font-size: 15px;
opacity: 0.65;
flex-shrink: 0;
}
.ws-brain-trigger__label {
flex: 1;
letter-spacing: 0.01em;
}
.ws-brain-trigger__badge {
padding: 2px 8px;
border-radius: 20px;
font: 500 10.5px / 18px ui-sans-serif, system-ui;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.ws-brain-trigger__badge[data-tag="FREE"] {
background: rgba(134, 239, 172, 0.14);
color: #86efac;
border: 1px solid rgba(134, 239, 172, 0.22);
}
.ws-brain-trigger__badge:not([data-tag="FREE"]) {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.48);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.ws-brain-trigger__arrow {
font-size: 9px;
opacity: 0.45;
flex-shrink: 0;
transition: transform 200ms ease;
}
.ws-brain-trigger.is-open .ws-brain-trigger__arrow {
transform: rotate(180deg);
}
/* ── Dropdown panel — liquid glass matching the modal card ── */
.ws-brain-dropdown {
margin-top: 6px;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 14px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 16px 48px rgba(0, 0, 0, 0.30);
}
/* ── Provider tabs row — three equal tabs, no arrows ── */
.ws-brain-tabs {
display: flex;
align-items: center;
padding: 8px 8px 0;
gap: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ws-brain-tab {
flex: 1;
padding: 7px 4px;
background: transparent;
border: 1px solid transparent;
border-bottom: none;
border-radius: 8px 8px 0 0;
color: rgba(255, 255, 255, 0.42);
font: 500 13px / 1.3 ui-sans-serif, system-ui;
cursor: pointer;
text-align: center;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ws-brain-tab:hover {
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.05);
}
.ws-brain-tab.is-active {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.96);
}
/* ── Model rows ── */
.ws-brain-models {
padding: 7px;
display: flex;
flex-direction: column;
gap: 2px;
}
.ws-brain-model-row {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
cursor: pointer;
text-align: left;
transition: background 120ms ease, border-color 120ms ease;
}
.ws-brain-model-row:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.08);
}
.ws-brain-model-row.is-selected {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.17);
}
.ws-brain-model-row__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: 1.5px solid rgba(255, 255, 255, 0.28);
flex-shrink: 0;
transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.ws-brain-model-row.is-selected .ws-brain-model-row__dot {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}
.ws-brain-model-row__name {
flex: 1;
font: 500 13px / 1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.80);
transition: color 120ms ease;
}
.ws-brain-model-row.is-selected .ws-brain-model-row__name {
color: rgba(255, 255, 255, 0.98);
}
.ws-brain-model-row__speed {
font: 400 11.5px / 1 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.36);
}
.ws-brain-model-row__tag {
padding: 2px 8px;
border-radius: 20px;
font: 500 10.5px / 16px ui-sans-serif, system-ui;
flex-shrink: 0;
}
.ws-brain-model-row__tag[data-tag="FREE"] {
background: rgba(134, 239, 172, 0.12);
color: #86efac;
border: 1px solid rgba(134, 239, 172, 0.18);
}
.ws-brain-model-row__tag:not([data-tag="FREE"]) {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.38);
border: 1px solid rgba(255, 255, 255, 0.09);
}
/* ── Footer note ── */
.ws-brain-footer {
margin: 0;
padding: 8px 14px 10px;
font: 400 11px / 1.4 ui-sans-serif, system-ui;
color: rgba(255, 255, 255, 0.28);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}