/* Katonic platform — combined design system (generated from src/styles) */ /* ===================== tokens.css ===================== */ /* ================================================================ Katonic · Design Tokens Single source of truth for colors, typography, spacing, shadows, and radius. Every other CSS file reads these via var(--token). Import FIRST in main.jsx: import "./styles/tokens.css"; Rules: 1. No component styles in this file, only :root variables 2. Every hardcoded hex in a component CSS should be replaced with a var() from here 3. Dark mode overrides go in warm-dark-mode.css, not here ================================================================ */ /* Fonts are loaded via @fontsource packages in global.css (self-hosted, no external CDN). */ :root { /* ── Typography stacks ─────────────────────────────────────── */ --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ── Type scale ────────────────────────────────────────────── */ --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 28px; /* ── Brand (purple) ────────────────────────────────────────── */ --brand: #5C31FF; --brand-2: #7B57FF; --brand-deep: #3A1FB3; --brand-hover: #4825D6; --brandL: #EFEAFE; --brand-tint: #EDE8FF; --brand-tint-border: #DDD2FA; --brandBg: #F8F4ED; --brandGhost: #5C31FF18; /* ── Accent (gold) ─────────────────────────────────────────── */ --accent: #FFCC00; --accentBg: #FFF8DB; /* ── Beige surface family (warm) ───────────────────────────── * CR-design-system-reconciliation (May 2026): aligned with the * "design vocabulary alias layer" formerly at global.css:2692. * Three values were silently drifting before: * --beige-card: was #FFFEFC, now #FFFFFF (the alias layer's * resolved value; tokens.css's 1-channel beige tint wasn't * what users actually saw) * --beige-rule: was #ECE6D8 (darker), now #F2EFE9 (lighter — * hairline rules need subtle) * --beige-pill: was #F2EDE2 (darker), now #FAF8F4 (lighter — * pills inside beige bg need to be near-invisible) * Other beige tokens already agreed; just cleaned up the formatting. */ --beige-pg: #FCFBF8; --beige: #F8F4ED; --beige-pill: #FAF8F4; --beige-card: #FFFFFF; --beige-b: #EAE3D4; --beige-b2: #EFEAE2; /* lighter beige divider (alias for --bl2) */ --beige-rule: #F2EFE9; --b-faint: #F2EFE9; /* same value, used by --beige-rule alias chain */ /* ── Text (warm dark) ──────────────────────────────────────── */ --t: #1B1814; --t2: #3A332B; --t3: #6A6055; /* CR-states-audit (May 2026): --t4 darkened from #857A6C to #786E61. * The previous "4.58:1" annotation was incorrect — measured 3.83:1 * on --bg and 4.18:1 on white, both below WCAG AA's 4.5:1 for normal * text. #786E61 measures 4.51:1 on --bg and 4.93:1 on white, passing * AA on every surface in the design system. */ --t4: #786E61; --t5: #C8BFAF; /* disabled text — WCAG-exempt per spec (1.3.1 N/A for disabled controls) */ /* ── Surfaces ────────────────────────────────────────────────── * CR-design-system-reconciliation (May 2026): aligned with the * values in global.css which were winning the cascade. The previous * tokens.css values (#F4F0E8 / #EDE8DD / #E8E0D2 / #D8D0C2 / #F0EBE0) * were silently shadowed. Now tokens.css matches what actually renders. * * Note on --sh: the rgba(0,0,0,.03) value is an anomaly vs the rest * of the surface family (which uses solid warm-beige hex). In dark * mode, warm-dark-mode.css uses a solid hex #2C2924 for --sh — the * "translucent darkening" approach only exists in light mode. A * follow-up could harmonize this to a solid hex like #F7F7F7 or a * warm beige equivalent, but that's a design-call deferred for now. */ --bg: #F8F4ED; --s: #FFFFFF; --sh: rgba(0, 0, 0, .03); --sa: #EAEAE8; --b: #EAE3D4; --bd: #E1DAC8; --bl2:#EFEAE2; /* ── Semantic status ───────────────────────────────────────── */ /* CR-states-audit (May 2026): status colors darkened to pass WCAG AA * on plain white AND on their own tinted backgrounds. The previous * values failed AA at 2.87-4.39:1 on those combinations — status * messages on tinted backgrounds were the most concerning blind spot * because operators rely on color-coding for at-a-glance scanning. * Both --warn and --t3 had a partial workroom-a11y.css override; this * makes the canonical defaults pass so the override is no longer the * only AA path. */ --ok: #26744F; /* was #2F9163 (3.17:1 on ok-light); now 4.50:1 */ --ok-2: #107A4D; --ok-bg: #E6F4EC; --ok-light: #D4EDDF; --warn: #8A5917; /* was #B8761F (2.87:1 on warn-light); now 4.65:1. Matches the existing workroom-a11y.css override scope, making the override redundant — keep the override for now in case workroom UX wants a slightly different tone. */ --warn-2: #A6601C; --warn-bg: #FBEDD9; --warn-light: #F5DFC0; --err: #A13B29; /* was #B3422E (4.00:1 on err-light); now 4.51:1 */ --err-2: #A23E2E; --err-bg: #FBE6DF; --err-light: #F5D2C8; --info: #2962A6; /* was #2C6AB3 (4.07:1 on info-light); now 4.50:1. Tiny darken so info text passes AA on its own tinted background. */ --info-bg: #E0ECF7; /* CR-design-system-reconciliation (May 2026): status -light variants * synced with global.css. Previously tokens.css had more-saturated * values (#D4EDDF, #F5DFC0, #F5D2C8, #CCE0F5) which were silently * shadowed by global.css's lighter values (the cascade winners). * Now both files agree — tokens.css matches what actually renders. */ --ok-light: #E6F4EC; --warn-light: #FFFCF4; --err-light: #FBECE8; --info-light: rgba(59, 130, 246, 0.09); /* ── Status raw hex ──────────────────────────────────────────── * For dynamic rgba composition in micro-visualization components * that need to apply variable opacity. Moved from global.css:2706 * (May 2026 reconciliation) so tokens.css is the single source. */ --ok-raw: #117A45; --warn-raw: #B58300; --err-raw: #A23E2E; /* ── Agent glyph palette ─────────────────────────────────────── * 10 colors assigned by hashing agent name (mod 10), overridable * per-agent via stored index 0-9. Provider logos keep their own * brand colors. Moved from global.css:2710 (May 2026 reconciliation). */ --ag-0: #5C31FF; /* purple (default / brand) */ --ag-1: #4338CA; /* indigo */ --ag-2: #1E40AF; /* blue */ --ag-3: #0891B2; /* cyan */ --ag-4: #0F766E; /* teal */ --ag-5: #15803D; /* forest */ --ag-6: #92400E; /* amber */ --ag-7: #9A3412; /* orange */ --ag-8: #BE185D; /* rose */ --ag-9: #475569; /* slate */ /* ── Extended palette ────────────────────────────────────────── * CR-design-system-reconciliation (May 2026): aligned with global.css * cascade winners (Tailwind 500-family hues). Previously tokens.css * had slightly darker 600-ish values that were silently shadowed. */ --purple: #8B5CF6; --cyan: #06B6D4; --rose: #F43F5E; --orange: #F97316; /* ── Zone accents ──────────────────────────────────────────── */ --studio-accent: #2F9163; /* CR-design-system-reconciliation (May 2026): workroom palette * fully synced with global.css's second :root (the design vocabulary * alias layer at ~line 2730). The previous tokens.css values were * silently shadowed: * --workroom-accent-bg: #E6F4EC (green-pale) → #FBF1E2 (amber-pale, * consistent with --workroom-accent burnt amber) * --workroom-bubble-you: #F4EFFF (lavender) → #F5F1E8 (warm beige, * consistent with reading-room aesthetic per the comment in * global.css). If lavender was the original intent, that's a * design choice to revisit — these values now match what users * actually see. * --workroom-pinned: #FBF4E5 → #FAF6EE (a touch lighter / warmer) */ --workroom-accent: #B45309; --workroom-accent-bg: #FBF1E2; --workroom-pinned: #FAF6EE; --workroom-bubble-you: #F5F1E8; --workroom-bubble-ai: #FFFFFF; /* assistant bubble — moved from global.css:2731 */ /* ── Spacing scale ─────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; --sp-8: 18px; --sp-9: 20px; --sp-10: 24px; --sp-11: 28px; --sp-12: 32px; --sp-14: 40px; --sp-16: 48px; /* Semantic spacing */ --page-x: 28px; --page-y: 22px; --card-p: 14px; --card-gap: 14px; --section-gap: 18px; /* ── Radius ─────────────────────────────────────────────────── Aligned with design system (colors_and_type.css from design project). 5-step scale: small inline (4) → chips (6) → inputs (8) → cards (12) → modals (16). --r-6 and --r-7 kept as backward-compat aliases mapping to design steps. */ --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 12px; --r-5: 16px; --r-6: 12px; /* deprecated alias → --r-4 */ --r-7: 16px; /* deprecated alias → --r-5 */ --r-full: 9999px; /* ── Shadows / elevation ───────────────────────────────────── */ --sh-1: 0 1px 2px rgba(20,20,30,.05); --sh-2: 0 1px 2px rgba(20,20,30,.04), 0 4px 14px rgba(20,20,30,.06); --sh-3: 0 1px 2px rgba(20,20,30,.04), 0 12px 32px rgba(20,20,30,.08); --sh-brand: 0 8px 28px -10px rgba(92,49,255,.45); /* ── Transitions ───────────────────────────────────────────── */ --ease-default: 0.15s ease; --ease-slow: 0.3s ease; /* ── Motion (Workroom prototype: 3 easings × 3 durations) ──── */ --ease-out: cubic-bezier(.4, 0, .2, 1); /* default exit */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* enter / pop */ --ease-linear: linear; /* progress, pulse */ --dur-fast: 120ms; /* hover, focus, micro */ --dur-base: 200ms; /* tooltip, popover open */ --dur-slow: 350ms; /* drawer, overlay */ /* ── Z-index scale ─────────────────────────────────────────── */ --z-base: 1; --z-sticky: 5; /* sticky headers */ --z-tooltip: 10; /* native tooltips */ --z-popover: 30; /* dropdowns, mention popover */ --z-overlay: 40; /* drawers, side panels */ /* CR-design-system-reconciliation (May 2026): z-modal / z-toast * synced with global.css's UI layer scale (50-100 range). Previously * tokens.css had 1000 / 2000 (exponential) but global.css's 90 / 100 * was the cascade winner and what actually rendered. Now aligned. */ --z-modal: 90; /* full-page modals (above topbar) */ --z-toast: 100; /* notifications (above modals) */ /* ── Icon sizing scale ─────────────────────────────────────── */ --icon-xs: 12px; --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px; --icon-xl: 24px; /* ── Semantic aliases (used by global.css for backward compat) */ --color-brand: var(--brand); --color-brand-light: var(--brandL); --color-brand-bg: var(--brandBg); --color-surface: var(--s); --color-bg: var(--bg); --color-text: var(--t); --color-text-2: var(--t2); --color-text-3: var(--t3); --color-text-4: var(--t4); --color-border: var(--b); --color-ok: var(--ok); --color-ok-light: var(--ok-light); --color-warn: var(--warn); --color-warn-light: var(--warn-light); --color-err: var(--err); --color-err-light: var(--err-light); --color-info: var(--info); --color-info-light: var(--info-light); } /* ===================== utilities.css ===================== */ /* ================================================================ Katonic · Utility Classes Extracted from the 9,353 inline style={{}} blocks across the codebase. Each class here replaces a pattern that appeared 18+ times. Use these instead of inline styles for new code. Import in main.jsx: import "./styles/utilities.css"; Convention: .flex-* layout .c-* color .f-* font/typography .icon-* icon sizing .gap-* gap spacing .mb-*, .mt-* margin .p-* padding ================================================================ */ /* ── Layout ──────────────────────────────────────────────────────── */ .flex-1 { flex: 1; } .flex-fill { flex: 1; min-width: 0; } /* flex child that shrinks properly */ .flex-none { flex: none; } .flex-row { display: flex; align-items: center; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-center { display: flex; align-items: center; justify-content: center; } .items-start { align-items: flex-start; } .self-end { align-self: flex-end; } .w-full { width: 100%; } .relative { position: relative; } .pointer { cursor: pointer; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-word { word-break: break-word; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ── Gap (flex/grid gap) ─────────────────────────────────────────── */ .gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } /* ── Shorthand row (flex + center + gap) ─────────────────────────── */ .row-4 { display: flex; align-items: center; gap: 4px; } .row-6 { display: flex; align-items: center; gap: 6px; } .row-8 { display: flex; align-items: center; gap: 8px; } .row-10 { display: flex; align-items: center; gap: 10px; } .row-12 { display: flex; align-items: center; gap: 12px; } /* ── Margin ──────────────────────────────────────────────────────── */ .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } /* ── Padding ─────────────────────────────────────────────────────── */ .p-8 { padding: 8px; } .p-10 { padding: 10px; } .p-12 { padding: 12px; } .p-14 { padding: 14px; } .p-16 { padding: 16px; } .px-14 { padding-left: 14px; padding-right: 14px; } .px-28 { padding-left: 28px; padding-right: 28px; } .py-8 { padding-top: 8px; padding-bottom: 8px; } /* ── Typography ──────────────────────────────────────────────────── */ .f-600 { font-weight: 600; } .f-500 { font-weight: 500; } .f-mono { font-family: var(--mono); } .f-sans { font-family: var(--sans); } .f-serif { font-family: var(--serif); } .f-tabular { font-variant-numeric: tabular-nums; } .f-upper { text-transform: uppercase; letter-spacing: 0.06em; } /* Caption styles (the two most repeated font combos) */ .caption-mono { font: 500 11px var(--mono); color: var(--t3); } .caption-sans { font: 400 11px var(--sans); color: var(--t3); } .label-mono { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); } /* ── Color (text) ────────────────────────────────────────────────── */ .c-t { color: var(--t); } .c-t2 { color: var(--t2); } .c-t3 { color: var(--t3); } .c-t4 { color: var(--t4); } .c-t5 { color: var(--t5); } .c-brand { color: var(--brand); } .c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-err { color: var(--err); } .c-white { color: #fff; } /* ── Background ──────────────────────────────────────────────────── */ .bg-page { background: var(--beige-pg); } .bg-card { background: var(--beige-card); } .bg-beige { background: var(--beige); } .bg-brand { background: var(--brand); } .bg-brandL { background: var(--brandL); } .bg-ok { background: var(--ok-bg); } .bg-warn { background: var(--warn-bg); } .bg-err { background: var(--err-bg); } .bg-white { background: #fff; } /* ── Icon sizing ─────────────────────────────────────────────────── */ .icon-10 svg, .icon-10 { width: 10px; height: 10px; } .icon-12 svg, .icon-12 { width: 12px; height: 12px; } .icon-13 svg, .icon-13 { width: 13px; height: 13px; } .icon-14 svg, .icon-14 { width: 14px; height: 14px; } .icon-16 svg, .icon-16 { width: 16px; height: 16px; } .icon-18 svg, .icon-18 { width: 18px; height: 18px; } .icon-20 svg, .icon-20 { width: 20px; height: 20px; } .icon-24 svg, .icon-24 { width: 24px; height: 24px; } /* ── Borders & radius ────────────────────────────────────────────── */ .border { border: 1px solid var(--beige-rule); } .border-b { border-bottom: 1px solid var(--beige-rule); } .border-t { border-top: 1px solid var(--beige-rule); } .rounded-6 { border-radius: 6px; } .rounded-8 { border-radius: 8px; } .rounded-10 { border-radius: 12px; } .rounded-full { border-radius: 9999px; } /* ── Visibility ──────────────────────────────────────────────────── */ .hidden { display: none; } .opacity-50 { opacity: 0.5; } .opacity-65 { opacity: 0.65; } /* ── CR-perf (May 2026): next-tier utilities for high-frequency inline styles ───────────────────────────────────────────────────── Each class below replaces a pattern that appeared 5-20+ times in the audit. The names are deliberately short and the rules are single-property where possible so they stay composable. */ /* Margins (next-tier) */ .mb-18 { margin-bottom: 18px; } .mt-14 { margin-top: 14px; } .ml-4 { margin-left: 4px; } .ml-8 { margin-left: 8px; } /* Widths */ .w-90 { width: 90px; } .w-100 { width: 100px; } .w-130 { width: 130px; } .w-160 { width: 160px; } /* Padding next-tier */ .p-22-26 { padding: 22px 26px; } .p-12-16 { padding: 12px 16px; } /* Inline-flex icons (small fixed boxes) */ .ibox-12 { width: 12px; height: 12px; display: inline-flex; } .ibox-13 { width: 13px; height: 13px; display: inline-flex; } .ibox-26 { width: 26px; height: 26px; display: inline-flex; } /* Typography combos that repeat */ .f-13 { font-size: 13px; } .f-12 { font-size: 12px; } .f-11 { font-size: 11px; } .f-115 { font-size: 11.5px; } .f-125 { font-size: 12.5px; } .body-13 { font: 500 13px var(--sans); color: var(--t); } .caption-mono-2 { font: 500 12px var(--mono); color: var(--t3); } .caption-mono-t2 { font: 500 12px var(--mono); color: var(--t2); } .t-heading { color: var(--t); font-weight: 600; } /* Empty state placeholder (used for "no data yet" copy blocks) */ .empty-state { padding: 40px; text-align: center; color: var(--t3); font-size: 13px; } /* Grids */ .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-2col-14 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } /* Flex column shortcuts */ .col-4 { display: flex; flex-direction: column; gap: 4px; } .col-6 { display: flex; flex-direction: column; gap: 6px; } .col-14 { display: flex; flex-direction: column; gap: 14px; } /* Misc */ .accent-brand { accent-color: var(--brand); } /* Link-style button: no chrome, brand-coloured, clickable text. Pattern appears 30+ times across CR pages. */ .btn-link { background: none; border: none; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; font-size: 12.5px; } /* ── Cross-page CR utilities ───────────────────────────────────── May 2026 perf round 3: each class below was extracted from a pattern found in 3+ CR pages by the cross-page audit. These beat page-specific extraction in maintenance cost since they centralize the rule once. */ /* Body-text-2 muted color (--bl2) — 17 files, 31 uses */ .c-bl2 { color: var(--bl2); } /* Status/hint strip: full-bleed row with chips, lives under a header or above content (14 files) */ .cr-hint-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-top: 16px; background: var(--beige); border: 0.5px solid var(--beige-b); border-radius: 8px; font-size: 12.5px; color: var(--t3); } /* The same card with margin-bottom: 14 — actually the dominant variant (10 occurrences across CR pages). Standalone class is cleaner than `cr-card-bordered mb-14` (which would still work). */ .cr-card-bordered-mb14 { background: #fff; border: 0.5px solid var(--beige-b); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .cr-card-pad { background: #fff; border: 0.5px solid var(--beige-b); border-radius: 10px; padding: 12px 14px; } /* Section header + flex-fill (used at the start of a row where the title takes remaining space) — 9 files */ .row-heading-13 { font: 600 13px var(--sans); color: var(--t); flex: 1; } /* Right-aligned actions row, slightly inset from card padding */ .row-actions-end { display: flex; gap: 8px; padding-top: 6px; } /* Inline mono accent (e.g., count badge after a label) — 5 files */ .mono-accent { margin-left: 4px; font-family: var(--mono); font-weight: 700; } /* Inline flex row, gap 6, baseline-friendly */ .inline-row-6 { display: inline-flex; align-items: center; gap: 6px; } /* Action-link with underline (used in inline help text) */ .link-underline { cursor: pointer; text-decoration: underline; } /* Two-column layout: 1fr + 360px sidebar */ .cr-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: flex-start; } /* Sticky sidebar (used inside cr-detail-grid right column) */ .cr-sticky-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; } /* Mono small heading (12px) */ .mono-h-12 { font: 600 12px var(--mono); color: var(--t); } /* Body-12 with marginTop 2 (used in caption rows) */ .body-12-mt2-t3 { font-size: 12px; color: var(--t3); margin-top: 2px; } /* ── CR-perf round 4: more cross-page utilities ─────────────────── */ /* Section headings */ .h-12-5 { font: 600 12.5px var(--sans); color: var(--t); } .h-18 { font: 600 18px var(--sans); color: var(--t); margin: 0; } .mono-12-t { font: 500 12px var(--mono); color: var(--t); } /* Backgrounds */ .bg-warn { background: var(--warn); } .bg-info { background: var(--info); } /* Colors */ .c-info { color: var(--info); } .t4-noshrink { color: var(--t4); flex-shrink: 0; } /* Layout combos */ .row-10-mb14-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .gap-6-wrap { display: flex; flex-wrap: wrap; gap: 6px; } .gap-8-wrap { display: flex; gap: 8px; flex-wrap: wrap; } .gap-16-wrap { display: flex; gap: 16px; flex-wrap: wrap; } .flex-end-8 { display: flex; gap: 8px; justify-content: flex-end; } .grid-3col-12-mb14 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .col-10 { display: flex; flex-direction: column; gap: 10px; } .col-12 { display: flex; flex-direction: column; gap: 12px; } .col-16 { display: flex; flex-direction: column; gap: 16px; } /* Padding */ .p-20-24 { padding: 20px 24px; } /* Typography combos (CR-perf round 2) — patterns that repeat 3+ times within a single page get a dedicated class so the page can drop the inline style entirely. */ .heading-16-mb6 { font: 600 16px var(--sans); color: var(--t); margin-bottom: 6px; } .label-12-mb8 { font: 500 12px var(--sans); color: var(--t2); margin-bottom: 8px; } .body-115 { font: 400 11.5px var(--sans); color: var(--t3); } .body-13b { font: 600 13px var(--sans); color: var(--t); } .body-12 { font: 400 12px var(--sans); color: var(--t3); } .body-12-mt2 { font: 400 12px var(--sans); color: var(--t3); margin-top: 2px; } .body-12-italic { font: 400 12px var(--sans); color: var(--t4); font-style: italic; } .cap-12 { font: 500 12px var(--sans); color: var(--t3); } .cap-12-t2 { font: 500 12px var(--sans); color: var(--t2); } .cap-err { color: var(--err); font: 500 12px var(--sans); } .heading-14 { font: 600 14px var(--sans); color: var(--t); } /* ===================== global.css ===================== */ /* ═══════════════════════════════════════════════════════════════ TAILWIND CSS v4 — Layer order: base < theme < utilities. Unlayered component CSS (below) beats all layers. ═══════════════════════════════════════════════════════════════ */ /* CR-067 — fonts bundled via @fontsource (was Google Fonts CDN). Air-gap installs no longer fail silently to system fonts. The workroom CSS calls for weights 400/500/600/700 across DM Sans, Source Serif 4, and JetBrains Mono. Previously only 400 (+ DM Sans 600) loaded, so weight 500/700 calls were faux-bolded by the browser from the closest available weight — producing the blurry/heavy feel that "doesn't match the design." All weights now load eagerly; each @fontsource weight CSS is small (~3 KB woff2 subset) and the visual fidelity matters more than the few KB saved. 400-italic source-serif covers the `` rendering inside markdown responses; without it, the browser synthesizes italic from regular which leans rather than re-strokes the glyphs. */ /* CR-073 — align Tailwind's `dark:` variant with the platform's class-based dark mode. The app toggles dark via `
` in App.jsx; without this directive Tailwind v4 defaults to `@media (prefers-color-scheme: dark)` and `dark:` utilities never fire. This makes any `dark:bg-foo` / `dark:text-bar` utility apply when the user is inside the `.R.dark` container, regardless of OS preference. */ /* ── Custom Theme Tokens ────────────────────────────────────── Maps Tailwind utilities to existing CSS variables so that: text-brand → color: var(--brand) bg-surface → background: var(--s) text-md → font-size: 13px Dark mode works automatically via .R.dark overrides on :root. ──────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════ RESET — in @layer base so Tailwind utilities can override it ═══════════════════════════════════════════════════════════════ */ @layer base { *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } *:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; } } /* Scrollbar */ * { scrollbar-width:thin; scrollbar-color:var(--sa) transparent; } *::-webkit-scrollbar { width:6px; height:6px; } *::-webkit-scrollbar-track { background:transparent; } *::-webkit-scrollbar-thumb { background:var(--sa); border-radius:4px; } *::-webkit-scrollbar-thumb:hover { background:var(--t4); } /* ═══════════════════════════════════════════════════════════════ LIGHT MODE (default) -- Decision #5 ═══════════════════════════════════════════════════════════════ */ :root { /* Brand -- Katonic Purple #5C31FF is sacred */ --brand: #5C31FF; --brand-2: #7B57FF; --brand-deep:#3A1FB3; /* CR-074 (Phase 0): consolidated --brandL with --brand-tint (#F4EFFF). Both names referred to the same concept (brand light tint for count pills + ghost-button hover). The two used to drift to slightly different values. 2026-05-26: aligned to designer handoff (Control.zip) — light tint widened to #EFEAFE so the Quotas highlight ring, KPI accent, and active pills match the design source of truth. */ --brandL: #EFEAFE; --brandBg: #F8F4ED; /* warm beige sidebar (was purple-tinted) */ --brandGhost:#5C31FF18; /* Ghost button bg */ --brand-hover: #4825D6; /* 2026-05-29: --brand-tint declaration removed; canonical lives in tokens.css (#EDE8FF, the slightly-cooler variant). global.css previously re-declared it as #EFEAFE which collapsed it onto --brandL and silently shadowed the canonical value because tokens.css is imported BEFORE global.css in main.jsx. */ --brand-tint-border: #DDD2FA; /* Beige surface family moved to tokens.css (May 2026 reconciliation). The previous declarations here were drifting (--beige-card #FFFEFC, --beige-pill #F2EDE2, --beige-rule #ECE6D8) but the cascade was winning via global.css:2692's alias layer with different values. Now tokens.css is the single source of truth. */ /* Attention yellow -- Decision #3: single role */ --accent: #FFCC00; --accentBg: #FFF8DB; /* Surfaces */ --bg: #F8F4ED; --s: #FFFFFF; --sh: rgba(0,0,0,.03); --sa: #EAEAE8; --surface-input: #F8F4ED; /* 2026-05-29: --t, --t2, --t3, --t4 declarations removed from global.css; canonical values live in tokens.css (--t #1B1814, --t2 #3A332B, --t3 #6A6055, --t4 #857A6C). The duplicates here had drifted to lighter values (#171716/#3D3B38/#76726B/#A09B91) and were winning the cascade because global.css imports after tokens.css. */ /* Borders -- warm beige aligned */ --b: #EAE3D4; --bd: #E1DAC8; --bl2: #EFEAE2; --b-faint: #F2EFE9; /* Status -- three-color convention (green/amber/red). 2026-05-29: --ok, --warn, --err, --info base hex declarations removed; canonical values live in tokens.css (--ok #2F9163, --warn #B8761F, --err #B3422E, --info #2D6DB8). The duplicates here (#117A45 / #B58300 / #A23E2E / #1F58B5) had drifted and were shadowing the canonical values via cascade order. The -light / -bg / -border supplementaries below are still overridden here pending a follow-up consolidation pass — several have their own drift between the two files that wasn't in the original deletion scope. */ --ok-light: #E6F4EC; --ok-bg: #E6F4EC; --ok-border: #C9E5D6; --warn-light:#FFFCF4; --warn-bg: #FBEDD9; --warn-border:#F0E5C2; --err-light: #FBECE8; --err-bg: #FBE6DF; --err-border:#ECC9C0; --info-light:rgba(59,130,246,0.09); --info-bg: #E0ECF7; /* Tabular numerals — used across KPI strips, meters, tables */ --t5: #C8BFAF; /* Nav active state */ --nav-active-bg: #FFFFFF; --nav-active-shadow: 0 1px 2px rgba(20,20,30,.06), 0 1px 0 rgba(20,20,30,.04); /* Avatar */ --avatar-bg: #E1DAC8; /* 2026-05-29: --avatar-text removed; canonical lives in tokens.css (#3A332B, the new --t2 value). Previously this duplicate forced it to track the old #3D3B38 even after --t2 moved. */ /* Impersonation banner */ --impersonation-bg: #7C2222; --impersonation-text: #FFF1F1; --impersonation-pill-bg: rgba(255,255,255,.18); /* Layout spacing */ --topbar-height: 48px; --sidebar-width: 240px; --sidebar-rail-width: 60px; /* Z-index scale */ --z-impersonation: 70; --z-topbar: 60; --z-sidebar: 50; --z-dropdown: 80; --z-modal: 90; --z-toast: 100; /* Decorative (used in Studio for charts, badges, categories) */ --purple: #8B5CF6; --cyan: #06B6D4; --rose: #F43F5E; --orange: #F97316; /* 2026-05-29: --studio-accent removed; canonical lives in tokens.css (#2F9163, the new --ok value). Previously this duplicate forced it to track the old #117A45 even after --ok moved. */ /* Code */ --code-bg: #F5F5F4; --code-b: #E7E5E4; /* Typography — Decision #4: DM Sans everywhere, Serif for AI responses. The actual `--sans` / `--serif` / `--mono` stacks live in tokens.css (single source of truth) and match the canonical design exactly: -apple-system before BlinkMacSystemFont for sans (Apple's documented preference), Iowan Old Style as the iOS- native serif fallback, ui-monospace + SF Mono for mono. Pre-CR this block redefined them with weaker fallback stacks (missing BlinkMacSystemFont, Iowan Old Style, ui-monospace), and because global.css imports after tokens.css the weaker versions won the cascade. Removed so the canonical tokens.css stacks prevail. */ /* Transitions */ --ease: cubic-bezier(.4,0,.2,1); } /* ═══════════════════════════════════════════════════════════════ DARK MODE ═══════════════════════════════════════════════════════════════ */ /* ── Dark Mode — inspired by Claude Code's deep, warm aesthetic ────── Deeper blacks, warm cream text, richer contrast. Brand purple (#A78BFA) used for accents like Claude uses terracotta. ──────────────────────────────────────────────────────────────────── */ .R.dark { --brand: #A78BFA; --brandL: #1A1625; --brandBg: #0C0C0E; /* same as bg -- no purple tint (Claude Code style) */ --brandGhost:#A78BFA12; --brand-hover: #9B7AF5; --brand-tint: #1A1625; --brand-tint-border: #2D2350; --accent: #FBBF24; --accentBg: #1C1A0F; --bg: #0C0C0E; /* near-black, matches Claude Code terminal */ --s: #131316; /* barely elevated cards */ --sh: #1A1A1E; /* hover: subtle lift */ --sa: #222226; /* active */ --surface-input: #131316; --t: #EDEDEC; /* warm cream primary (not stark white) */ --t2: #B8B4AF; /* readable secondary */ --t3: #878380; /* tertiary */ --t4: #4A4845; /* quaternary */ --b: #1E1E22; /* barely-there borders */ --bd: #2A2A2E; /* border-dark */ --bl2: #161618; /* nearly invisible light border */ --b-faint: #1A1A1E; --code-bg: #111114; /* code block -- slightly darker than surface */ --code-b: #1E1E22; /* Nav active state -- dark */ --nav-active-bg: #1A1A1E; --nav-active-shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.15); /* Avatar -- dark */ --avatar-bg: #2A2A2E; --avatar-text: #B8B4AF; /* Impersonation -- same in dark */ --impersonation-bg: #7C2222; --impersonation-text: #FFF1F1; --impersonation-pill-bg: rgba(255,255,255,.18); /* Status light — more opaque on dark backgrounds */ --ok-light: rgba(34,197,94,0.12); --warn-light:rgba(251,191,36,0.12); --err-light: rgba(248,113,113,0.12); --info-light:rgba(96,165,250,0.12); /* Decorative — vibrant on deep dark backgrounds */ --purple: #C4B5FD; --cyan: #22D3EE; --rose: #FDA4AF; --orange: #FDBA74; --studio-accent: #4ADE80; /* ── Tailwind @theme overrides ──────────────────────────────── @theme bakes --color-* at compile time from :root values. We must re-declare them here so Tailwind utilities (text-text, bg-surface, border-border, etc.) resolve correctly in dark mode. */ --color-brand: #A78BFA; --color-brand-light: #1A1625; --color-brand-bg: #0C0C0E; --color-brand-ghost: #A78BFA12; --color-accent: #FBBF24; --color-accent-bg: #1C1A0F; --color-studio-accent: #4ADE80; --color-surface: #131316; --color-surface-hover: #1A1A1E; --color-surface-active:#222226; --color-bg: #0C0C0E; --color-text: #EDEDEC; --color-text-2: #B8B4AF; --color-text-3: #878380; --color-text-4: #4A4845; --color-border: #1E1E22; --color-border-dark: #2A2A2E; --color-border-2: #161618; --color-ok: #22C55E; --color-ok-light: rgba(34,197,94,0.10); --color-warn: #FBBF24; --color-warn-light: rgba(251,191,36,0.10); --color-err: #F87171; --color-err-light: rgba(248,113,113,0.10); --color-info: #60A5FA; --color-info-light: rgba(96,165,250,0.10); --color-purple: #C4B5FD; --color-cyan: #22D3EE; --color-rose: #FDA4AF; --color-orange: #FDBA74; --color-code-bg: #111114; --color-code-border: #1E1E22; } /* ═══════════════════════════════════════════════════════════════ ROOT LAYOUT ═══════════════════════════════════════════════════════════════ */ /* App shell — vertical column that holds DemoBanner + .R */ .app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .R { font-family: var(--sans); color: var(--t); background: var(--bg); flex: 1; min-height: 0; display: flex; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR -- warm beige surface ═══════════════════════════════════════════════════════════════ */ .S { width: var(--sidebar-width, 240px); background: var(--beige); /* #F8F4ED — sidebar surface per design system */ border-right: 1px solid var(--beige-b); /* #EAE3D4 — beige border per design (not --bd #E1DAC8) */ display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width .2s var(--ease); } .S.shut { width:0; border:0; } .S nav { display:flex; flex-direction:column; flex:1; min-height:0; } /* Sidebar scrollable area */ .S-body { flex: 1; overflow-y: auto; padding: 8px 8px 4px; } .S-body::-webkit-scrollbar-thumb { background:transparent; } .S-body:hover::-webkit-scrollbar-thumb { background:var(--sa); } /* Section headers -- Decision #7: collapsible */ .S-sec { display: flex; align-items: center; gap: 4px; padding: 14px 10px 6px; cursor: pointer; user-select: none; transition: opacity .15s; } .S-sec:hover { opacity:.8; } .S-sec-label { /* CR-447: 9.5px / .08em to match the canonical Control Room design (Katonic_7_Design_27_may → Control Room.html .S-sec). Pre-CR these were 10px / .5px which read as slightly chunkier than the design intends. */ font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--t4); flex: 1; } .S-sec-chev { color: var(--t4); transition: transform .2s var(--ease); flex-shrink: 0; } .S-sec-chev.shut { transform: rotate(-90deg); } /* Collapsible section body */ .S-sec-body { overflow: hidden; transition: max-height .25s var(--ease), opacity .2s; max-height: 500px; opacity: 1; } .S-sec-body.shut { max-height: 0; opacity: 0; } /* Nav items -- floating white card active state. CR-447: 12.5px to match canonical design (Control Room.html .S-it). Pre-CR this was 13px; combined with the 10px section labels it pushed the whole sidebar half a pixel chunkier than the design intends. */ .S-it { padding: 6px 10px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all .12s var(--ease); border: none; background: none; width: 100%; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--t2); text-align: left; position: relative; text-decoration: none; } .S-it:hover { background: var(--sh); } .S-it svg { color: var(--t3); transition: color .12s; flex-shrink:0; width:14px; height:14px; } .S-it:hover svg { color: var(--t2); } /* Active state: floating white card with shadow + violet icon */ .S-it.on { background: var(--nav-active-bg, #fff); color: var(--t); font-weight: 600; padding: 7px 10px; box-shadow: var(--nav-active-shadow); } .S-it.on::before { display: none; /* remove old left bar */ } .S-it.on svg { color: var(--brand); } /* CTA button (New Agent) — accent style to stand out in the sidebar */ .S-cta { padding: 8px 10px; margin: 4px 6px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; border: none; width: calc(100% - 12px); font-family: var(--sans); font-size: 13px; font-weight: 600; color: #fff; background: var(--brand); text-align: left; transition: opacity .12s var(--ease); } .S-cta:hover { opacity: .88; } .S-cta svg { color: #fff; flex-shrink: 0; } /* Badge (pending count) -- violet notification style */ .S-badge { margin-left: auto; min-width: 18px; height: 18px; border-radius: 12px; background: #FFFFFF; color: var(--brand); font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 7px; font-family: var(--mono); border: 1px solid var(--brand-tint-border, #E5DAFF); } /* Sidebar separator */ .S-sep { height:1px; background:var(--bl2); margin:8px 10px; } /* Sidebar footer */ .S-foot { padding: 8px 10px; border-top: 1px solid var(--bl2); display: flex; gap: 4px; } .S-foot-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; background: none; color: var(--t3); font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 8px; text-align: center; transition: all .12s; } .S-foot-btn:hover { background:var(--sh); color:var(--t2); } /* ═══════════════════════════════════════════════════════════════ MAIN CONTENT ═══════════════════════════════════════════════════════════════ */ .M { flex:1; display:flex; flex-direction:column; min-width:0; background: var(--beige-pg); /* #FCFBF8 — page bg, lighter than sidebar (#F8F4ED) */ } .page-scroll { flex: 1; overflow-y: auto; } .page-wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* CR-472 — same height-chain repair as CR-461 (BYOA), now for the global `.page-scroll` class which is the canonical scroll surface for non-journey Studio pages (Skills Library / Detail / Editor / Import, etc.). Bug: `
...
` wraps the content in `.page-enter` (animation-only, no flex / height) then a `.page-scroll` that declares `flex: 1; overflow-y: auto` (plus per-page inline `height: 100%; display: flex; flex-direction: column`). The studio shell `
` (App.jsx:540) IS a definite-height flex column, but `.page-enter` doesn't participate — it defaults to its content height. `.page-scroll`'s `flex: 1` has no flex parent to resolve against and `height: 100%` resolves to 100% of an auto-height container (i.e. content height). End result: the page is exactly as tall as its content, `overflow-y: auto` has nothing to clip, the studio shell's `overflow: hidden` truncates anything below the viewport, no scrollbar appears anywhere. User-reported on apollo.katonic.ai 2026-05-25 on a Skill detail page: "scroll not working then how check all in that area ?? rulle s 2 pint but bewl not seen so scrool working means we can check right so do ir" — the Skill detail's "Rules" list was visibly truncated past the visible fold with no scroll. CR-439 attempted a similar fix by removing `overflow: hidden` from the inline pageScrollStyle in the Skills pages, but the actual parent-chain anchor was still missing. CR-472 closes it via the same `:has()` pattern that CR-461 used for `.acj-page` — narrowly scoped so other PageShell consumers (Profiler / Resources / Tools / WorkroomConfig pages) that don't use `.page-scroll` are untouched. `:has()` is supported in all modern browsers (Chrome ≥ 105 / Safari ≥ 15.4 / Firefox ≥ 121 / Edge ≥ 105, all GA since Dec 2023) — same compatibility note as CR-461. */ .page-enter:has(> .page-scroll) { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* CR-152 follow-up — smooth scroll on the studio shell's main scroll container. AppStudioEmpty + AppStudioListPage have lots of vertical content (hero + framework grid + paths + readiness + footer), and the empty-state in particular felt static without easing. */ #main-content { scroll-behavior: smooth; } .page-scroll { scroll-behavior: smooth; } /* ═══════════════════════════════════════════════════════════════ TOPBAR ═══════════════════════════════════════════════════════════════ */ .TB { height: var(--topbar-height, 48px); display: flex; align-items: center; position: sticky; top: 0; z-index: var(--z-topbar, 60); background: var(--s); border-bottom: 1px solid var(--b); padding: 0 14px 0 10px; gap: 12px; flex-shrink: 0; } .TB-left { display:flex; align-items:center; gap:6px; } .TB-title { font-weight:700; color:var(--t); letter-spacing:-0.02em; font-size: var(--font-size-lg2, 0.9375rem); } .TB-right { margin-left:auto; display:flex; align-items:center; gap:4px; } .TB-btn { width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--t3); position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .1s var(--ease); } .TB-btn:hover { background: var(--sh); color: var(--t); } .TB-btn:active { transform: scale(.93); } .TB-search { display: flex; align-items: center; gap: 6px; min-width: 240px; background: var(--surface-input, var(--brandBg)); border: 1px solid var(--b); padding: 5px 12px; border-radius: 8px; color: var(--t3); font-family: var(--sans); font-size: 12px; cursor: pointer; transition: border-color .15s; } .TB-search:hover { border-color: var(--bd); } .TB-search kbd { font-size: 10px; font-family: var(--mono); background: var(--sh); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--bl2); margin-left: auto; color: var(--t4); } /* Notification bell badge */ .TB-notif-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); border: 1.5px solid #fff; } /* Avatar */ .av { width: 24px; height: 24px; border-radius: 50%; background: var(--avatar-bg, #E1DAC8); color: var(--avatar-text, #3D3B38); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .15s; flex-shrink: 0; font-family: var(--mono); } .av:hover { opacity:.8; } /* Avatar pill (topbar) */ .av-pill { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 4px; border-radius: 16px; background: var(--surface-input, var(--brandBg)); border: 1px solid var(--b); cursor: pointer; transition: all .15s; } .av-pill:hover { border-color: var(--bd); } /* Scope chip (topbar) */ .scope-chip { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t2); background: var(--surface-input, var(--brandBg)); border: 1px solid var(--b); padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: border-color .15s; } .scope-chip:hover { border-color: var(--bd); } .scope-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } /* Topbar link button */ .TB-link { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; background: transparent; border: none; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t2); cursor: pointer; transition: background .1s; white-space: nowrap; } .TB-link:hover { background: var(--sh); } .TB-link svg { width: 14px; height: 14px; } /* Topbar vertical divider */ .TB-div { width: 1px; height: 18px; background: var(--b); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ ICON RAIL (collapsed sidebar) ═══════════════════════════════════════════════════════════════ */ .icon-rail { width: var(--sidebar-rail-width, 60px); background: var(--brandBg); border-right: 1px solid var(--bd); display: flex; flex-direction: column; align-items: center; padding: 14px 0 10px; flex-shrink: 0; } .icon-rail-item { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: transparent; color: var(--t3); transition: all .1s; position: relative; margin: 1px 0; } .icon-rail-item:hover { background: var(--sh); color: var(--t); } .icon-rail-item svg { width: 17px; height: 17px; } .icon-rail-item.on { background: var(--brand-tint, #F4EFFF); color: var(--brand); } .icon-rail-item.on svg { color: var(--brand); } /* Rail notification badge */ .rail-badge { position: absolute; top: 4px; right: 4px; font-family: var(--mono); font-size: 9px; font-weight: 600; line-height: 13px; height: 13px; min-width: 13px; padding: 0 4px; background: var(--brand); color: #fff; border-radius: 6px; text-align: center; } /* Rail divider */ .icon-rail-div { width: 32px; height: 1px; background: var(--bd); margin: 10px 0; } /* ═══════════════════════════════════════════════════════════════ IMPERSONATION BANNER ═══════════════════════════════════════════════════════════════ */ .imp-banner { background: var(--impersonation-bg, #7C2222); color: var(--impersonation-text, #FFF1F1); padding: 8px 16px; display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 12px; font-weight: 500; position: sticky; top: 0; z-index: var(--z-impersonation, 70); } .imp-pill { font-family: var(--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; background: var(--impersonation-pill-bg, rgba(255,255,255,.18)); padding: 2px 8px; border-radius: 4px; } .imp-exit { background: none; border: none; color: inherit; cursor: pointer; text-decoration: underline; font-family: var(--sans); font-size: 12px; } .imp-exit:hover { opacity:.8; } /* ═══════════════════════════════════════════════════════════════ SIDEBAR FOOTER ═══════════════════════════════════════════════════════════════ */ .S-identity { padding: 10px; display: flex; align-items: center; gap: 9px; cursor: pointer; border-radius: 6px; transition: background .1s; } .S-identity:hover { background: var(--sh); } .S-collapse-hint { padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--t4); letter-spacing: 0.04em; border-top: 1px solid var(--b); } .S-collapse-hint kbd { font-family: var(--mono); font-size: 10px; color: var(--t3); background: #fff; border: 1px solid #DCD7CE; border-radius: 4px; padding: 0 4px; line-height: 18px; } /* Count pills on nav items */ .S-count { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 12px; } .S-count-notif { background: #fff; color: var(--brand); border: 1px solid var(--brand-tint-border, #E5DAFF); } .S-count-plain { color: var(--t4); } /* Section label (sidebar groups) */ .S-section-label { font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); padding: 14px 10px 6px; } .S-section-label:first-child { padding-top: 0; } /* Brand row in sidebar */ .S-brand { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: opacity .1s; } .S-brand:hover { opacity: .85; } .S-brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); border: none; box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 25%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } /* Tooltip */ .tip { position: fixed; z-index: 9999; pointer-events: none; background: #171716; color: #fff; font-family: var(--mono); font-size: 11px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; transform: translateY(-50%); } /* ═══════════════════════════════════════════════════════════════ DROPDOWNS ═══════════════════════════════════════════════════════════════ */ @keyframes dd-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } } .DD { position:absolute; background:var(--s); border:1px solid var(--b); border-radius:12px; z-index:200; padding:6px; box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06); animation: dd-in .15s var(--ease); } .DD-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; border:none; background:transparent; width:100%; font-family:var(--sans); text-align:left; color:var(--t); transition:background-color .15s,color .15s; } .DD-opt:hover { background:var(--sh); } .DD-opt.sel { background:var(--brandL); } .DD-lbl { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:var(--t3); padding:6px 8px 2px; } .DD-hr { height:1px; background:var(--bl2); margin:3px 6px; } .DD-icon { width:32px; height:32px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .DD-cur { font-size:12px; font-weight:600; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--brandL); color:var(--brand); margin-left:auto; } /* ═══════════════════════════════════════════════════════════════ PAGE LAYOUT HELPERS ═══════════════════════════════════════════════════════════════ */ .page-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 24px; } /* Decision #4: Serif for page titles, Mono for KPI labels. CR-447: default page title is 30px Source Serif 4, matching the canonical Control Room design source (Katonic_7_Design_27_may → Control Room.html, .pgh h1). A prior change (2026-05-26) pushed the default to 38px "so the Resources pages match the design's document-feel hierarchy", but that swelled every page title in the Control Room, not just Resources. Reverted to 30px; pages that genuinely want the heavier hero treatment (Resources et al.) opt in via `.page-title.hero`. */ .page-title { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--t); letter-spacing: -0.02em; line-height: 1.1; /* CR-485: class now applies to

(a11y), so reset browser default * margins to keep visual parity with the previous
usage. */ margin: 0; } .page-title.hero { font-size: 38px; line-height: 1.05; } .page-title em { font-style: italic; color: var(--t3); font-weight: 500; } .page-sub { font-family: var(--sans); font-size: 13px; color: var(--t3); margin-top: 8px; max-width: 640px; line-height: 1.5; } .page-sub b { color: var(--t2); font-weight: 600; } /* Page header chip row — `live`, `last 24h`, `updated 14s ago` style chips below the page title. Matches the canonical Control Room design's `.pgh-meta` (Katonic_7_Design_27_may → Control Room.html). CR-448. */ .page-meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .page-meta-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; background: #fff; border: 1px solid var(--beige-b); padding: 3px 9px; border-radius: 5px; color: var(--t2); } .page-meta-chip-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .page-meta-chip.muted { color: var(--t3); } /* ═══════════════════════════════════════════════════════════════ ATTENTION STRIP — operator incident-aware dashboard widget CR-448 · honors the "operator incident-aware Dashboard" claim from newwebsite.katonic.ai/control-room. ═══════════════════════════════════════════════════════════════ */ .attn-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: var(--warn-light, color-mix(in srgb, var(--warn) 8%, transparent)); border: 1px solid var(--warn-light, color-mix(in srgb, var(--warn) 18%, transparent)); border-radius: 10px; margin-bottom: 18px; } .attn-strip-loading { padding: 14px; background: var(--beige); border: 1px solid var(--beige-b); } .attn-skel { height: 16px; background: var(--beige-rule); border-radius: 4px; width: 40%; opacity: .5; } .attn-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff; border: 1px solid var(--beige-b); border-radius: 7px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--t2); cursor: pointer; transition: border-color .12s var(--ease), box-shadow .12s var(--ease); } .attn-item:hover { border-color: var(--bd); box-shadow: 0 1px 3px rgba(20,20,30,.06); } .attn-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .attn-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .attn-icon svg { width: 14px; height: 14px; } .attn-count { font-family: var(--mono); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--t); padding: 1px 6px; border-radius: 4px; background: var(--beige); } .attn-label { color: var(--t2); font-weight: 500; } .attn-warn .attn-icon { color: var(--warn); } .attn-warn .attn-count { background: var(--warn-light, color-mix(in srgb, var(--warn) 12%, transparent)); color: var(--warn); } .attn-err .attn-icon { color: var(--err); } .attn-err .attn-count { background: var(--err-light, color-mix(in srgb, var(--err) 12%, transparent)); color: var(--err); } .attn-err { border-color: var(--err-light, color-mix(in srgb, var(--err) 25%, transparent)); } @media (prefers-reduced-motion: reduce) { .attn-item { transition: none; } } /* ═══════════════════════════════════════════════════════════════ DASHBOARD METRIC GRID — fixed 4-column matching canonical design .metrics-4 enforces the design's `.metrics { grid-template-columns: repeat(4,1fr); }`. Use this instead of auto-fill on the Dashboard. ═══════════════════════════════════════════════════════════════ */ .metrics-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1100px) { .metrics-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .metrics-4 { grid-template-columns: 1fr; } } /* Cards */ .card { background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 18px 20px; transition: border-color .15s, box-shadow .15s; } .card-p { padding: 18px 20px; } .card-hover { cursor: pointer; } .card-hover:hover { border-color: var(--bd); box-shadow: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); } .card-click { cursor: pointer; } .card-click:hover { border-color: var(--bd); } /* ═══════════════════════════════════════════════════════════════ BUTTONS -- Decision #2: ghost purple buttons ═══════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; min-height: 36px; border-radius: 8px; border: 1px solid var(--b); background: var(--s); color: var(--t2); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .12s var(--ease); white-space: nowrap; text-decoration: none; line-height: 1; box-sizing: border-box; } .btn:hover { background:var(--sh); border-color:var(--bd); } .btn:active { transform:scale(.97); } .btn:disabled { opacity:.5; cursor:not-allowed; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn.pri { background: var(--brand); color: #fff; border-color: var(--brand); } .btn.pri:hover { filter:brightness(1.1); } /* Ghost purple -- new */ .btn.ghost { background: var(--brandGhost); color: var(--brand); border-color: var(--brand); border-width: 1px; } .btn.ghost:hover { background:var(--brandL); } .btn.sm { padding:5px 12px; font-size:12px; min-height:32px; } .btn.danger { color:var(--err); border-color:var(--err); } .btn.danger:hover { background:#FEF2F2; } /* Dark variant — used by the canonical Control Room Dashboard Refresh button (Katonic_7_Design_27_may → Control Room.html .btn.dark). Reads as a low-key primary; lives next to a heading without competing with brand-purple .pri. */ .btn.dark { background: var(--t); color: #FAFAF7; border-color: var(--t); } .btn.dark:hover { filter: brightness(1.15); background: var(--t); border-color: var(--t); } /* ═══════════════════════════════════════════════════════════════ EMPTY STATE -- Decision #9 ═══════════════════════════════════════════════════════════════ */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; } .empty-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .empty-title { font-size: 15px; font-weight: 600; color: var(--t); margin-bottom: 6px; } .empty-desc { font-size: 13px; color: var(--t3); max-width: 360px; line-height: 1.5; margin-bottom: 20px; } /* ═══════════════════════════════════════════════════════════════ TABLES ═══════════════════════════════════════════════════════════════ */ .tbl-wrap { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; overflow: auto; } .tbl { width: 100%; border-collapse: separate; border-spacing: 0; } .tbl th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--t4); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--b); background: var(--sh); position: sticky; top: 0; z-index: 1; } .tbl th:first-child { border-radius:8px 0 0 0; } .tbl th:last-child { border-radius:0 8px 0 0; } .tbl td { padding: 12px 14px; font-size: 13px; color: var(--t2); vertical-align: middle; } .tbl tr:not(:last-child) td { border-bottom:1px solid var(--bl2); } .tbl tbody tr { cursor:pointer; transition:background .1s; } .tbl tbody tr:hover { background:var(--sh); } /* ═══════════════════════════════════════════════════════════════ BADGES ═══════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1; box-sizing: border-box; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ FORM ELEMENTS ═══════════════════════════════════════════════════════════════ */ .input, .select { width: 100%; padding: 9px 12px; border: 1px solid var(--b); border-radius: 8px; font-family: var(--sans); font-size: 13px; color: var(--t); background: var(--s); outline: none; transition: border-color .15s; } .input:focus, .select:focus { border-color:var(--brand); } .input::placeholder { color:var(--t4); } .input-error { border-color:var(--err); } .input-error:focus { border-color:var(--err); box-shadow:0 0 0 2px rgba(239,68,68,.15); } .select { appearance:auto; } .field { margin-bottom: 16px; } .field-label { font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 6px; display: block; } .field-hint { font-size: 11px; color: var(--t3); margin-top: 4px; } .field-error { font-size: 11px; color: var(--err); margin-top: 4px; font-weight: 500; } /* ═══════════════════════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════════════════════ */ @keyframes modal-in { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } } @keyframes overlay-in { from { opacity:0; } to { opacity:1; } } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 300; animation: overlay-in .15s; } .modal-box { background: var(--s); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.15); max-height: 82vh; overflow-y: auto; animation: modal-in .2s var(--ease); } .modal-box.sm { width:480px; } .modal-box.md { width:560px; } .modal-box.lg { width:720px; } .modal-box.xl { width:900px; } .modal-hdr { padding: 20px 24px 16px; border-bottom: 1px solid var(--bl2); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--s); border-radius: 12px 16px 0 0; z-index: 1; } .modal-title { font-size: 16px; font-weight: 700; color: var(--t); letter-spacing: -0.01em; } .modal-body { padding: 20px 24px; } .modal-foot { padding: 16px 24px; border-top: 1px solid var(--bl2); display: flex; align-items: center; justify-content: flex-end; gap: 10px; } /* ═══════════════════════════════════════════════════════════════ METRIC CARDS ═══════════════════════════════════════════════════════════════ */ .metric { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s; } .metric:hover { border-color:var(--b); } .metric.clickable { cursor:pointer; } .metric.clickable:hover { box-shadow:0 2px 12px rgba(0,0,0,.04); } .metric-label { /* CR-063 / brief §8: KPI labels in mono uppercase, letter-spaced so they read as schematic chrome rather than prose. Switch from sans 12px 500 to mono 11px 500 uppercase 0.04em. */ font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t3); display: flex; align-items: center; gap: 6px; } .metric-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .metric-value { /* CR-063 / brief §8: KPI numbers in Source Serif 600 30px. The serif carries the editorial / document feel of the platform. Add `.metric-value.compact` (24px) for tighter dashboards where 30px doesn't fit. tabular-nums kept so columns of metrics align on the decimal. */ font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--t); font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; } .metric-value.compact { font-size: 24px; } .metric-delta { /* CR-447: 11.5px to match canonical design (Control Room.html .m-delta). 0.5px nudge, but matters for the editorial feel. */ font-size: 11.5px; color: var(--t3); } /* ═══════════════════════════════════════════════════════════════ DETAIL VIEW COMPONENTS ═══════════════════════════════════════════════════════════════ */ .det-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t3); cursor: pointer; border: none; background: none; font-family: var(--sans); padding: 0; margin-bottom: 16px; transition: color .12s; } .det-back:hover { color:var(--brand); } .det-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } .det-head-left { display: flex; align-items: center; gap: 14px; } .det-icon { width: 44px; height: 44px; border-radius: 12px; color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .det-name { font-size: 22px; font-weight: 700; color: var(--t); letter-spacing: -0.02em; } .det-meta { font-size: 12px; color: var(--t3); margin-top: 2px; display: flex; align-items: center; gap: 8px; } .det-actions { display:flex; align-items:center; gap:10px; } .det-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; } .det-field { padding: 14px; background: var(--sh); border-radius: 12px; min-width: 0; /* grid items shrink properly so long values wrap instead of overflow */ overflow: hidden; } .det-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--t4); margin-bottom: 4px; } .det-field-value { font-size: 14px; font-weight: 500; color: var(--t); word-break: break-word; overflow-wrap: anywhere; } .det-field-value.mono { font-family: var(--mono); font-size: 13px; } /* ═══════════════════════════════════════════════════════════════ TABS ═══════════════════════════════════════════════════════════════ */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bl2); margin-bottom: 20px; } .tab { padding: 8px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t3); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; margin-bottom: -1px; } .tab:hover { color:var(--t2); } .tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ LOGS PANEL ═══════════════════════════════════════════════════════════════ */ .logs-panel { background: #1a1917; border-radius: 12px; padding: 16px; font-family: var(--mono); font-size: 12px; color: #a8a29e; max-height: 300px; overflow-y: auto; line-height: 1.7; } .logs-panel .log-line { display:flex; gap:12px; } .logs-panel .log-ts { color:#78716c; flex-shrink:0; } .logs-panel .log-msg { color:#d6d3d1; word-break:break-all; } .logs-panel .log-err { color:#f87171; } /* ═══════════════════════════════════════════════════════════════ CONFIRM DIALOG ═══════════════════════════════════════════════════════════════ */ .confirm-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .confirm-icon.warn { background:#FEF3C7; color:#D97706; } .confirm-icon.danger { background:#FEE2E2; color:#DC2626; } .confirm-title { font-size:15px; font-weight:600; color:var(--t); margin-bottom:6px; } .confirm-msg { font-size:13px; color:var(--t3); line-height:1.5; } /* ═══════════════════════════════════════════════════════════════ LINK CELLS ═══════════════════════════════════════════════════════════════ */ .link { color:var(--brand); font-weight:500; cursor:pointer; transition:opacity .1s; } .link:hover { opacity:.8; } /* ═══════════════════════════════════════════════════════════════ MISC ═══════════════════════════════════════════════════════════════ */ /* Subtle grid gap utility */ .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } /* Tag pills */ .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--sh); color: var(--t3); } /* Skeleton loading */ @keyframes shimmer { to { background-position: -200% 0; } } .skel { background: linear-gradient(90deg, var(--sh) 25%, var(--sa) 37%, var(--sh) 63%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 6px; } /* GPU bar */ .gpu-bar { height: 6px; border-radius: 4px; background: var(--sa); overflow: hidden; } .gpu-bar-fill { height: 100%; border-radius: 4px; transition: width .4s var(--ease); } /* Progress bar */ .pbar { height: 4px; border-radius: 4px; background: var(--sa); overflow: hidden; } .pbar-fill { height: 100%; border-radius: 4px; background: var(--brand); transition: width .4s var(--ease); } /* ── Page transitions & section animations ─────────────────────────────── */ /* NOTE: opacity-only — do NOT add `transform` here. A non-`none` transform on .page-enter / .page-section creates a containing block for position:fixed descendants (CSS spec), which traps modal overlays (e.g. .mcp-detail-overlay) inside the page wrapper instead of the viewport. Animating margin/top instead of transform reflows on every frame. Keep this fade-only. */ @keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } } /* CR-450: Health page · pulse-ring on live healthy service dots. Was inlined in SystemHealth.jsx; promoted here so it's reusable and the JSX stays clean. The animated dot still scopes the ring with `position: relative` on the parent. */ @keyframes pulse-ring { 0% { transform: scale(1); opacity: .3; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } /* Health page · service row pattern. Single flat row, no per-row card chrome. Status carried by the dot; warn/err rows tint background. */ .health-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 0.5px solid var(--bl2); font-size: 13px; color: var(--t2); background: transparent; cursor: pointer; transition: background .12s var(--ease); } .health-row:last-child { border-bottom: none; } .health-row:hover { background: rgba(0,0,0,0.018); } .health-row.warn { background: color-mix(in srgb, var(--warn) 4%, transparent); } .health-row.err { background: color-mix(in srgb, var(--err) 5%, transparent); } .health-row.err:hover { background: color-mix(in srgb, var(--err) 8%, transparent); } .health-row-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .health-row-dot.healthy { background: var(--ok); } .health-row-dot.healthy::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--ok); opacity: .25; animation: pulse-ring 2s ease infinite; } .health-row-dot.checking { background: var(--t4); } .health-row-dot.err { background: var(--err); } .health-row-dot.warn { background: var(--warn); } .health-row-dot.unknown { background: var(--t4); } .health-row-name { font-weight: 500; color: var(--t); flex-shrink: 0; min-width: 0; } .health-row-port { font: 500 11px var(--mono); color: var(--t4); flex-shrink: 0; } .health-row-desc { font-size: 12.5px; color: var(--t3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .health-row-stat { font: 500 11px var(--mono); color: var(--t3); flex-shrink: 0; text-align: right; min-width: 60px; } .health-row-stat.ok { color: var(--ok); font-weight: 600; } .health-row-stat.err { color: var(--err); font-weight: 700; } .health-row-stat.warn { color: var(--warn); font-weight: 600; } .health-row-stat.unknown { color: var(--t4); } /* Health page · service group header */ .health-group { background: #fff; border: 0.5px solid var(--beige-b); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .health-group-hdr { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 0.5px solid var(--beige-rule); background: #fff; } .health-group-mark { width: 4px; height: 18px; border-radius: 2px; flex-shrink: 0; } .health-group-label { font: 600 13px var(--sans); color: var(--t); flex: 1; } .health-group-count { font: 500 11px var(--mono); letter-spacing: .04em; color: var(--t3); } /* CR-480: .page-enter must be both a flex ITEM (fills the parent overflow-hidden column) and a flex CONTAINER (so its children can use flex:1). Without these, .page-enter has height:auto and all descendants that rely on flex:1 or height:100% to establish scroll regions get height:auto instead of a bounded px height — causing every PageShell page (skills, developer hub, workspace, etc.) to overflow silently past the viewport with no scrollbar. NOTE: flex/display do NOT create a containing block for position:fixed — only transform/filter/will-change:transform do. The opacity-only animation above stays safe. */ .page-enter { animation: pageEnter .25s var(--ease) both; flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Canonical page padding — single source of truth for every page wrapped in . Matches design system Quick Start template (`padding: 24px 28px 40px`). Replaces per-page Shell variants (Dashboard's local Shell, App.jsx zone container's px-7 py-6, etc). The .zone-canvas parent suppresses its own padding via :has() when a .page-shell child exists, so this never causes double-padding. */ .page-enter.page-shell { padding: 24px 28px 40px; } /* Zone canvas — wraps each top-level route container (Studio, Platform, Marketplace). Provides fallback page padding so pages that don't use still get gutters and don't run flush against the sidebar divider. When the page DOES use PageShell, the :has() rule below removes this fallback so PageShell's own padding wins (no double-padding). */ .zone-canvas { padding: 24px 28px 40px; } /* Any descendant .page-shell (PageShell-wrapped page) takes over padding — could be 5-6 levels deep through Suspense/Routes/PageBoundary. */ .zone-canvas:has(.page-shell) { padding: 0; } /* Staggered children: each .page-section gets a delay */ .page-section { opacity: 0; animation: pageEnter .3s var(--ease) both; } .page-section:nth-child(1) { animation-delay: 0s; } .page-section:nth-child(2) { animation-delay: .05s; } .page-section:nth-child(3) { animation-delay: .1s; } .page-section:nth-child(4) { animation-delay: .15s; } .page-section:nth-child(5) { animation-delay: .2s; } .page-section:nth-child(6) { animation-delay: .25s; } /* Crossfade wrapper: skeleton -> content */ .crossfade { position: relative; } .crossfade-out { transition: opacity .2s var(--ease); } .crossfade-in { transition: opacity .25s var(--ease) .05s; } /* Skeleton variants */ .skel-metric { height: 88px; border-radius: 12px; } .skel-card { height: 200px; border-radius: 12px; } .skel-row { height: 40px; border-radius: 6px; margin-bottom: 6px; } .skel-circle { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* Toast / notification animations */ @keyframes slide-in-right { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } } @keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Toast notification system ─────────────────────────────────────── */ .toast-container { position: fixed; bottom: 24px; right: 16px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 420px; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--s); border: 1px solid var(--bl2); box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); font-size: 13px; line-height: 1.45; color: var(--t); animation: toastIn .25s ease-out; min-width: 280px; } .toast-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .toast-success .toast-icon { background: #DCFCE7; color: #16A34A; } .toast-error .toast-icon { background: #FEE2E2; color: #DC2626; } .toast-warning .toast-icon { background: #FEF3C7; color: #D97706; } .toast-info .toast-icon { background: #DBEAFE; color: #2563EB; } .toast-success { border-left: 3px solid #16A34A; } .toast-error { border-left: 3px solid #DC2626; } .toast-warning { border-left: 3px solid #D97706; } .toast-info { border-left: 3px solid #2563EB; } .toast-msg { flex: 1; word-break: break-word; } .toast-close { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 2px; color: var(--t4); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .toast-close:hover { background: var(--sh); color: var(--t2); } /* ── Error Boundary fallback ─────────────────────────────────────── */ .error-boundary { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; padding: 40px 24px; text-align: center; gap: 16px; } .error-boundary-icon { width: 56px; height: 56px; border-radius: 12px; background: #FEE2E2; color: #DC2626; display: flex; align-items: center; justify-content: center; } .error-boundary h2 { font-size: 18px; font-weight: 600; color: var(--t); margin: 0; } .error-boundary p { font-size: 14px; color: var(--t3); margin: 0; max-width: 420px; } .error-boundary details { font-size: 12px; color: var(--t4); font-family: var(--mono); max-width: 600px; text-align: left; background: var(--sh); border-radius: 8px; padding: 12px; overflow-x: auto; } .error-boundary button { margin-top: 4px; } /* ── RTL (Right-to-Left) layout support ──────────────────────────────────── */ /* Applied when is set by i18n/config.js for Arabic / Urdu */ [dir="rtl"] { /* Flip the main shell so the sidebar appears on the right */ direction: rtl; text-align: right; } /* Sidebar: logical positioning — stays on the correct side in both LTR/RTL */ [dir="rtl"] .shell-sidebar { right: 0; left: auto; border-right: none; border-left: 1px solid var(--b2); } [dir="rtl"] .shell-main { margin-right: var(--sidebar-width, 260px); margin-left: 0; } /* Navigation chevrons and breadcrumbs */ [dir="rtl"] .icon-directional, [dir="rtl"] .chevron-right, [dir="rtl"] .nav-arrow { transform: scaleX(-1); } /* Flip icons that imply direction (arrows, back/forward, send) */ [dir="rtl"] .icon-arrow-right, [dir="rtl"] .icon-send, [dir="rtl"] .icon-chevron-right, [dir="rtl"] .icon-arrow-left { transform: scaleX(-1); } /* DO NOT mirror: check, search, settings, clock, play, star, upload, download */ [dir="rtl"] .icon-check, [dir="rtl"] .icon-search, [dir="rtl"] .icon-settings, [dir="rtl"] .icon-clock, [dir="rtl"] .icon-play, [dir="rtl"] .icon-star { transform: none !important; } /* Progress bars fill from right in RTL */ [dir="rtl"] .progress-bar-fill { right: 0; left: auto; } /* Chat bubbles: flip user/assistant sides */ [dir="rtl"] .chat-message-user { margin-right: auto; margin-left: 0; align-items: flex-start; } [dir="rtl"] .chat-message-assistant { margin-left: auto; margin-right: 0; align-items: flex-end; } /* Input bar send button */ [dir="rtl"] .chat-input-actions { flex-direction: row-reverse; } /* Tables: header text alignment */ [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* Modals and panels */ [dir="rtl"] .right-panel { right: auto; left: 0; border-right: 1px solid var(--b2); border-left: none; } /* Padding/margin logical property fallbacks for browsers that don't support padding-inline-start yet — these explicit RTL overrides handle them: */ [dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; } [dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; } [dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; } [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } [dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; } [dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; } /* Pagination */ [dir="rtl"] .pagination-prev { order: 1; } [dir="rtl"] .pagination-next { order: -1; } /* Flex row gaps flip naturally with direction: rtl but gap utilities need help */ [dir="rtl"] .flex-row { flex-direction: row-reverse; } /* Don't reverse column flex */ [dir="rtl"] .flex-col { flex-direction: column; } /* Text alignment overrides */ [dir="rtl"] .text-left { text-align: right; } [dir="rtl"] .text-right { text-align: left; } /* CJK / Devanagari / Arabic font stacks — loaded from system fonts or optional CDN imports. The platform ships these from the installer image. */ :lang(ar), :lang(ur) { font-family: "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif; line-height: 1.8; /* Arabic script needs more line-height */ } :lang(hi) { font-family: "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif; line-height: 1.7; } :lang(zh-CN) { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } :lang(ja) { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; } :lang(ko) { font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════════ SKIP-TO-CONTENT LINK — a11y ═══════════════════════════════════════════════════════════════ */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--brand); color: #fff; border-radius: 0 0 8px 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 0; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS ═══════════════════════════════════════════════════════════════ */ /* Tablet — sidebar overlay, single-column grids */ @media (max-width: 1024px) { .S { position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; box-shadow: 4px 0 24px rgba(0,0,0,.12); } .S.shut { width:0; box-shadow:none; } /* Grids collapse to fewer columns */ .grid-4 { grid-template-columns: repeat(2, 1fr); } .det-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile — full-width everything */ @media (max-width: 640px) { .S { width: 280px; } /* Content padding tightens */ .page-wrap { padding: 0 16px; } /* Grid utilities go single-column */ .grid-3, .grid-4 { grid-template-columns: 1fr; } .det-grid { grid-template-columns: 1fr; } /* Tables become horizontally scrollable */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl { min-width: 600px; } /* Page header stacks */ .page-hdr { flex-direction: column; align-items: flex-start; } /* Search bar in topbar hides on small screens */ .TB-search { display: none; } /* Modal goes full-width */ .modal-box.sm, .modal-box.md, .modal-box.lg, .modal-box.xl { width: calc(100vw - 32px); max-height: 90vh; } } /* ═══════════════════════════════════════════════════════════════ CONTEXT TOAST (DialogContext) ═══════════════════════════════════════════════════════════════ */ .ctx-toast { border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 16px rgba(0,0,0,.1); display: flex; align-items: center; gap: 8px; animation: toastIn .25s ease-out; pointer-events: auto; min-width: 220px; max-width: 380px; } .ctx-toast-icon { line-height: 1; display: flex; align-items: center; } .ctx-toast-success { background: #ECFDF5; border: 1px solid #059669; color: #065F46; } .ctx-toast-error { background: #FEF2F2; border: 1px solid #DC2626; color: #991B1B; } .ctx-toast-info { background: #EFF6FF; border: 1px solid #3B82F6; color: #1E40AF; } .ctx-toast-warning { background: #FFFBEB; border: 1px solid #F59E0B; color: #92400E; } /* ═══════════════════════════════════════════════════════════════ DARK MODE — Component overrides ═══════════════════════════════════════════════════════════════ */ /* Confirm dialog icons */ .R.dark .confirm-icon.warn { background: #78350F; color: #FCD34D; } .R.dark .confirm-icon.danger { background: #7F1D1D; color: #FCA5A5; } /* Context toasts (DialogContext) */ .R.dark .ctx-toast-success { background: #064E3B; border-color: #059669; color: #6EE7B7; } .R.dark .ctx-toast-error { background: #7F1D1D; border-color: #DC2626; color: #FCA5A5; } .R.dark .ctx-toast-info { background: #1E3A5F; border-color: #3B82F6; color: #93C5FD; } .R.dark .ctx-toast-warning { background: #78350F; border-color: #F59E0B; color: #FCD34D; } /* Legacy toast icons (global toast system) */ .R.dark .toast-success .toast-icon { background: #064E3B; color: #6EE7B7; } .R.dark .toast-error .toast-icon { background: #7F1D1D; color: #FCA5A5; } .R.dark .toast-warning .toast-icon { background: #78350F; color: #FCD34D; } .R.dark .toast-info .toast-icon { background: #1E3A5F; color: #93C5FD; } /* Error boundary */ .R.dark .error-boundary-icon { background: #7F1D1D; color: #FCA5A5; } /* ═══════════════════════════════════════════════════════════════ MCP Catalog Detail Modal ═══════════════════════════════════════════════════════════════ */ .mcp-detail-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; } .mcp-detail-dialog { background: var(--s, #fff); border-radius: 12px; width: min(1100px, 95vw); max-height: min(780px, 92vh); display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); border: 1px solid var(--bl2, #e2e8f0); overflow: hidden; } /* Top bar */ .mcp-detail-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--bl2, #e2e8f0); flex-shrink: 0; background: var(--s); } .mcp-detail-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .mcp-detail-topbar-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; flex-shrink: 0; background: var(--bg); } .mcp-detail-topbar-logo--ph { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brandL, color-mix(in srgb, var(--brand) 8%, transparent)); border: 1px solid var(--bl2); } .mcp-detail-topbar-name { font-size: 15px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mcp-detail-topbar-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* 2-column layout */ .mcp-detail-layout { display: grid; grid-template-columns: 300px 1fr; flex: 1; overflow: hidden; } /* Left column */ .mcp-detail-left { padding: 24px; border-right: 1px solid var(--bl2, #e2e8f0); overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } .mcp-detail-identity { display: flex; flex-direction: column; gap: 8px; } .mcp-detail-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--bg); border: 1px solid var(--bl2); } .mcp-detail-logo--ph { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--brand); background: var(--brandL, color-mix(in srgb, var(--brand) 8%, transparent)); } .mcp-detail-title { font-size: 18px; font-weight: 700; color: var(--t); margin: 0; line-height: 1.3; } .mcp-detail-desc { font-size: 13px; color: var(--t2); line-height: 1.6; margin: 0; } /* Stats grid */ .mcp-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .mcp-detail-stat { display: flex; flex-direction: column; gap: 4px; } .mcp-detail-stat-label { font-size: 10px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; } .mcp-detail-stat-value { font-size: 18px; font-weight: 700; color: var(--t); line-height: 1.2; } .mcp-detail-stat-value--text { font-size: 13px; font-weight: 500; color: var(--t); line-height: 1.4; } /* Links */ .mcp-detail-links { display: flex; gap: 8px; } .mcp-detail-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--brand); text-decoration: none; font-weight: 500; } .mcp-detail-link:hover { text-decoration: underline; } /* Right column — tools */ .mcp-detail-right { overflow-y: auto; display: flex; flex-direction: column; } .mcp-detail-tools { flex: 1; display: flex; flex-direction: column; } .mcp-detail-tools-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--bl2); flex-shrink: 0; } .mcp-detail-section-title { font-size: 14px; font-weight: 600; color: var(--t); margin: 0; display: flex; align-items: center; gap: 8px; } .mcp-detail-tools-count { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brandL, color-mix(in srgb, var(--brand) 8%, transparent)); padding: 1px 8px; border-radius: 12px; } /* Tool search */ .mcp-detail-tools-search { position: relative; } .mcp-detail-tools-search-ic { position: absolute; left: 8px; top: 7px; width: 14px; height: 14px; color: var(--t4); } .mcp-detail-tools-search-input { padding: 6px 10px 6px 28px; border-radius: 6px; border: 1px solid var(--bd); background: var(--bg); color: var(--t); font-size: 12px; font-family: var(--sans); outline: none; width: 180px; } .mcp-detail-tools-search-input:focus { border-color: var(--brand); } /* Tool list */ .mcp-detail-tools-list { flex: 1; overflow-y: auto; padding: 8px 16px; } .mcp-detail-tool-card { padding: 14px 16px; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--bl2, #e2e8f0); background: var(--bg); transition: border-color .15s, box-shadow .15s; } .mcp-detail-tool-card:hover { border-color: var(--brand); box-shadow: 0 1px 4px color-mix(in srgb, var(--brand) 6%, transparent); } .mcp-detail-tool-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand); font-family: var(--mono, monospace); } .mcp-detail-tool-ic { width: 14px; height: 14px; color: var(--t4); flex-shrink: 0; } .mcp-detail-tool-desc { font-size: 12px; color: var(--t3); line-height: 1.6; margin: 6px 0 0 22px; word-break: break-word; max-width: 100%; } .mcp-detail-tools-empty { padding: 40px 20px; text-align: center; color: var(--t4); font-size: 13px; } /* Config form */ .mcp-detail-config { flex: 1; overflow-y: auto; padding: 24px; } .mcp-detail-config-hint { font-size: 11px; color: var(--t4); margin-top: 4px; } /* Footer */ .mcp-detail-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--bl2); flex-shrink: 0; } /* Responsive */ @media (max-width: 768px) { .mcp-detail-layout { grid-template-columns: 1fr; } .mcp-detail-left { border-right: none; border-bottom: 1px solid var(--bl2); } } /* Dark mode overrides */ .R.dark .mcp-detail-dialog { background: var(--s); border-color: var(--bl2); } .R.dark .mcp-detail-modal { background: var(--s); border-color: var(--bl2); } /* --bl2 is the "nearly invisible" border used on light-mode elevated surfaces; in dark mode its value (#161618) is almost identical to the card surface (#131316), so the tool-card outline disappears. Use --bd (#2A2A2E) for a visible-but-subtle dark-mode border. */ .R.dark .mcp-detail-tool-card { background: var(--s); border-color: var(--bd); } .R.dark .mcp-detail-tool-card:hover { border-color: var(--brand); } /* Modal container — alias for dialog (used by Tools.jsx) */ .mcp-detail-modal { background: var(--s, #fff); border-radius: 12px; width: min(1100px, 95vw); max-height: min(780px, 92vh); display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); border: 1px solid var(--bl2, #e2e8f0); overflow: hidden; position: relative; z-index: 2; } /* Backdrop for click-to-close */ .mcp-detail-backdrop { position: absolute; inset: 0; z-index: 1; } /* Topbar action buttons */ .mcp-detail-topbar-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bl2, #e2e8f0); background: var(--s); font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .12s; white-space: nowrap; } .mcp-detail-topbar-btn:hover { border-color: var(--brand); color: var(--brand); } .mcp-detail-topbar-btn--configure { background: var(--brand); border-color: var(--brand); color: white; } .mcp-detail-topbar-btn--configure:hover { filter: brightness(1.08); color: white; } .mcp-detail-topbar-btn--deployed { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.2); color: #16a34a; cursor: default; } /* Close button */ .mcp-detail-close { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--t3); font-size: 20px; cursor: pointer; transition: all .1s; flex-shrink: 0; } .mcp-detail-close:hover { background: var(--sh); color: var(--t); } /* Tags */ .mcp-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; } .mcp-detail-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--sh); color: var(--t3); } /* ═══════════════════════════════════════════════════════════════════════════ RTL Overrides — additional component-level fixes (The base RTL rules are above near line 1188; these cover remaining gaps) ═══════════════════════════════════════════════════════════════════════════ */ /* ── A. Margin swaps ─────────────────────────────────────────────────────── */ /* .S-badge — margin-left:auto → margin-right:auto */ [dir="rtl"] .S-badge { margin-left: 0; margin-right: auto; } /* .TB-search kbd — margin-left:auto → margin-right:auto */ [dir="rtl"] .TB-search kbd { margin-left: 0; margin-right: auto; } /* .mcp-detail-tool-desc — margin 6px 0 0 22px → 6px 22px 0 0 */ [dir="rtl"] .mcp-detail-tool-desc { margin: 6px 22px 0 0; } /* ── B. Border swaps ─────────────────────────────────────────────────────── */ /* .S (sidebar) — border-right → border-left */ [dir="rtl"] .S { border-right: none; border-left: 1px solid var(--bl2); } /* .toast-success / error / warning / info — border-left → border-right */ [dir="rtl"] .toast-success { border-left: none; border-right: 3px solid #16A34A; } [dir="rtl"] .toast-error { border-left: none; border-right: 3px solid #DC2626; } [dir="rtl"] .toast-warning { border-left: none; border-right: 3px solid #D97706; } [dir="rtl"] .toast-info { border-left: none; border-right: 3px solid #2563EB; } /* .mcp-detail-left — border-right → border-left */ [dir="rtl"] .mcp-detail-left { border-right: none; border-left: 1px solid var(--bl2, #e2e8f0); } /* ── C. Position swaps ───────────────────────────────────────────────────── */ /* .toast-container — right:16px → left:16px */ [dir="rtl"] .toast-container { right: auto; left: 16px; } /* .skip-link — left:16px → right:16px */ [dir="rtl"] .skip-link { left: auto; right: 16px; } /* .mcp-detail-tools-search-ic — left:8px → right:8px */ [dir="rtl"] .mcp-detail-tools-search-ic { left: auto; right: 8px; } /* Tablet sidebar — left:0 → right:0 */ @media (max-width: 1024px) { [dir="rtl"] .S { left: auto; right: 0; box-shadow: -4px 0 24px rgba(0,0,0,.12); } } /* ── D. Text-align swaps ─────────────────────────────────────────────────── */ /* .S-it — text-align:left → right */ [dir="rtl"] .S-it { text-align: right; } /* .tbl th — text-align:left → right */ [dir="rtl"] .tbl th { text-align: right; } /* .error-boundary details — text-align:left → right */ [dir="rtl"] .error-boundary details { text-align: right; } /* ── E. translateX animation RTL variants ────────────────────────────────── */ /* slide-in-right → slides from left in RTL */ @keyframes slide-in-right-rtl { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [dir="rtl"] .toast { animation-name: slide-in-right-rtl; } /* ── End additional RTL Overrides ────────────────────────────────────────── */ /* ── MCP Marketplace Category Dropdown (Ops Hub parity) ──────────────────── */ @keyframes catDropdownFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .cat-dropdown { position: relative; flex-shrink: 0; } .cat-dropdown-trigger { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--b); border-radius: 8px; background: var(--s); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t); cursor: pointer; transition: border-color 0.15s; } .cat-dropdown-trigger:hover { border-color: var(--bd); } .cat-dropdown-icon { display: flex; align-items: center; color: var(--brand); } .cat-dropdown-label { font-weight: 600; } .cat-dropdown-count { font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brandL); padding: 2px 8px; border-radius: 12px; line-height: 1.3; } .cat-dropdown-chevron { color: var(--t4); transition: transform 0.2s; } .cat-dropdown-chevron.open { transform: rotate(180deg); } .cat-dropdown-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 200px; max-height: 360px; overflow-y: auto; background: var(--s); border: 1px solid var(--b); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); padding: 6px; animation: catDropdownFadeIn 0.12s ease-out; } .cat-dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; background: none; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t2); cursor: pointer; border-radius: 6px; transition: background 0.1s, color 0.1s; text-align: left; } .cat-dropdown-item:hover { background: var(--sh); color: var(--t); } .cat-dropdown-item.on { background: var(--brandGhost); color: var(--brand); font-weight: 600; } .cat-dropdown-item-icon { display: flex; align-items: center; color: var(--t4); } .cat-dropdown-item.on .cat-dropdown-item-icon { color: var(--brand); } [dir="rtl"] .cat-dropdown-menu { right: auto; left: 0; } /* ═══════════════════════════════════════════════════════════════ CR-062 — Design system extensions ─────────────────────────────────────────────────────────────── Token aliases + utility classes from the canonical Katonic design package (`colors_and_type.css`). Pure additions — no existing rule is modified. Existing components keep working unchanged; future pages can opt into the brief's vocabulary. ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────── * The alias layer that used to live here (beige aliases, status-raw, * agent palette, workroom accents) was migrated to tokens.css in * May 2026. All of those tokens are now first-class declarations in * tokens.css under their respective sections. This block intentionally * left empty as a landmark — when the dust settles, this comment can * be removed. * ─────────────────────────────────────────────────────────────── */ /* ── Semantic type roles ───────────────────────────────────── Heading hierarchy (serif = content, sans = chrome): H1 30px Source Serif 600 page title (alias of .page-title) H2 20px Source Serif 600 major page sections H3 15px Source Serif 600 named objects (cards, modal titles) H4 13px DM Sans 600 card header bars, inline labels ──────────────────────────────────────────────────────────── */ .h1 { font: 600 30px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--t); } .h2 { font: 600 var(--font-size-2xl)/1.3 var(--serif); letter-spacing: -0.01em; color: var(--t); } .h3 { font: 600 var(--font-size-lg2)/1.3 var(--serif); letter-spacing: -0.01em; color: var(--t); } .h4 { font: 600 var(--font-size-md)/1.3 var(--sans); color: var(--t); } .h-page-sub { font: 400 var(--font-size-lg)/1.5 var(--serif); color: var(--t2); } .h-section { font: 600 var(--font-size-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--t4); } .h-body { font: 400 var(--font-size-md)/1.5 var(--sans); color: var(--t2); } .h-meta { font: 400 var(--font-size-sm)/1.4 var(--sans); color: var(--t3); } .h-mono { font: 500 var(--font-size-base)/1.5 var(--mono); color: var(--t2); } .h-metric { font: 700 var(--font-size-4xl)/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--t); } .h-prose { font: 400 15px/1.75 var(--serif); color: var(--t2); } /* ── Table micro-visualizations ────────────────────────────── Inline indicators inside table cells. Always pair with a text value. ──────────────────────────────────────────────────────────── */ .micro-bar { width: 32px; height: 4px; border-radius: 4px; background: var(--beige-b2); overflow: hidden; display: inline-block; vertical-align: middle; } .micro-bar-fill { height: 100%; border-radius: 4px; } .micro-bar-fill.ok { background: var(--ok-raw); } .micro-bar-fill.warn { background: var(--warn-raw); } .micro-bar-fill.err { background: var(--err-raw); } .sla-bar { width: 32px; height: 4px; border-radius: 4px; background: var(--beige-b2); overflow: visible; position: relative; display: inline-block; vertical-align: middle; } .sla-bar-fill { height: 100%; border-radius: 4px; } .sla-bar-mark { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--t); } .sparkline { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 20px; } .sparkline-bar { width: 4px; border-radius: 1.5px 1.5px 0 0; min-height: 1px; background: var(--purple); } .sparkline-bar.dim { background: var(--beige-b2); } .sparkline-bar.err { background: var(--err-light); } /* ── Filter chip toolbar ───────────────────────────────────── Standard pattern above filterable tables. ──────────────────────────────────────────────────────────── */ .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 16px; font: 500 11px var(--sans); border: 1px solid var(--beige-b); background: var(--s); color: var(--t3); cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .filter-chip:hover { border-color: var(--bd); } .filter-chip.on { background: var(--brandL); border-color: var(--purple); color: var(--brand); } .filter-chip-dot { width: 5px; height: 5px; border-radius: 50%; } /* ── Table action buttons ──────────────────────────────────── Safe (left) vs destructive (right of separator) action grouping. ──────────────────────────────────────────────────────────── */ .tbl-act { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--beige-b2); background: var(--s); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t3); transition: border-color .15s, color .15s, background .15s; } .tbl-act:hover { border-color: var(--b); color: var(--t); } .tbl-act.danger:hover { border-color: var(--err-border); color: var(--err-raw); background: var(--err-light); } .tbl-act-sep { width: 1px; height: 16px; background: var(--beige-rule); display: inline-block; vertical-align: middle; margin: 0 2px; } /* ── Row-level alert dot ───────────────────────────────────── 6px dot before row name flags attention-needed rows. ──────────────────────────────────────────────────────────── */ .row-alert { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .row-alert.warn { background: var(--warn-raw); } .row-alert.err { background: var(--err-raw); } /* ── Sidebar zone-aware brand row ──────────────────────────── When the user has access to <2 zones, the brand row is not interactive (no caret, no menu, default cursor). The JSX sets `data-zones` on the .S-brand element; this rule disables the click affordance for n=0 (edge: no zone access) and n=1 (most operator deployments — single product zone per user). */ .S-brand[data-zones="0"], .S-brand[data-zones="1"] { cursor: default; } .S-brand[data-zones="0"]:hover, .S-brand[data-zones="1"]:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════════ RESOURCES — design system extension (Control.zip · 2026-05-26) Ported from the designer handoff so the Resources section (Images / Compute / Storage / GPU / Quotas) reads document-grade: warm beige page bg, near-white cards, brand purple accents, 38px serif hero titles, mono micro-copy. Class names mirror the handoff verbatim — keep them stable so future zip-replacements are diff-friendly. ═══════════════════════════════════════════════════════════════ */ /* Resources page wrapper (provides the inner gutter the design assumes) */ .r-page { padding: 28px 36px 48px; } .r-page-inner { width: 100%; max-width: 1600px; margin: 0 auto; } /* Override .page-enter for resource pages so they get the document gutter instead of edge-to-edge content (matches design page padding). */ .page-enter.r-page-shell { padding: 28px 36px 48px; } /* ── KPI strip ───────────────────────────────────────────── */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .kpi { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 16px 18px; } .kpi-l { font: 500 11px var(--sans); color: var(--t3); margin-bottom: 8px; letter-spacing: -.01em; } .kpi-v { font: 600 32px/1 var(--serif); letter-spacing: -.02em; color: var(--t); font-variant-numeric: tabular-nums; } .kpi-v sub { font: 400 16px var(--serif); color: var(--t3); vertical-align: baseline; margin-left: 2px; } .kpi-v small { font: 400 14px var(--serif); color: var(--t3); margin-left: 4px; } .kpi-bar { height: 5px; border-radius: 4px; background: var(--beige-rule); margin-top: 10px; overflow: hidden; display: flex; } .kpi-bar .seg { display: block; height: 100%; } .kpi-bar .seg.brand { background: #C8BFAF; } .kpi-bar .seg.ok { background: var(--ok); } .kpi-bar .seg.warn { background: var(--warn); } .kpi-bar .seg.err { background: var(--err); } .kpi-bar .seg.info { background: var(--info); } .kpi-bar .seg.muted { background: var(--t5); } .kpi-bar .seg.accent { background: var(--brand); } .kpi-s { font: 400 12px var(--sans); color: var(--t3); margin-top: 8px; } .kpi-spark { margin-top: 8px; height: 24px; width: 100%; display: block; } .kpi-spark path.line { fill: none; stroke: var(--t3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; } .kpi-spark path.area { fill: var(--beige-rule); opacity: .55; } .kpi-spark .end-dot { fill: var(--t2); } /* ── Resource-section .tabs override (count chip) ─────────── */ .tabs.r-tabs { border-bottom: 1px solid var(--beige-b); } .tabs.r-tabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--t3); border-bottom: 2px solid transparent; } .tabs.r-tabs .tab:hover { color: var(--t2); } .tabs.r-tabs .tab.on { color: var(--t); border-bottom-color: var(--brand); font-weight: 600; } .tabs.r-tabs .tab .ct { font: 500 11px var(--mono); background: var(--beige); padding: 1.5px 7px; border-radius: 12px; color: var(--t3); letter-spacing: .02em; } .tabs.r-tabs .tab.on .ct { background: var(--brandL); color: var(--brand); } /* ── Sub-tabs (capsule pill row) ─────────────────────────── */ .subtabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--beige); border: 1px solid var(--beige-b); border-radius: 12px; margin-bottom: 18px; } .subtab { padding: 5px 12px; font: 500 12px var(--sans); color: var(--t3); border: none; background: transparent; border-radius: 8px; cursor: pointer; } .subtab.on { background: var(--beige-card); color: var(--t); font-weight: 600; box-shadow: var(--sh-1); } /* ── Toolbar (search + select + spacer + actions) ────────── */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .toolbar-spacer { flex: 1; } .r-input, .r-select { font: 400 13px var(--sans); color: var(--t); background: #fff; border: 1px solid var(--beige-b); padding: 6px 11px; border-radius: 8px; line-height: 1.3; min-width: 140px; } .r-input:focus, .r-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .r-search { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--beige-b); padding: 6px 11px; border-radius: 8px; min-width: 260px; } .r-search svg { width: 13px; height: 13px; color: var(--t4); } .r-search input { flex: 1; border: none; outline: none; font: 400 13px var(--sans); background: none; color: var(--t); } /* View toggle (Grid | Table) */ .viewtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--beige); border: 1px solid var(--beige-b); border-radius: 8px; } .viewtoggle button { padding: 4px 10px; font: 500 12px var(--sans); color: var(--t3); border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; border: none; background: transparent; cursor: pointer; } .viewtoggle button.on { background: var(--beige-card); color: var(--t); font-weight: 600; box-shadow: var(--sh-1); } .viewtoggle button svg { width: 13px; height: 13px; } /* ── Resource-section buttons (warmer than .btn) ─────────── */ .r-btn { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--sans); color: var(--t2); background: #fff; border: 1px solid var(--beige-b); padding: 7px 14px; border-radius: 8px; line-height: 1; transition: all .12s; white-space: nowrap; cursor: pointer; } .r-btn:hover { background: var(--beige); border-color: #D9CFB7; } .r-btn:active { transform: scale(.97); } .r-btn.primary { background: var(--t); color: #FAFAF7; border-color: var(--t); } .r-btn.primary:hover { filter: brightness(1.15); background: var(--t); } .r-btn.brand { background: var(--brand); color: #fff; border-color: var(--brand); } .r-btn.brand:hover { filter: brightness(1.08); background: var(--brand); } .r-btn.danger { color: var(--err); } .r-btn.danger:hover { background: var(--err-bg); border-color: #E8C9BD; } .r-btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; gap: 5px; } .r-btn.icon { padding: 6px; width: 28px; height: 28px; justify-content: center; } .r-btn svg { width: 13px; height: 13px; } .r-btn.sm svg { width: 12px; height: 12px; } .r-btn:disabled { opacity: .5; cursor: not-allowed; } /* ── Resources-section cards & tables ────────────────────── */ .r-card { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; overflow: hidden; } .r-card-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--beige-rule); } .r-card-hd-t { font: 600 13px var(--sans); color: var(--t); } .r-card-hd-r { display: flex; align-items: center; gap: 8px; } .r-card-bd { padding: 18px; } .r-card-bd.pad-0 { padding: 0; } .r-tbl { width: 100%; border-collapse: separate; border-spacing: 0; } .r-tbl thead th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t3); padding: 11px 14px; text-align: left; background: var(--beige); border-bottom: 1px solid var(--beige-b); position: sticky; top: 0; z-index: 1; white-space: nowrap; } .r-tbl tbody td { padding: 13px 14px; font: 400 13px var(--sans); color: var(--t2); border-bottom: 1px solid var(--beige-rule); vertical-align: middle; } .r-tbl tbody tr:last-child td { border-bottom: none; } .r-tbl tbody tr:hover { background: rgba(248,244,237,.55); } .r-tbl .t-name { font-weight: 600; color: var(--t); } .r-tbl .t-mono { font-family: var(--mono); font-size: 12px; color: var(--t2); font-variant-numeric: tabular-nums; } .r-tbl .t-mono.muted { color: var(--t3); } .r-tbl .t-mono.uri { font-size: 12px; color: var(--t3); word-break: break-all; } .r-tbl .t-sub { font: 400 12px var(--sans); color: var(--t3); margin-top: 3px; } .r-tbl .row-actions { display: flex; gap: 5px; justify-content: flex-end; } /* ── Pills / badges (resource section variants) ──────────── */ .r-pill { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--mono); letter-spacing: .02em; color: var(--t3); background: var(--beige); padding: 2.5px 9px; border-radius: 12px; border: 1px solid var(--beige-b); } .r-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .r-pill.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; } .r-pill.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .r-pill.err { color: var(--err); background: var(--err-bg); border-color: transparent; } .r-pill.info { color: var(--info); background: var(--info-bg); border-color: transparent; } .r-pill.brand { color: var(--brand); background: var(--brandL); border-color: transparent; } .r-pill.solid-brand { color: #fff; background: var(--brand); border-color: transparent; } .r-pill.framework { font-family: var(--sans); font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; } .r-tag { display: inline-flex; align-items: center; gap: 4px; font: 500 11px var(--mono); padding: 2px 7px; border-radius: 6px; background: var(--beige); color: var(--t3); border: 1px solid var(--beige-b); } .r-tag.default { background: var(--beige); color: var(--t2); border-color: var(--beige-b); font-weight: 600; font-family: var(--sans); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } /* ── Meter / progress (resource section) ──────────────────── */ .r-meter { display: flex; align-items: center; gap: 8px; min-width: 120px; } .r-meter-bar { flex: 1; height: 6px; background: var(--beige-rule); border-radius: 4px; overflow: hidden; } .r-meter-fill { height: 100%; background: var(--brand); border-radius: 4px; transition: width .3s; } .r-meter-fill.warn { background: var(--warn); } .r-meter-fill.err { background: var(--err); } .r-meter-fill.ok { background: var(--ok); } .r-meter-fill.info { background: var(--info); } .r-meter-v { font: 500 12px var(--mono); color: var(--t2); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; } /* ── Stacked bar (capacity visual) ───────────────────────── */ .stack { width: 100%; } .stack-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--beige-rule); } .stack-bar .s-used { background: var(--brand); } .stack-bar .s-idle { background: var(--brand-2); opacity: .4; } .stack-bar .s-free { background: var(--beige-rule); } .stack-legend { display: flex; gap: 14px; margin-top: 8px; font: 500 11px var(--sans); color: var(--t3); } .stack-legend b { font-weight: 600; color: var(--t2); font-variant-numeric: tabular-nums; } /* ── Adoption cell (used in tables) ──────────────────────── */ .adopt-c { font: 500 13px var(--sans); color: var(--t); } .adopt-c b { font-weight: 600; } .adopt-n { font: 400 12px var(--sans); color: var(--t3); margin-top: 2px; } .adopt-orphan { color: var(--t4); font: 500 12px var(--sans); font-style: italic; } .adopt-orphan small { font: 400 11px var(--sans); color: var(--t5); margin-left: 4px; font-style: normal; } /* ── Empty state (resource section) ──────────────────────── */ .r-empty { padding: 56px 28px; text-align: center; background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; } .r-empty-ic { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; background: var(--brandL); color: var(--brand); border-radius: 12px; margin-bottom: 16px; } .r-empty-ic svg { width: 26px; height: 26px; } .r-empty h3 { font: 600 16px var(--sans); color: var(--t); margin-bottom: 6px; } .r-empty p { font: 400 13px var(--sans); color: var(--t3); max-width: 480px; margin: 0 auto 16px; line-height: 1.6; } /* ── Section label (sub-section divider) ─────────────────── */ .sec-l { font: 500 13px var(--sans); color: var(--t2); margin: 26px 0 12px; display: flex; align-items: baseline; gap: 12px; letter-spacing: -.005em; } .sec-l small { font: 400 12px var(--sans); color: var(--t4); } .sec-l::after { content: ""; flex: 1; height: 1px; background: var(--beige-rule); align-self: center; margin-left: auto; } em.em-acc { font-style: normal; font-family: var(--mono); color: var(--t2); font-weight: 600; } /* ── Grid helpers ────────────────────────────────────────── */ .r-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .r-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .r-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .r-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } /* ── Image card grid ─────────────────────────────────────── */ .imgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .imgcard { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, box-shadow .15s; cursor: pointer; } .imgcard:hover { border-color: #D9CFB7; box-shadow: var(--sh-1), 0 4px 14px rgba(20,20,30,.06); } .imgcard-hd { display: flex; align-items: flex-start; gap: 12px; } .imgcard-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--beige); border: 1px solid var(--beige-b); color: var(--t2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .imgcard-ic svg { width: 18px; height: 18px; } .imgcard-ic.gpu { background: var(--brandL); border-color: transparent; color: var(--brand); } .imgcard-t { font: 600 14px var(--sans); color: var(--t); letter-spacing: -.005em; } .imgcard-u { font: 400 11px var(--mono); color: var(--t3); margin-top: 2px; word-break: break-all; line-height: 1.4; } .imgcard-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .imgcard-fw { font: 400 12px var(--sans); color: var(--t2); } .imgcard-meta { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--beige-rule); } .imgcard-uses { font: 400 11px var(--sans); color: var(--t3); } .imgcard-uses b { color: var(--t); font-weight: 600; } /* ── Vuln pill row (Images) ──────────────────────────────── */ .vuln-row { display: flex; gap: 5px; } .vuln { font: 500 11px var(--mono); padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; } .vuln.crit { background: var(--err-bg); color: var(--err); } .vuln.high { background: var(--warn-bg); color: var(--warn); } .vuln.med { background: #FBF4E5; color: #8B6818; } .vuln.low { background: var(--beige); color: var(--t3); } .vuln.none { color: var(--ok); background: var(--ok-bg); } /* ── Banner (info / warn) ────────────────────────────────── */ .r-banner { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; background: var(--brandL); border: 1px solid #DDD2FA; margin-bottom: 18px; } .r-banner.warn { background: var(--warn-bg); border-color: #E8CC9F; } .r-banner.info { background: var(--info-bg); border-color: #C9DCEF; } .r-banner-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .r-banner-ic svg { width: 16px; height: 16px; } .r-banner.warn .r-banner-ic { background: var(--warn); } .r-banner.info .r-banner-ic { background: var(--info); } .r-banner-t { font: 600 14px var(--sans); color: var(--t); } .r-banner-d { font: 400 13px var(--sans); color: var(--t2); margin-top: 3px; line-height: 1.5; } .r-banner-r { margin-left: auto; flex-shrink: 0; } /* ── Spend chart (Quotas) ────────────────────────────────── */ .spend { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; } .spend-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 14px; } .spend-hd-t { font: 500 13px var(--sans); color: var(--t); } .spend-hd-s { font: 400 12px var(--sans); color: var(--t3); } .spend-axis { display: grid; grid-template-columns: 140px 1fr 80px; gap: 14px; font: 400 11px var(--mono); color: var(--t4); padding-bottom: 8px; border-bottom: 1px dashed var(--beige-rule); letter-spacing: .02em; } .spend-axis .ticks { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; } .spend-row { display: grid; grid-template-columns: 140px 1fr 80px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--beige-rule); } .spend-row:last-child { border-bottom: none; } .spend-row-name { font: 500 13px var(--sans); color: var(--t); } .spend-row-name small { display: block; font: 400 11px var(--sans); color: var(--t4); margin-top: 2px; letter-spacing: -.005em; } .spend-bar { display: flex; height: 14px; background: var(--beige-rule); border-radius: 4px; overflow: hidden; } .spend-bar .s { display: block; height: 100%; } .spend-bar .s.cpu { background: #A593E0; } .spend-bar .s.mem { background: #7CB2D9; } .spend-bar .s.gpu { background: var(--brand); } .spend-bar .s.storage { background: #D9B47C; } .spend-bar .s.other { background: #C8BFAF; } .spend-row-total { font: 600 13px var(--mono); color: var(--t); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .spend-row-total small { display: block; font: 400 11px var(--mono); color: var(--t4); margin-top: 2px; font-weight: 400; } .spend-legend { display: flex; gap: 14px; margin-top: 14px; font: 400 11px var(--sans); color: var(--t4); flex-wrap: wrap; } .spend-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 4px; margin-right: 5px; vertical-align: middle; } /* ── GPU node map (region-grouped utilisation grid) ─────── */ .nodemap { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; } .nodemap-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; } .nodemap-hd-t { font: 500 13px var(--sans); color: var(--t); letter-spacing: -.005em; } .nodemap-hd-s { font: 400 12px var(--sans); color: var(--t3); } .nodemap-regions { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; } .nodemap-region { flex: 0 0 auto; } .nodemap-region-l { font: 500 11px var(--sans); color: var(--t3); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .nodemap-region-l b { color: var(--t2); font-weight: 600; } .nodemap-grid { display: grid; grid-template-columns: repeat(auto-fill, 70px); gap: 6px; } .nodemap-cell { position: relative; aspect-ratio: 1; border-radius: 8px; cursor: pointer; padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .12s, box-shadow .12s; border: 1px solid transparent; overflow: hidden; } .nodemap-cell:hover { transform: translateY(-1px); box-shadow: var(--sh-1), 0 4px 14px rgba(20,20,30,.06); } .nodemap-cell.t-ok { background: #F4EBD8; border-color: #E8DEBE; color: var(--t); } .nodemap-cell.t-busy { background: #E6F4EC; border-color: #C9E2D2; color: #1F6E47; } .nodemap-cell.t-hot { background: #FBEDD9; border-color: #E8CC9F; color: var(--warn); } .nodemap-cell.t-degraded { background: #FBE6DF; border-color: #E8C9BD; color: var(--err); } .nodemap-cell.t-draining { background: #FFFCF4; border-color: #E8DEBE; color: var(--warn); } .nodemap-cell-id { font: 600 9px var(--mono); letter-spacing: -.01em; opacity: .7; } .nodemap-cell-util { font: 600 17px var(--serif); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .nodemap-cell-util small { font: 500 9px var(--mono); margin-left: 1px; opacity: .7; } .nodemap-cell-foot { font: 500 9px var(--mono); opacity: .6; letter-spacing: .02em; text-transform: uppercase; } .nodemap-legend { display: flex; gap: 14px; margin-top: 14px; font: 400 11px var(--sans); color: var(--t4); align-items: center; flex-wrap: wrap; } .nodemap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 5px; vertical-align: middle; } /* ── Inline status dot ───────────────────────────────────── */ .dot-inline { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot-inline.ok { background: var(--ok); } .dot-inline.warn { background: var(--warn); } .dot-inline.err { background: var(--err); } .dot-inline.info { background: var(--info); } .dot-inline.muted { background: var(--t5); } /* ── Pool card (GPU pools) ───────────────────────────────── */ .pool { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .pool-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .pool-eyebrow { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); } .pool-name { font: 600 16px var(--serif); color: var(--t); margin-top: 2px; letter-spacing: -.01em; } .pool-models { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font: 400 12px var(--sans); color: var(--t3); } .pool-model { font: 500 12px var(--mono); background: var(--beige); padding: 2px 8px; border-radius: 6px; color: var(--t2); border: 1px solid var(--beige-b); } .pool-policy { font: 400 13px var(--sans); color: var(--t3); line-height: 1.55; padding: 11px 13px; background: var(--beige); border-radius: 8px; border: 1px solid var(--beige-rule); } .pool-orgs { display: flex; flex-wrap: wrap; gap: 6px; } .pool-org { font: 500 11px var(--mono); padding: 2.5px 9px; border-radius: 12px; background: var(--beige); color: var(--t2); border: 1px solid var(--beige-b); } .thr-row { display: flex; gap: 6px; flex-wrap: wrap; } .thr { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); padding: 3px 8px; border-radius: 6px; background: var(--beige); border: 1px solid var(--beige-rule); color: var(--t3); text-transform: uppercase; letter-spacing: .04em; } .thr b { color: var(--t2); font-weight: 600; } .thr.on.warn { background: var(--warn-bg); color: var(--warn); border-color: #E8CC9F; } .thr.on.err { background: var(--err-bg); color: var(--err); border-color: #E8C9BD; } .thr.on.info { background: var(--info-bg); color: var(--info); border-color: #C9DCEF; } /* ── Quota tier / team card (Quotas) ─────────────────────── */ .q-card { background: var(--beige-card); border: 1px solid var(--beige-b); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; } .q-card.is-highlighted { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandL); } .q-card-hd { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--beige-rule); } .q-card-name { font: 600 18px var(--serif); color: var(--t); letter-spacing: -.01em; } .q-meter-row { display: flex; justify-content: space-between; margin-bottom: 6px; align-items: baseline; } .q-meter-l { font: 500 12px var(--sans); color: var(--t3); text-transform: uppercase; letter-spacing: .04em; } .q-meter-v { font-family: var(--mono); font-size: 12px; color: var(--t2); } .q-meter-v b { color: var(--t); font-weight: 600; } .q-meter-bar { height: 6px; background: var(--beige-rule); border-radius: 4px; overflow: hidden; position: relative; } .q-meter-fill { height: 100%; border-radius: 4px; transition: width .3s; } .q-meter-fill.ok { background: var(--ok); } .q-meter-fill.warn { background: var(--warn); } .q-meter-fill.err { background: var(--err); } .q-meter-foot { font: 400 11px var(--mono); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; } /* ── MIG profile mini grid (GPU) ─────────────────────────── */ .mig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .mig { padding: 12px 14px; border: 1px solid var(--beige-b); border-radius: 12px; background: var(--beige-card); } .mig.applied { border-color: var(--brand); background: linear-gradient(180deg, #fff, var(--brandL)); } /* GPU model form-factor tag inside inventory rows (SXM / PCIe / HGX) */ .node-form { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t4); margin-left: 6px; } .mig-name { font: 600 13px var(--mono); color: var(--t); } .mig-spec { font: 400 12px var(--sans); color: var(--t3); margin: 3px 0 6px; } .mig-ideal { font: 400 11px var(--sans); color: var(--t4); line-height: 1.4; } .mig-applied { font: 500 11px var(--mono); color: var(--brand); margin-top: 6px; } /* ── YAML preview block ──────────────────────────────────── */ .yaml-prev { background: #1B1814; color: #E8DFC8; font: 400 12px/1.6 var(--mono); padding: 16px 18px; border-radius: 12px; overflow: auto; max-height: 340px; white-space: pre; tab-size: 2; } /* ── Inline KV list (detail panels) ──────────────────────── */ .r-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; font-size: 13px; } .r-kv dt { color: var(--t3); font-weight: 500; } .r-kv dd { color: var(--t2); font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; } /* Spacing helpers used by the design (avoid leaking globally) */ .r-mt-12 { margin-top: 12px; } .r-mt-18 { margin-top: 18px; } .r-mt-24 { margin-top: 24px; } .r-muted { color: var(--t4); } /* Resource page: scrollable inner so .r-page-shell + page-scroll parents play nicely with .page-enter's flex column. */ .r-page-shell { overflow-y: auto; } /* ================================================================ REDUCED MOTION — Respects user's OS-level motion preference. Disables all animations and transitions globally for users with vestibular disorders or motion sensitivity. ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================ FOCUS-VISIBLE — Keyboard navigation indicator. Shows a visible focus ring when navigating with keyboard (Tab key) but not when clicking with mouse. Covers all interactive elements that have :hover states but missing :focus-visible states. ================================================================ */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Remove default outline since we're providing our own */ :focus:not(:focus-visible) { outline: none; } /* Buttons and inputs get a tighter ring */ button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* Skip-to-content link (a11y requirement for keyboard navigation) */ .skip-to-content { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 8px 16px; background: var(--brand); color: #fff; font: 600 13px var(--sans); border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s; } .skip-to-content:focus { top: 0; } /* ===================== studio.css ===================== */ /* ═══════════════════════════════════════════════════════════════ Agent Studio - App-Specific Styles Extracted from agent-studio/src/styles/global.css NOTE: Base layout (.R, .S, .M, .TB), CSS variables, reset, scrollbar, dropdown (.DD), avatar (.av), buttons (.btn), badges (.badge), empty state, modal, page header, and notification dot (.TB-notif-dot) are already in global.css -- not duplicated here. NOTE: Agent card styles (.ag-*) are shared with ACE and are included in ace.css. They are NOT duplicated here -- studio.css should be loaded alongside ace.css if agent cards are needed, or the ag-* classes can be moved to a shared file later. ═══════════════════════════════════════════════════════════════ */ /* ── Page Scroll / Wrap ───────────────────────────────────────── */ .page-scroll { flex: 1; overflow-y: auto; } .page-wrap { max-width: 1200px; margin: 0 auto; } .page-subtitle { font-size: 13px; color: var(--t3); margin-top: 2px; } .page-actions { display: flex; align-items: center; gap: 10px; } /* ── Inputs (Studio-specific) ─────────────────────────────────── */ /* ── TabBar ── alias of global .tabs/.tab; padding aligned ──────── */ .tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--bl2, var(--b)); margin-bottom: 22px; } .tabbar-item { padding: 8px 16px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t3); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all .12s; margin-bottom: -1px; } .tabbar-item:hover { color: var(--t2); } .tabbar-item.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; } /* ── Inputs (Studio-specific) ─────────────────────────────────── */ .inp { width: 100%; padding: 9px 12px; border: 1px solid var(--b); border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--t); background: var(--s); transition: border .15s; } .inp:focus { border-color: var(--brand); outline: 0; } .inp.mono { font-family: var(--mono); font-size: 12px; } .inp.textarea { resize: vertical; line-height: 1.6; } .search-box { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--b); border-radius: 8px; background: var(--s); } .search-box input { flex: 1; border: 0; outline: 0; font-family: inherit; font-size: 13px; background: transparent; color: var(--t); } .search-box svg { color: var(--t4); flex-shrink: 0; } select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } /* ── Link & Icon Buttons ──────────────────────────────────────── */ .link-btn { background: none; border: 0; color: var(--brand); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; } .link-btn:hover { text-decoration: underline; } .link-btn.sm { font-size: 12px; } .icon-btn { background: none; border: 0; cursor: pointer; color: var(--t3); padding: 4px; border-radius: 4px; display: flex; align-items: center; } .icon-btn:hover { background: var(--sh); color: var(--t); } /* ── Empty / Loading States ───────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; } /* empty-icon uses global.css definition — 56px branded container with var(--brandL) bg */ .empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .empty-desc { font-size: 13px; color: var(--t3); margin-bottom: 16px; max-width: 360px; } .empty-hint { font-size: 13px; color: var(--t3); padding: 16px; text-align: center; line-height: 1.5; } .loading-text { font-size: 13px; color: var(--t3); padding: 24px; text-align: center; } /* ── Unified Agent Cards ──────────────────────────────────────── */ /* NOTE: .ag-* styles are shared between Studio and ACE. They are defined in ace.css. If Studio loads independently, copy them here or import ace.css alongside studio.css. The following are Studio-ONLY additions to the agent card system: */ .ag-card-menu-wrap { position: relative; flex-shrink: 0; } .ag-card-menu-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--t4); cursor: pointer; transition: all .12s; } .ag-card-menu-btn:hover { background: var(--sh); color: var(--t2); } .ag-card-dd { position: absolute; top: 100%; right: 0; z-index: 50; margin-top: 4px; min-width: 150px; padding: 4px; background: var(--s); border: 1px solid var(--b); border-radius: 12px; box-shadow: var(--shadow-md); } .ag-card-dd-opt { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; border-radius: 8px; background: none; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; text-align: left; transition: background .1s; } .ag-card-dd-opt:hover { background: var(--sh); } .ag-card-dd-danger { color: var(--err); } .ag-card-dd-danger:hover { background: #FEE2E2; } .ag-card-status { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 6px; letter-spacing: .01em; } .ag-card-tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 6px; background: var(--sh); color: var(--t4); } /* ── Template Strip (Studio) ──────────────────────────────────── */ .ag-tpl-strip { margin-bottom: 24px; padding: 20px; background: var(--s); border: 1px solid var(--b); border-radius: 12px; } .ag-tpl-strip-hdr { font-size: 14px; font-weight: 600; color: var(--t2); display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .ag-tpl-strip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .ag-tpl-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--b); border-radius: 12px; cursor: pointer; transition: all .15s; } .ag-tpl-card:hover { border-color: var(--ag-c, var(--brand)); box-shadow: 0 2px 10px color-mix(in srgb, var(--ag-c) 10%, transparent); } .ag-tpl-av { width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--ag-c), var(--ag-c2)); color: #fff; display: flex; align-items: center; justify-content: center; } .ag-tpl-body { flex: 1; min-width: 0; } .ag-tpl-name { font-size: 13px; font-weight: 600; color: var(--t); } .ag-tpl-desc { font-size: 11px; color: var(--t3); margin-top: 1px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-tpl-arrow { color: var(--t4); flex-shrink: 0; transition: color .15s; } .ag-tpl-card:hover .ag-tpl-arrow { color: var(--ag-c, var(--brand)); } /* ── Agent Loading ────────────────────────────────────────────── */ .ag-loading { font-size: 13px; color: var(--t3); padding: 48px; text-align: center; } /* ── Builder ──────────────────────────────────────────────────── */ .builder { display: flex; height: 100%; overflow: hidden; margin: -24px -28px; } /* Step rail */ .builder-rail { width: 220px; min-width: 220px; background: var(--s); border-right: 1px solid var(--b); display: flex; flex-direction: column; padding: 16px 0; } .builder-back { display: flex; align-items: center; gap: 4px; padding: 6px 16px 14px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--t3); font-weight: 500; } .builder-back:hover { color: var(--t); } .builder-steps { flex: 1; padding: 0 8px; } .builder-step { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--t3); text-align: left; transition: all .12s; margin-bottom: 2px; } .builder-step:hover { background: var(--sh); } .builder-step.active { background: var(--brandGhost); color: var(--brand); font-weight: 600; } .builder-step.done { color: var(--ok); } .builder-step-num { width: 22px; height: 22px; border-radius: 9999px; border: 1.5px solid var(--b); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; color: var(--t4); } .builder-step.active .builder-step-num { border-color: var(--brand); color: var(--brand); background: var(--brandGhost); } .builder-step.done .builder-step-num { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); } .builder-step-icon { display: flex; align-items: center; } .builder-step-label { flex: 1; } .builder-rail-foot { padding: 8px 12px; border-top: 1px solid var(--b); } .builder-test-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border: 1px solid var(--brand); background: var(--brandGhost); color: var(--brand); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; transition: all .12s; } .builder-test-btn:hover { background: var(--brand); color: #fff; } /* Main panel */ .builder-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; transition: all .2s var(--ease); } .builder-main.with-chat { max-width: calc(100% - 380px); } .builder-main-hdr { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 28px 0; } .builder-main-title { font-size: 18px; font-weight: 700; } .builder-main-sub { font-size: 12px; color: var(--t3); margin-top: 2px; } .builder-unsaved { color: var(--warn); font-weight: 500; } .builder-main-actions { display: flex; align-items: center; gap: 10px; } .builder-content { flex: 1; overflow-y: auto; padding: 20px 28px; } .builder-nav { display: flex; justify-content: space-between; padding: 12px 28px; border-top: 1px solid var(--b); background: var(--s); } /* Step form */ .step-form { max-width: 580px; } /* ── Model Tier Cards ─────────────────────────────────────────── */ .tier-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .tier-card { padding: 14px; border: 1.5px solid var(--b); border-radius: 8px; cursor: pointer; transition: all .12s; } .tier-card:hover { border-color: var(--bd); } .tier-card.selected { border-color: var(--brand); background: var(--brandGhost); } .tier-card-dot { width: 8px; height: 8px; border-radius: 9999px; margin-bottom: 8px; } .tier-card-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; } .tier-card-desc { font-size: 11px; color: var(--t3); line-height: 1.4; } /* Range */ .range-inp { width: 100%; accent-color: var(--brand); } .range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--t4); margin-top: 4px; } /* ── Tool / Knowledge / Guardrail / Surface Lists ─────────────── */ .server-list { display: flex; flex-direction: column; gap: 4px; } .server-block { border: 1px solid var(--b); border-radius: 8px; overflow: hidden; } .server-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 500; } .server-hdr:hover { background: var(--sh); } .server-chev { display: flex; transition: transform .15s; } .server-chev.open { transform: rotate(90deg); } .server-name { flex: 1; } .tool-list, .knowledge-list, .guardrail-list, .surface-list { display: flex; flex-direction: column; gap: 4px; } .tool-row, .knowledge-row, .guardrail-row, .surface-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--b); border-radius: 8px; cursor: pointer; transition: all .12s; } .tool-row:hover, .knowledge-row:hover, .guardrail-row:hover, .surface-row:hover { background: var(--sh); } .tool-row.selected, .knowledge-row.selected, .guardrail-row.selected, .surface-row.selected { border-color: var(--brand); background: var(--brandGhost); } .tool-row-check { display: flex; align-items: center; color: var(--brand); flex-shrink: 0; } .tool-row-circle { width: 16px; height: 16px; border: 1.5px solid var(--b); border-radius: 9999px; } .tool-row-body { flex: 1; min-width: 0; } .tool-row-name { font-size: 13px; font-weight: 500; } .tool-row-desc { font-size: 11px; color: var(--t3); margin-top: 1px; } /* ── Prompt Editor ────────────────────────────────────────────── */ .prompt-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .prompt-count { font-size: 11px; color: var(--t4); font-family: var(--mono); } .prompt-editor { min-height: 240px; font-family: var(--mono); font-size: 13px; line-height: 1.7; } .var-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding: 10px; background: var(--sh); border-radius: 8px; } .var-chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--b); border-radius: 6px; background: var(--s); cursor: pointer; font-family: inherit; font-size: 11px; } .var-chip code { font-family: var(--mono); font-size: 10px; color: var(--brand); } .var-chip span { color: var(--t3); } .var-chip:hover { border-color: var(--brand); } .prompt-starters { margin-top: 16px; } .prompt-starters-label { font-size: 12px; font-weight: 500; color: var(--t3); margin-bottom: 8px; } .prompt-starters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .prompt-starter-btn { padding: 10px 12px; border: 1px solid var(--b); border-radius: 8px; background: var(--s); cursor: pointer; font-family: inherit; font-size: 12px; color: var(--t3); text-align: left; transition: all .12s; } .prompt-starter-btn:hover { border-color: var(--brand); color: var(--t); } /* ── Publish / Review ─────────────────────────────────────────── */ .review-card { padding: 20px; background: var(--s); border: 1px solid var(--b); border-radius: 12px; margin-bottom: 24px; } .review-card-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; } .review-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sh); gap: 8px; } .review-row:last-child { border-bottom: 0; } .review-label { font-size: 12px; color: var(--t3); width: 120px; flex-shrink: 0; } .review-value { font-size: 13px; font-weight: 500; flex: 1; } .review-value.missing { color: var(--warn); font-style: italic; font-weight: 400; } .visibility-options { display: flex; flex-direction: column; gap: 6px; } .visibility-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--b); border-radius: 8px; cursor: pointer; transition: all .12s; } .visibility-opt:hover { background: var(--sh); } .visibility-opt.selected { border-color: var(--brand); background: var(--brandGhost); } .visibility-radio { display: flex; color: var(--brand); } .visibility-label { font-size: 13px; font-weight: 500; } .visibility-desc { font-size: 11px; color: var(--t3); margin-top: 1px; } /* ── Test Chat Panel ──────────────────────────────────────────── */ .builder-chat { width: 380px; min-width: 380px; border-left: 1px solid var(--b); background: var(--s); display: flex; flex-direction: column; } .test-chat { display: flex; flex-direction: column; height: 100%; } .test-chat-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--b); } .test-chat-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; } .test-chat-actions { display: flex; gap: 4px; } .test-chat-info { padding: 8px 16px; font-size: 11px; color: var(--t4); border-bottom: 1px solid var(--sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .test-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .test-chat-empty { font-size: 13px; color: var(--t3); text-align: center; padding: 32px 16px; line-height: 1.5; } .test-msg { display: flex; gap: 8px; } .test-msg-user .test-msg-avatar { display: none; } .test-msg-user { justify-content: flex-end; } .test-msg-avatar { width: 24px; height: 24px; border-radius: 6px; background: var(--brandGhost); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; } .test-msg-bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .test-msg-user .test-msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; } .test-msg-assistant .test-msg-bubble { background: var(--sh); color: var(--t); border-bottom-left-radius: 4px; } .test-msg-bubble.error { background: #FEE2E2; color: var(--err); } .test-msg-typing { color: var(--t4); font-style: italic; } .test-chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--b); } .test-chat-input textarea { flex: 1; border: 1px solid var(--b); border-radius: 8px; padding: 9px 12px; font-family: inherit; font-size: 13px; resize: none; max-height: 120px; line-height: 1.4; } .test-chat-input textarea:focus { border-color: var(--brand); outline: 0; } .test-send-btn { width: 36px; height: 36px; border-radius: 8px; border: 0; background: var(--brand); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; } .test-send-btn:hover { filter: brightness(1.1); } .test-send-btn:disabled { opacity: .4; cursor: not-allowed; } /* ── Toasts ───────────────────────────────────────────────────── */ .toast-stack { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 6px; z-index: 9999; } .studio-toast { padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #fff; animation: studio-toast-in .25s var(--ease); box-shadow: var(--shadow-sm); } .studio-toast-success { background: var(--ok); } .studio-toast-error { background: var(--err); } .studio-toast-warn { background: var(--warn); color: var(--t); } .studio-toast-info { background: var(--info); } @keyframes studio-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Studio Modal — uses global.css modal-overlay and confirm-icon definitions ── */ /* ═══════════════════════════════════════════════════════════════ Studio Updated Styles (AI Builder, Test Chat enhancements) ═══════════════════════════════════════════════════════════════ */ /* ── Animations ───────────────────────────────────────────────── */ @keyframes cardIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } /* ── Test Send Stop Button ────────────────────────────────────── */ .test-send-btn.stop { background:var(--err); } .test-send-btn.stop:hover { filter:brightness(1.1); } /* ── Test Chat Debug Button ───────────────────────────────────── */ .tc-debug-btn { display:flex; align-items:center; gap:3px; padding:3px 8px; border-radius:4px; border:none; background:transparent; color:var(--t4); font-size:11px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .12s; } .tc-debug-btn:hover { background:var(--sh); } .tc-debug-btn.on { background:var(--brandGhost); color:var(--brand); } /* ── Test Chat Info Badges ────────────────────────────────────── */ .tc-info-badge { display:inline-flex; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; margin-left:8px; } .tc-info-badge.tools { background:rgba(139,92,246,0.08); color:#8B5CF6; } .tc-info-badge.kb { background:rgba(6,182,212,0.08); color:#06B6D4; } .tc-info-badge.guard { background:rgba(22,163,74,0.08); color:var(--ok); } /* ── Test Chat Cards (tool calls, knowledge, etc.) ────────────── */ .tc-card { margin:6px 0; border-radius:var(--radius, 8px); border:1px solid var(--b); background:var(--s); overflow:hidden; box-shadow:var(--shadow-xs); animation:cardIn .25s var(--ease, cubic-bezier(.4,0,.2,1)) both; } .tc-card-hdr { display:flex; align-items:center; gap:6px; padding:6px 10px; cursor:pointer; transition:background .12s; } .tc-card-hdr:hover { background:var(--sh); } .tc-card-icon { width:22px; height:22px; border-radius: 6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .tc-card-icon svg { width:12px; height:12px; } .tc-card-body { flex:1; min-width:0; overflow:hidden; } .tc-card-name { font-size:12px; font-weight:600; color:var(--t); } .tc-card-meta { font-size:10px; color:var(--t4); margin-left:4px; } .tc-card-detail { padding:8px 10px; border-top:1px solid var(--b); } /* ── Test Chat Detail Sections ────────────────────────────────── */ .tc-detail-section { margin-bottom:6px; } .tc-detail-section:last-child { margin-bottom:0; } .tc-detail-label { display:block; font-size:10px; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px; } .tc-pre { margin:2px 0 0; padding:6px 8px; border-radius: 6px; background:var(--sh); font-size:10px; font-family:var(--mono); color:var(--t3); white-space:pre-wrap; word-break:break-all; line-height:1.5; overflow:auto; max-height:140px; } .tc-pre.ok { background:rgba(22,163,74,0.05); } .tc-pre.err { background:rgba(239,68,68,0.05); color:var(--err); } /* ── Test Chat Knowledge Chunks ───────────────────────────────── */ .tc-chunk { padding:6px 8px; margin:3px 0; border-radius: 6px; background:rgba(6,182,212,0.04); border-left:2px solid #06B6D4; font-size:11px; color:var(--t2); line-height:1.5; } .tc-chunk-hdr { display:flex; justify-content:space-between; margin-bottom:2px; } .tc-chunk-label { font-size:10px; font-weight:600; color:#06B6D4; } .tc-chunk-text { font-size:11px; color:var(--t3); } /* ── Test Chat Badges & Misc ──────────────────────────────────── */ .tc-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius: 9999px; font-size:10px; font-weight:600; white-space:nowrap; } .tc-mono-sm { font-size:10px; font-family:var(--mono); color:var(--t4); } .tc-chev { color:var(--t4); transition:transform .15s var(--ease, cubic-bezier(.4,0,.2,1)); display:flex; } .tc-chev.open { transform:rotate(180deg); } /* ── Test Chat Guardrail Results ──────────────────────────────── */ .tc-guard { display:flex; align-items:center; gap:6px; margin:6px 0; padding:5px 10px; border-radius:var(--radius, 8px); background:rgba(22,163,74,0.05); border:1px solid rgba(22,163,74,0.12); font-size:11px; color:var(--ok); animation:cardIn .25s var(--ease, cubic-bezier(.4,0,.2,1)) both; } .tc-guard.fail { background:rgba(239,68,68,0.05); border-color:rgba(239,68,68,0.12); color:var(--err); } .tc-guard svg { width:13px; height:13px; flex-shrink:0; } .tc-guard-name { font-weight:600; } .tc-guard-reason { color:var(--t3); flex:1; } /* ── Test Chat Human-in-the-Loop ──────────────────────────────── */ .tc-hitl-overlay { position:absolute; inset:0; z-index:50; background:rgba(0,0,0,0.4); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:16px; } .tc-hitl-box { background:var(--s); border-radius:var(--radius-lg, 12px); box-shadow:var(--shadow-lg); overflow:hidden; width:100%; max-width:360px; } .tc-hitl-hdr { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--b); background:rgba(245,158,11,0.05); } .tc-hitl-hdr svg { width:18px; height:18px; color:var(--warn); flex-shrink:0; } .tc-hitl-hdr-text { flex:1; } .tc-hitl-title { font-size:13px; font-weight:700; color:var(--t); } .tc-hitl-sub { font-size:11px; color:var(--t3); margin-top:1px; } .tc-hitl-body { padding:12px 14px; } .tc-hitl-row { margin-bottom:10px; font-size:12px; color:var(--t2); } .tc-hitl-row:last-child { margin-bottom:0; } .tc-hitl-actions { display:flex; justify-content:flex-end; gap:6px; padding:10px 14px; border-top:1px solid var(--b); background:var(--sh); } /* ── Test Chat Message Footer ─────────────────────────────────── */ .tc-msg-footer { display:flex; gap:10px; margin-top:3px; padding-left:2px; font-size:10px; font-family:var(--mono); color:var(--t4); } /* ── Test Chat Typing Dots ────────────────────────────────────── */ .tc-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.4; animation:tc-bounce 1.2s ease-in-out infinite; margin-right:3px; } @keyframes tc-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} } /* ===================== studio-storage.css ===================== */ /* ============================================================ Studio · Storage page — page-specific styles CR-perf (May 2026): extracted from StudioStoragePage.jsx inline-style hot spots. Multi-occurrence patterns (2-4×) moved here; single-use bespoke styles remain inline. Naming: the `.sst-` prefix prevents collisions with other pages' classes (the rules below are NOT descendant-scoped under a parent — the prefix is the only guard, and it's sufficient because no other module uses `sst-` selectors). ============================================================ */ /* Card surface (background + border + radius + standard padding). NOTE: mirrors the JS constants `DS.cardBorder` (= "1px solid var(--beige-rule)") and `DS.cardRadius` (= 10) which are still used inline in StudioStoragePage.jsx. If those constants change, update this rule in lockstep. */ .sst-card { background: var(--s); border: 1px solid var(--beige-rule); border-radius: 10px; padding: 12px 14px; } /* Typography combos */ .sst-mono-label { font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t4); } .sst-mono-meta { font: 400 10.5px var(--mono); color: var(--t3); } .sst-label-soft { font-weight: 400; color: var(--t4); text-transform: none; letter-spacing: 0; } .sst-section-label { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t3); margin-bottom: 6px; } /* Layout snippets */ .sst-row-7 { display: flex; gap: 7px; } /* Headings */ .sst-stat-value { font: 600 22px var(--serif); color: var(--t); margin: 5px 0 2px; line-height: 1.05; } .sst-h-18 { font: 600 18px/1.2 var(--serif); color: var(--t); letter-spacing: -.005em; } /* Search input (bare, used in card headers) */ .sst-search-input { border: 0; outline: 0; background: transparent; flex: 1; font: 400 12px var(--sans); color: var(--t); min-width: 0; } /* Body copy + sub captions */ .sst-body-12-mt4 { font: 400 12px var(--sans); color: var(--t3); margin-top: 4px; } .sst-body-12-15 { font: 400 12px/1.55 var(--sans); color: var(--t2); } /* Icon buttons */ .sst-iconbtn-28 { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--t3); cursor: pointer; border: none; background: transparent; } /* Warning notice (used in confirm dialogs) */ .sst-warn-notice { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 11px 13px; background: var(--stg-warn-bg); border: 1px solid var(--stg-warn-border); border-radius: 8px; } /* ===================== studio-model-deploy.css ===================== */ /* ============================================================ Studio · Model Deploy page — page-specific styles CR-perf (May 2026): extracted from StudioModelDeployPage.jsx inline-style hot spots. Multi-occurrence patterns (2-4×) moved here. Prefix: `.smd-` to avoid collisions. ============================================================ */ /* Card variants. NOTE: the `border` values below mirror the JS constant `B = "1px solid var(--beige-rule)"` in StudioModelDeployPage.jsx, which is still used inline in many places. If that constant changes, update these rules in lockstep. */ .smd-card { background: var(--s); border: 1px solid var(--beige-rule); border-radius: 12px; padding: 14px 16px; } .smd-card-sm { background: var(--s); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 11px 13px; } /* Dark code/log surface */ .smd-dark-surface { background: #16161D; border: 1px solid #2C2C36; border-radius: 12px; overflow: hidden; } /* Headings */ .smd-page-title { font: 600 22px/1.1 var(--serif); letter-spacing: -.012em; color: var(--t); } .smd-page-sub { font: 400 12.5px var(--sans); color: var(--t3); margin-top: 5px; } .smd-h-12-5 { font: 600 12.5px var(--sans); color: var(--t); display: block; } .smd-h-12-5-mb10 { font: 600 12.5px var(--sans); color: var(--t); margin-bottom: 10px; } /* Typography */ .smd-mono-meta { font: 400 11px var(--mono); color: var(--t3); } .smd-mono-label { font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t4); margin-bottom: 4px; } .smd-mono-label-2 { font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t4); margin-bottom: 5px; } .smd-mono-label-3 { font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--t4); margin-bottom: 10px; } .smd-body-11 { font: 400 11px var(--sans); color: var(--t3); } .smd-body-11-clickable { font: 400 11px var(--sans); color: var(--t3); cursor: pointer; } .smd-body-12-with-icon { font: 400 12px var(--sans); color: var(--t3); margin-top: 7px; display: flex; align-items: center; gap: 5px; } /* Layout */ .smd-fill-scroll { flex: 1; overflow: auto; } .smd-row-6 { display: flex; gap: 6px; } /* ===================== marketplace.css ===================== */ /* ═══════════════════════════════════════════════════════════════ Marketplace - App-Specific Styles Extracted from marketplace/src/styles/global.css NOTE: Base layout (.R, .S, .M), CSS variables, reset, scrollbar, dropdown (.DD), avatar (.av), buttons (.btn), badges (.badge), empty state, modal, and page header styles are already in global.css -- not duplicated here. NOTE: The marketplace has its own sidebar extensions (.S-installed, .S-recent, etc.) and topbar (.T) that differ from platform-frontend. ═══════════════════════════════════════════════════════════════ */ /* ── Content Scroll / Layout ──────────────────────────────────── */ .content-scroll { flex: 1; overflow-y: auto; padding: 28px 32px; } .content-inner { max-width: 1200px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════ MARKETPLACE COMPONENTS ═══════════════════════════════════════════════════════════════ */ /* ── Hero ─────────────────────────────────────────────────────── */ .mp-hero { background: linear-gradient(135deg, rgba(217,119,6,.08), color-mix(in srgb, var(--brand) 6%, transparent)); border: 1px solid var(--b); border-radius: 16px; padding: 40px 44px; margin-bottom: 32px; animation: mp-fadeUp .4s ease both; } .mp-hero-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); } .mp-hero-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; } .mp-hero-title { font-size: 28px; font-weight: 700; color: var(--t); letter-spacing: -.02em; margin-bottom: 8px; } .mp-hero-desc { font-size: 14px; color: var(--t2); max-width: 540px; line-height: 1.6; margin-bottom: 28px; } .mp-hero-stats { display: flex; gap: 36px; } .mp-hero-stat-v { font-size: 24px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .mp-hero-stat-l { font-size: 11px; color: var(--t3); margin-top: 2px; } /* ── Section Headers ──────────────────────────────────────────── */ .mp-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .mp-section-title { font-size: 22px; font-weight: 700; color: var(--t); letter-spacing: -.01em; } .mp-section-desc { font-size: 13px; color: var(--t3); margin-top: 4px; } /* ── Search ───────────────────────────────────────────────────── */ .mp-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; border-radius: 12px; background: var(--s); border: 1.5px solid var(--b); transition: all .2s; margin-bottom: 20px; } .mp-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandL); } .mp-search-icon { color: var(--t4); display: flex; flex-shrink: 0; } .mp-search input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--t); } .mp-search input::placeholder { color: var(--t4); } .mp-search-clear { display: flex; border: none; background: none; color: var(--t4); cursor: pointer; padding: 2px; border-radius: 4px; } .mp-search-clear:hover { color: var(--t2); background: var(--sh); } .mp-search-kbd { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; color: var(--t4); background: var(--sh); border: 1px solid var(--b); } /* ── Filter Pills ─────────────────────────────────────────────── */ .mp-filters { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--b); } .mp-filter-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--t4); margin-bottom: 6px; } .mp-filter-pills { display: flex; gap: 4px; flex-wrap: wrap; } .mp-pill { padding: 5px 13px; border-radius: 9999px; border: 1px solid var(--b); background: var(--s); font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .12s; white-space: nowrap; } .mp-pill:hover { border-color: var(--brand); color: var(--brand); } .mp-pill.on { background: var(--brand); border-color: var(--brand); color: white; font-weight: 600; } /* ── Results Bar ──────────────────────────────────────────────── */ .mp-results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .mp-results-count { font-size: 12px; color: var(--t3); } .mp-clear-btn { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--b); background: var(--s); font-family: inherit; font-size: 11px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .12s; } .mp-clear-btn:hover { border-color: var(--err); color: var(--err); background: #FEF2F2; } /* ── Grid ─────────────────────────────────────────────────────── */ .mp-grid { display: grid; gap: 14px; } .mp-grid-2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .mp-grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .mp-grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* ── Card ─────────────────────────────────────────────────────── */ .mp-card { background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 18px; cursor: pointer; overflow: hidden; transition: all .2s cubic-bezier(.4,0,.2,1); animation: mp-fadeUp .4s cubic-bezier(.4,0,.2,1) both; } .mp-card:hover { border-color: var(--t4); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .mp-card-compact { padding: 14px; } /* Card top row */ .mp-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .mp-card-av { width: 40px; height: 40px; border-radius: 12px; color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: inset 0 1px 1px rgba(255,255,255,.2); } .mp-card-icon-box { width: 36px; height: 36px; border-radius: 8px; background: var(--sh); color: var(--t2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-card-identity { flex: 1; min-width: 0; } .mp-card-name-row { display: flex; align-items: center; gap: 6px; } .mp-card-name { font-size: 14px; font-weight: 600; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-card-sub { font-size: 12px; color: var(--t3); margin-top: 1px; } .mp-card-rating { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--t2); flex-shrink: 0; } /* Card description */ .mp-card-desc { font-size: 13px; color: var(--t2); line-height: 1.55; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Card footer */ .mp-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mp-card-framework { font-size: 11px; color: var(--t3); } .mp-card-installs { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--t3); margin-left: auto; } .mp-card-meta { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--t3); } /* Card action row */ .mp-card-actions { margin-top: 14px; display: flex; gap: 8px; } /* ── Quick Links (featured page) ──────────────────────────────── */ .mp-quicklinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 32px; } .mp-quicklink { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--s); border: 1px solid var(--b); border-radius: 12px; cursor: pointer; transition: all .15s; } .mp-quicklink:hover { border-color: var(--t4); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .mp-quicklink-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-quicklink-body { flex: 1; min-width: 0; } .mp-quicklink-title { font-size: 14px; font-weight: 600; color: var(--t); } .mp-quicklink-desc { font-size: 12px; color: var(--t3); margin-top: 2px; } /* ── Badges (Marketplace-specific) ────────────────────────────── */ .mp-type-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .mp-tier-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; background: var(--sh); color: var(--t3); } .mp-tier-badge.premium { background: #FEF3C7; color: #92400E; } .mp-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ok); } .mp-priority-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; } .mp-priority-badge.p1 { background: #DCFCE7; color: #15803D; } .mp-priority-badge.p2 { background: #EDE9FE; color: #6D28D9; } .mp-framework-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: var(--sh); color: var(--t3); } /* ── Kit File Chips ───────────────────────────────────────────── */ .mp-kit-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .mp-kit-file { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--sh); color: var(--t3); } /* ── Buttons (Marketplace-specific) ───────────────────────────── */ .mp-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--b); background: var(--s); font-family: inherit; font-size: 13px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .15s; white-space: nowrap; } .mp-btn:hover { border-color: var(--brand); color: var(--brand); } .mp-btn.pri { background: #7C5CFC; border-color: #7C5CFC; color: white; box-shadow: var(--shadow-xs); } .mp-btn.pri:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(124,92,252,.25); } .mp-btn.sm { padding: 6px 12px; font-size: 12px; } /* ── Modal (Marketplace-specific) ─────────────────────────────── */ .modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 200; animation: mp-fadeIn .15s; } .modal-x { width: 28px; height: 28px; border-radius: 6px; border: none; background: none; color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .1s; } .modal-x:hover { background: var(--sh); color: var(--t); } /* ── Detail Modal ─────────────────────────────────────────────── */ .mp-detail-hero { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .mp-detail-av { width: 56px; height: 56px; border-radius: 12px; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .mp-detail-info { flex: 1; } .mp-detail-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .mp-detail-name { font-size: 20px; font-weight: 600; color: var(--t); } .mp-detail-desc { font-size: 13px; color: var(--t2); margin-bottom: 10px; line-height: 1.5; } .mp-detail-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mp-detail-by { font-size: 12px; color: var(--t3); } .mp-detail-rating { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--t2); } .mp-detail-installs { font-size: 12px; color: var(--t3); } .mp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; } .mp-detail-card { background: var(--sh); border-radius: 12px; padding: 14px; } .mp-detail-card-label { font-size: 11px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .mp-detail-card-text { font-size: 13px; color: var(--t2); line-height: 1.6; } .mp-detail-card-text strong { font-weight: 600; color: var(--t); } .mp-detail-section { margin-bottom: 20px; } .mp-detail-tools { display: flex; gap: 6px; flex-wrap: wrap; } .mp-detail-tool { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 10px; border-radius: 6px; background: var(--sh); color: var(--t2); } .mp-detail-tool-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); } .mp-detail-yaml { background: var(--sh); border-radius: 12px; padding: 14px; } .mp-detail-pre { font-family: var(--mono); font-size: 12px; color: var(--t2); line-height: 1.6; margin: 0; white-space: pre-wrap; } /* ── Empty State ──────────────────────────────────────────────── */ .mp-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; } .mp-empty-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--sh); color: var(--t4); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .mp-empty-icon svg { width: 24px; height: 24px; } .mp-empty-title { font-size: 16px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .mp-empty-desc { font-size: 13px; color: var(--t3); margin-bottom: 20px; max-width: 320px; } /* ── Animations ───────────────────────────────────────────────── */ @keyframes mp-fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes mp-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mp-slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ MARKETPLACE — Dark mode overrides ═══════════════════════════════════════════════════════════════ */ .R.dark .mp-clear-btn:hover { background: #450a0a; } .R.dark .mp-btn.pri { background: #9B85FC; border-color: #9B85FC; } .R.dark .mp-tier-badge.premium { background: #78350F; color: #FCD34D; } .R.dark .mp-priority-badge.p1 { background: #052e16; color: #4ade80; } .R.dark .mp-priority-badge.p2 { background: #2e1065; color: #c4b5fd; } /* ═══════════════════════════════════════════════════════════════ APP GALLERY — minimal overrides for /marketplace/apps Uses standard mp-* classes. Only adds gap for logo-in-pill. ═══════════════════════════════════════════════════════════════ */ .mp-filter-pills .mp-pill > div:first-child { margin-right: 2px; } /* ═══════════════════════════════════════════════════════════════ MCP TOOLS — Card styles for Tools > Marketplace grid Mirrors the mp-* design system above for consistency. ═══════════════════════════════════════════════════════════════ */ /* ── Grid ─────────────────────────────────────────────────────── */ .mcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } /* ── Card ─────────────────────────────────────────────────────── */ .mcp-card { position: relative; background: var(--s); border: 1px solid var(--b); border-radius: 12px; padding: 18px; cursor: pointer; overflow: hidden; transition: all .2s cubic-bezier(.4,0,.2,1); animation: mp-fadeUp .4s cubic-bezier(.4,0,.2,1) both; display: flex; flex-direction: column; } .mcp-card:hover { border-color: var(--t4); box-shadow: var(--shadow-sm); transform: translateY(-2px); } /* Card top row: logo + name/description */ .mcp-card-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex: 1; } .mcp-card-logo { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; object-fit: contain; background: var(--sh); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--t3); overflow: hidden; } .mcp-card-logo img { width: 100%; height: 100%; object-fit: contain; } .mcp-card-body { flex: 1; min-width: 0; } .mcp-card-name { font-size: 14px; font-weight: 600; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .mcp-card-desc { font-size: 12px; color: var(--t3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Card external link icon */ .mcp-card-ext { position: absolute; top: 12px; right: 12px; color: var(--t4); opacity: 0; transition: opacity .15s; } .mcp-card:hover .mcp-card-ext { opacity: 1; } /* Card bottom: badges + deploy button */ .mcp-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mcp-card-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } /* ── Badges ───────────────────────────────────────────────────── */ .mcp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; background: var(--sh); color: var(--t3); } .mcp-badge--owner { font-weight: 600; } .mcp-badge--tools { color: var(--brand); background: var(--brandL); font-weight: 600; } .mcp-badge--stars { color: #92400E; background: #FEF3C7; } .mcp-badge--status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } /* Deploy button */ .mcp-card-deploy { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--b); background: var(--s); font-family: inherit; font-size: 12px; font-weight: 500; color: var(--brand); cursor: pointer; transition: all .12s; white-space: nowrap; } .mcp-card-deploy:hover { background: var(--brand); border-color: var(--brand); color: white; } /* ── Category sections ────────────────────────────────────────── */ .mcp-cat-section { margin-bottom: 28px; } .mcp-cat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .mcp-cat-icon { font-size: 20px; } .mcp-cat-title { font-size: 16px; font-weight: 600; color: var(--t); } .mcp-cat-desc { font-size: 12px; color: var(--t3); margin-top: 1px; } /* ── MCP — Dark mode ─────────────────────────────────────────── */ .R.dark .mcp-badge--stars { background: #78350F; color: #FCD34D; } .R.dark .mcp-card-deploy:hover { background: #9B85FC; border-color: #9B85FC; } /* ===================== workspace-shell.css ===================== */ /* workspace-shell.css FIX: Restores workspace chrome + sections + canvas + code/conversation styles that were dropped during the workspace-5 consolidation. Concatenation of the original Phase 2a through Phase 4 stylesheets. IMPORT IN main.jsx AFTER workspace-5.css: import "./styles/workspace-5.css"; import "./styles/workspace-5-2.css"; import "./styles/workspace-shell.css"; <- ADD THIS */ /* === Phase 2a: workspace shell (topbar, left nav, completion) === */ /* ============================================================ Workspace styles — Phase 2a ============================================================ Lives alongside agent-journey.css. Namespace is .ws-* for workspace-specific layout, and we reuse .formCard / .fld / .prompt / .desc / .modelPicker from agents-art.css for the inner section cards. Tokens come from colors_and_type.css; the workspace specifically relies on: --beige, --beige-pg, --beige-rule, --beige-b --brand, --brandL --t / --t2 / --t3 / --t4 --sans, --mono, --serif ============================================================ */ .ws-page { display: flex; flex-direction: column; height: 100vh; min-height: 0; background: var(--beige-pg); } /* ─── Topbar (tabs + view toggle + save status + publish) ──────────── */ .ws-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 24px; border-bottom: 1px solid var(--beige-rule); background: #fff; flex-shrink: 0; height: 56px; } .ws-topbar-tabs { display: flex; gap: 2px; background: var(--beige-pg); padding: 3px; border: 1px solid var(--beige-rule); border-radius: 8px; } .ws-tab { background: transparent; border: 0; padding: 6px 14px; border-radius: 6px; font: 500 12.5px var(--sans); color: var(--t3); cursor: pointer; transition: background .12s, color .12s; } .ws-tab:hover { color: var(--t2); background: rgba(0, 0, 0, 0.025); } .ws-tab.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06); } .ws-topbar-spacer { flex: 1; } /* View toggle (visual / code / chat) */ .ws-topbar-views { display: flex; gap: 1px; background: var(--beige-pg); padding: 2px; border: 1px solid var(--beige-rule); border-radius: 6px; } .ws-view-btn { background: transparent; border: 0; padding: 5px 10px; border-radius: 4px; font: 500 11.5px var(--sans); color: var(--t3); cursor: pointer; transition: background .12s, color .12s; } .ws-view-btn:hover { color: var(--t2); } .ws-view-btn.on { background: #fff; color: var(--t); font-weight: 600; } /* Save status pill */ .ws-save-pill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font: 500 11.5px var(--sans); color: var(--t3); background: var(--beige-pg); border: 1px solid var(--beige-rule); transition: all .15s; } .ws-save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); flex-shrink: 0; } .ws-save-saved { color: #2E7039; background: #EDF6EE; border-color: #C7DFCC; } .ws-save-saved .ws-save-dot { background: #2E7039; } .ws-save-saving { color: var(--brand); background: var(--brandL); border-color: #DDD0FF; } .ws-save-saving .ws-save-dot { background: var(--brand); animation: ws-pulse 1.2s ease-in-out infinite; } .ws-save-dirty { color: #A6601C; background: #FBEDD9; border-color: #E1B47A; } .ws-save-dirty .ws-save-dot { background: #A6601C; } .ws-save-error { color: #A4282A; background: #FBEDED; border-color: #E5B4B4; cursor: pointer; } .ws-save-error .ws-save-dot { background: #A4282A; } @keyframes ws-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } /* Publish button */ .ws-publish { background: var(--brand); color: #fff; border: 0; padding: 7px 16px; border-radius: 6px; font: 600 12.5px var(--sans); cursor: pointer; transition: background .12s; } .ws-publish:hover { background: #4825D6; } /* ─── Body: left nav + main + side ──────────────────────────────────── */ .ws-body { flex: 1; min-height: 0; overflow: hidden; } .ws-body-visual { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; height: 100%; } @media (max-width: 1199px) { .ws-body-visual { grid-template-columns: 200px minmax(0, 1fr) 280px; } } /* CR-444: canvas full-pane body — ws-canvas-section-fullbleed uses flex:1 to fill its parent, but ws-body had no display:flex or explicit height so flex:1 resolved to zero and the canvas collapsed. Match the same height:100% + flex-column pattern ws-body-visual uses. */ .ws-body-canvas { display: flex; flex-direction: column; height: 100%; } /* Left nav */ .ws-leftnav { background: #fff; border-right: 1px solid var(--beige-rule); padding: 14px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .ws-leftnav-group { display: flex; flex-direction: column; gap: 1px; } .ws-leftnav-grouplbl { font: 600 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px 4px; } .ws-leftnav-item { background: transparent; border: 0; padding: 7px 10px; border-radius: 6px; font: 500 12.5px var(--sans); color: var(--t2); cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; transition: background .12s, color .12s; } .ws-leftnav-item:hover { background: var(--beige-pg); color: var(--t); } .ws-leftnav-item.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .ws-leftnav-lbl { flex: 1; } .ws-leftnav-req { color: var(--t4); font: 400 14px var(--sans); line-height: 1; } .ws-leftnav-item.on .ws-leftnav-req { color: var(--brand); } /* Main content area */ .ws-main { overflow-y: auto; padding: 24px 28px 48px; background: var(--beige-pg); } .ws-main-head { margin-bottom: 18px; } .ws-main-head h2 { font: 500 18px/1.3 var(--sans); color: var(--t); letter-spacing: -0.005em; } .ws-main-head p { font: 400 12.5px/1.5 var(--sans); color: var(--t3); margin-top: 3px; } /* Side pane wrapper — gives the DraftPreviewPane a scrollable container */ .ws-side-wrap { background: #fff; border-left: 1px solid var(--beige-rule); overflow-y: auto; padding: 18px 16px; } .ws-side-wrap > .acj-side { /* Side pane should fill the wrapper rather than float as a card */ position: static; border: 0; padding: 0; background: transparent; } /* ─── Sections (.ws-section is the wrapper for any section content) ── */ .ws-section { display: flex; flex-direction: column; gap: 16px; max-width: 740px; } .ws-section .formCard { background: #fff; border: 1px solid var(--beige-rule); border-radius: 12px; padding: 18px 20px; } .ws-section .formCard h3 { font: 600 13px var(--sans); color: var(--t); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .ws-section .formCard h3 small { font: 400 11px var(--mono); color: var(--t3); margin-left: auto; font-weight: 400; } .ws-section .formCard p { font: 400 12.5px/1.5 var(--sans); color: var(--t2); } /* Form fields shared across sections */ .ws-section .fld { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; } .ws-section .fld:first-of-type { margin-top: 0; } .ws-section .fld:last-of-type { margin-bottom: 0; } .ws-section .fld label { font: 500 11.5px var(--sans); color: var(--t2); } .ws-section .fld input { font: 500 13px var(--sans); padding: 8px 11px; border: 1px solid var(--beige-b); border-radius: 6px; background: #fff; color: var(--t); transition: border-color .12s, background .12s, box-shadow .12s; } .ws-section .fld input.mono { font: 500 12.5px var(--mono); background: var(--beige-pg); } .ws-section .fld input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-section .fld input[aria-invalid="true"] { border-color: #A4282A; } .ws-section .fld input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(164, 40, 42, 0.18); } .ws-section .fld .desc { font: 400 11px/1.45 var(--sans); color: var(--t3); } .ws-fld-err { font: 500 11px var(--sans); color: #A4282A; } /* System prompt textarea */ .ws-section .fld textarea.prompt { font: 400 12.5px/1.6 var(--mono); padding: 12px 14px; border: 1px solid var(--beige-b); border-radius: 6px; background: #FAFAF7; color: var(--t); min-height: 280px; resize: vertical; width: 100%; } .ws-section .fld textarea.prompt:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } /* ─── Prompt Studio import controls ─────────────────────────────────── */ /* "Browse Prompt Studio" button next to the section heading. Looks like a tertiary action — secondary to the section, but discoverable as a real action (not a link). */ .ws-prompt-browse { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); color: var(--brand); font: 600 11px var(--sans); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .ws-prompt-browse:hover { background: var(--brandL); border-color: var(--brand); } .ws-prompt-browse:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-prompt-glyph { width: 13px; height: 13px; flex-shrink: 0; } /* Source chip — shown below the textarea when a Prompt Studio prompt has been imported. Brand-tinted to match the picker. */ .ws-source-chip { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; background: var(--brandL); border: 1px solid #DDD0FF; border-radius: 8px; font: 400 11.5px var(--sans); color: var(--t2); } .ws-source-chip.err { background: #FBEDED; border-color: #E5B4B4; color: #A4282A; } .ws-source-chip > .ws-prompt-glyph { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; } .ws-source-chip.err > .ws-prompt-glyph { color: #A4282A; } .ws-source-text { flex: 1; line-height: 1.4; } .ws-source-text b { font-weight: 600; color: var(--t); } .ws-source-chip.err .ws-source-text b { color: #A4282A; } .ws-source-newer { margin-left: 6px; padding: 1px 6px; background: #fff; border: 1px solid var(--brand); border-radius: 4px; color: var(--brand); font: 600 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .ws-source-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .ws-source-action { background: transparent; border: 0; padding: 4px 8px; border-radius: 4px; font: 500 11px var(--sans); color: var(--t3); text-decoration: none; cursor: pointer; transition: background .12s, color .12s; } .ws-source-action:hover { background: #fff; color: var(--t); } .ws-source-action.primary { background: var(--brand); color: #fff; font-weight: 600; } .ws-source-action.primary:hover { background: #4825D6; color: #fff; } .ws-source-action:disabled { opacity: 0.5; cursor: not-allowed; } /* Warning chips (variables, multi-message, sync error) */ .ws-source-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 12px; background: #FBEDD9; border: 1px solid #E1B47A; border-radius: 8px; font: 400 11.5px/1.5 var(--sans); color: var(--t2); } .ws-source-warn.err { background: #FBEDED; border-color: #E5B4B4; color: #A4282A; } .ws-source-warn svg { width: 13px; height: 13px; color: #A6601C; flex-shrink: 0; margin-top: 2px; } .ws-source-warn.err svg { color: #A4282A; } .ws-source-warn span { flex: 1; } .ws-var-tag { display: inline-block; margin: 0 2px; padding: 0 5px; background: #fff; border: 1px solid #E1B47A; border-radius: 4px; font: 600 10.5px var(--mono); color: #A6601C; letter-spacing: 0.02em; } /* ─── Tier picker (Behavior section's headline component) ───────────── */ .ws-tier-explainer { margin: 0 0 14px; font: 400 12.5px/1.5 var(--sans); color: var(--t3); } .ws-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 999px) { .ws-tier-grid { grid-template-columns: 1fr; } } .ws-tier-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: border-color .12s, box-shadow .12s, background .12s; } .ws-tier-card:hover { border-color: var(--beige-b); box-shadow: 0 1px 3px rgba(20, 20, 30, 0.04); } .ws-tier-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-tier-card.sel { background: #FBFAFE; box-shadow: 0 0 0 1px currentColor; } .ws-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ws-tier-tag { font: 600 9.5px var(--mono); letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; } .ws-tier-cost { font: 600 12px var(--mono); color: var(--t3); letter-spacing: 0.06em; } .ws-tier-card h4 { font: 600 14px var(--sans); color: var(--t); margin: 0; line-height: 1.2; } .ws-tier-card p { font: 400 11.5px/1.5 var(--sans); color: var(--t2); margin: 0; flex: 1; } .ws-tier-meta { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid var(--beige-rule); } .ws-tier-meta span { display: flex; flex-direction: column; gap: 1px; } .ws-tier-meta small { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-tier-meta b { font: 600 11.5px var(--mono); color: var(--t); } .ws-tier-eg { font: italic 400 10.5px/1.4 var(--sans); color: var(--t3); padding-top: 6px; border-top: 1px dashed var(--beige-rule); } .ws-tier-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--beige-rule); font: 400 12px var(--sans); color: var(--t3); } .ws-tier-foot b { font-weight: 600; color: var(--t); } .ws-link { color: var(--brand); text-decoration: none; font-weight: 500; } .ws-link:hover { text-decoration: underline; } /* ─── Placeholder section ───────────────────────────────────────────── */ .ws-placeholder-section .formCard { background: var(--beige-pg); border-style: dashed; } .ws-placeholder-body { color: var(--t3); font-style: italic; margin-bottom: 16px; } .ws-placeholder-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--beige-b); } .ws-placeholder-meta > div { display: flex; gap: 12px; align-items: baseline; } .ws-placeholder-lbl { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; width: 70px; flex-shrink: 0; } .ws-placeholder-val { font: 500 12px var(--sans); color: var(--t2); flex: 1; } /* Test / Deploy / Code / Conversation tab placeholders */ .ws-placeholder-tab { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; background: var(--beige-pg); color: var(--t3); } .ws-placeholder-tab h2 { font: 500 22px var(--sans); color: var(--t); margin-bottom: 8px; } .ws-placeholder-tab p { font: 400 13px/1.6 var(--sans); color: var(--t3); max-width: 480px; } /* ─── Loading skeleton ──────────────────────────────────────────────── */ .ws-skeleton { pointer-events: none; } .ws-skel-row { height: 11px; background: linear-gradient( 90deg, var(--beige-rule) 0%, var(--beige-pg) 50%, var(--beige-rule) 100% ); background-size: 200% 100%; border-radius: 4px; animation: ws-skel-shimmer 1.4s ease-in-out infinite; margin: 6px 0; } .ws-skel-card { height: 240px; background: linear-gradient( 90deg, var(--beige-rule) 0%, var(--beige-pg) 50%, var(--beige-rule) 100% ); background-size: 200% 100%; border-radius: 12px; animation: ws-skel-shimmer 1.4s ease-in-out infinite; margin: 8px; } @keyframes ws-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === Phase 2b: capabilities, channels, guardrails, sub-agents === */ /* ============================================================ Phase 2b workspace sections — attach lists, channels, guardrails, memory, advanced. Loaded after workspace.css. Keeps Phase 2b styles isolated for easy rollback / lazy-load in v1.1. Token usage: same palette as workspace.css. New utilities here are namespaced .ws-attach-*, .ws-chan-*, .ws-gr-*, .ws-mem-*, .ws-adv-*, .ws-env-*, .ws-policy-*, .ws-toggle-*. ============================================================ */ /* ─── Section grid (two-column for Tools section) ───────────────────── */ .ws-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1199px) { .ws-section-grid { grid-template-columns: 1fr; } } /* ─── Attachable list (Tools / Skills / KBs) ───────────────────────── */ .ws-attach-col { background: #fff; border: 1px solid var(--beige-rule); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; } .ws-attach-head { font: 600 13px var(--sans); color: var(--t); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .ws-attach-icon { width: 16px; height: 16px; color: var(--t2); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .ws-attach-icon svg { width: 14px; height: 14px; } .ws-attach-count { font: 600 10px var(--mono); padding: 2px 7px; background: var(--beige); border-radius: 6px; color: var(--t3); margin-left: auto; letter-spacing: 0.04em; } .ws-attach-desc { font: 400 11.5px/1.5 var(--sans); color: var(--t3); margin-bottom: 12px; } .ws-attach-search { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; margin-bottom: 9px; transition: border-color .12s, background .12s; } .ws-attach-search:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-attach-search svg { width: 13px; height: 13px; color: var(--t4); flex-shrink: 0; } .ws-attach-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 11.5px var(--sans); color: var(--t); } .ws-attach-search input::placeholder { color: var(--t4); } .ws-attach-list { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; padding-right: 2px; } .ws-attach-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 9px 10px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: border-color .12s, background .12s, box-shadow .12s; } .ws-attach-item:hover { border-color: var(--beige-b); } .ws-attach-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-attach-item.sel { border-color: var(--brand); background: #FAF7FF; box-shadow: 0 0 0 1px var(--brand); } .ws-attach-itemic { width: 32px; height: 32px; border-radius: 8px; background: var(--beige-pg); display: flex; align-items: center; justify-content: center; color: var(--t2); flex-shrink: 0; } .ws-attach-itemic svg { width: 15px; height: 15px; } /* Kind-specific tints — match the chip palette from agents-art.css */ .ws-attach-itemic.tool { background: #E9F0FB; color: #1F58B5; } .ws-attach-itemic.kb { background: #EDF6EE; color: #2E7039; } .ws-attach-itemic.mcp { background: #F4ECFB; color: #6B36B5; } .ws-attach-itemic.skill { background: #FFEFE9; color: #C34F28; } .ws-attach-itemic.agent { background: #FFEFE9; color: #C34F28; font: 600 11px var(--sans); letter-spacing: 0.02em; } .ws-attach-itembody { min-width: 0; display: flex; flex-direction: column; } .ws-attach-itembody b { font: 600 12.5px var(--sans); color: var(--t); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ws-attach-itemmeta { font: 400 10.5px/1.4 var(--mono); color: var(--t3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-attach-itemmeta em { font: italic 400 10.5px var(--sans); color: var(--t3); } /* Toggle pill on the right of each row */ .ws-attach-toggle { width: 28px; height: 16px; border-radius: 8px; background: var(--beige-b); position: relative; flex-shrink: 0; transition: background .18s; } .ws-attach-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: left .18s; } .ws-attach-item.sel .ws-attach-toggle, .ws-attach-toggle.sel, .ws-toggle-row.on .ws-attach-toggle { background: var(--brand); } .ws-attach-item.sel .ws-attach-toggle::after, .ws-attach-toggle.sel::after, .ws-toggle-row.on .ws-attach-toggle::after { left: 14px; } .ws-attach-empty { padding: 24px 16px; text-align: center; color: var(--t3); font: 400 12px var(--sans); background: var(--beige-pg); border: 1px dashed var(--beige-b); border-radius: 8px; } .ws-attach-err { padding: 9px 12px; background: #FBEDED; border: 1px solid #E5B4B4; border-radius: 8px; font: 500 11.5px var(--sans); color: #A4282A; margin-bottom: 8px; } .ws-attach-skel .ws-attach-itemic { background: var(--beige-rule); animation: ws-skel-shimmer 1.4s ease-in-out infinite; } .ws-attach-action { margin-top: 12px; padding: 8px 14px; width: 100%; border: 1px dashed var(--beige-b); background: var(--beige-pg); border-radius: 8px; font: 500 12px var(--sans); color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .12s; } .ws-attach-action:hover { border-color: var(--brand); background: var(--brandL); color: var(--brand); } .ws-attach-action svg { width: 13px; height: 13px; } .ws-attach-foot { margin-top: 10px; padding: 9px 12px; background: var(--beige-pg); border-radius: 8px; font: 400 11px/1.5 var(--sans); color: var(--t3); } /* Per-tool badges */ .ws-policy-badge { font: 600 9px var(--mono); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-policy-auto { background: #EDF6EE; color: #2E7039; } .ws-policy-manual { background: #FBEDD9; color: #A6601C; } .ws-policy-deny { background: #FBEDED; color: #A4282A; } .ws-mcp-status { font: 600 9px var(--mono); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-mcp-status.ok { background: #EDF6EE; color: #2E7039; } .ws-mcp-status.warn { background: #FBEDD9; color: #A6601C; } .ws-mcp-status.err { background: #FBEDED; color: #A4282A; } .ws-skill-ver { font: 600 9.5px var(--mono); color: var(--t4); letter-spacing: 0.02em; } .ws-skill-builtin { font: 600 9px var(--mono); padding: 1px 5px; background: var(--brandL); color: var(--brand); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Memory section ─────────────────────────────────────────────────── */ .ws-mem-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 4px; } @media (max-width: 999px) { .ws-mem-row { grid-template-columns: 1fr; } } .ws-mem-card { padding: 13px 14px; border: 1.5px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; display: flex; flex-direction: column; gap: 4px; } .ws-mem-card:hover { border-color: var(--beige-b); background: #fff; } .ws-mem-card.sel { background: var(--brandL); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-mem-card b { font: 600 13px var(--sans); color: var(--t); } .ws-mem-card span { font: 400 11px/1.4 var(--sans); color: var(--t2); } .ws-mem-card em { font: italic 400 10.5px var(--sans); color: var(--t3); margin-top: 4px; } /* Toggle row — single-line settings inside formCards */ .ws-toggle-row { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; margin-top: 12px; transition: all .12s; } .ws-toggle-row:hover { border-color: var(--beige-b); background: #fff; } .ws-toggle-row.on { border-color: var(--brand); background: #FAF7FF; } .ws-toggle-row-body { flex: 1; display: flex; flex-direction: column; } .ws-toggle-row-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-toggle-row-body span { font: 400 11px/1.4 var(--sans); color: var(--t3); margin-top: 2px; } /* ─── Channels section ─────────────────────────────────────────────── */ .ws-chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 1099px) { .ws-chan-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .ws-chan-grid { grid-template-columns: 1fr; } } .ws-chan-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 13px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; display: flex; flex-direction: column; gap: 6px; transition: all .12s; } .ws-chan-card:hover { border-color: var(--beige-b); } .ws-chan-card.on { background: #FAF7FF; box-shadow: 0 0 0 1px currentColor; } .ws-chan-card.ws-chan-disabled { opacity: 0.55; cursor: not-allowed; } .ws-chan-head { display: flex; align-items: center; justify-content: space-between; } .ws-chan-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .ws-chan-logo svg { width: 18px; height: 18px; } .ws-chan-card h4 { font: 600 13px var(--sans); color: var(--t); margin: 4px 0 0; } .ws-chan-card p { font: 400 11.5px/1.45 var(--sans); color: var(--t2); flex: 1; margin: 0; } .ws-chan-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 1px solid var(--beige-rule); font: 500 10.5px var(--mono); color: var(--t3); } .ws-chan-soon { background: var(--beige); color: var(--t3); padding: 1px 6px; border-radius: 4px; font: 600 9px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Guardrails section ──────────────────────────────────────────── */ .ws-gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 999px) { .ws-gr-grid { grid-template-columns: 1fr; } } .ws-gr-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 13px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; display: flex; flex-direction: column; gap: 7px; transition: all .12s; } .ws-gr-card:hover { border-color: var(--beige-b); } .ws-gr-card.sel { background: #FBFAFE; box-shadow: 0 0 0 1px currentColor; } .ws-gr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ws-gr-card-tag { font: 600 9.5px var(--mono); padding: 2px 7px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .ws-gr-card-rules { font: 600 10.5px var(--mono); color: var(--t3); letter-spacing: 0.02em; } .ws-gr-card h4 { font: 600 14px var(--sans); color: var(--t); margin: 0; } .ws-gr-card p { font: 400 11.5px/1.5 var(--sans); color: var(--t2); margin: 0; flex: 1; } .ws-gr-card-rec { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--beige-rule); } .ws-gr-card-rec small { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-gr-card-rec span { font: 500 10.5px var(--mono); color: var(--t2); } .ws-gr-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--beige-rule); font: 400 12px var(--sans); color: var(--t3); } .ws-gr-foot b { font-weight: 600; color: var(--t); } /* Per-rule overrides */ .ws-gr-override { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--beige-rule); } .ws-gr-override:last-child { border-bottom: 0; } .ws-gr-override-body { flex: 1; display: flex; flex-direction: column; } .ws-gr-override-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-gr-override-body span { font: 400 11px/1.4 var(--sans); color: var(--t3); margin-top: 2px; } .ws-gr-override-pick { display: flex; gap: 1px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 6px; padding: 2px; flex-shrink: 0; } .ws-gr-override-btn { background: transparent; border: 0; padding: 4px 9px; border-radius: 4px; font: 500 11px var(--sans); color: var(--t3); cursor: pointer; transition: all .12s; } .ws-gr-override-btn:hover { color: var(--t); } .ws-gr-override-btn.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, .06); } /* ─── Advanced section ────────────────────────────────────────────── */ .ws-adv-nat-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ws-adv-nat-choice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; } .ws-adv-nat-choice:hover { border-color: var(--beige-b); background: var(--beige-pg); } .ws-adv-nat-choice.sel { border-color: var(--brand); background: #FAF7FF; box-shadow: 0 0 0 1px var(--brand); } .ws-adv-nat-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--beige-b); background: #fff; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; } .ws-adv-nat-choice.sel .ws-adv-nat-radio { border-color: var(--brand); } .ws-adv-nat-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .ws-adv-nat-body { flex: 1; display: flex; flex-direction: column; } .ws-adv-nat-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-adv-nat-body span { font: 400 11.5px/1.45 var(--sans); color: var(--t3); margin-top: 2px; } .ws-inline-code { font: 500 11.5px var(--mono); background: var(--beige-pg); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--beige-rule); color: var(--t); } /* Env var editor */ .ws-env-list { display: flex; flex-direction: column; gap: 6px; } .ws-env-empty { padding: 20px 16px; text-align: center; color: var(--t3); font: 400 12px var(--sans); background: var(--beige-pg); border: 1px dashed var(--beige-b); border-radius: 8px; } .ws-env-row { display: grid; grid-template-columns: 1fr 1.5fr 32px; gap: 8px; align-items: center; } .ws-env-row input { padding: 7px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); font: 500 12px var(--mono); color: var(--t); } .ws-env-row input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-env-remove { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 6px; color: var(--t3); cursor: pointer; font-size: 18px; line-height: 1; transition: all .12s; } .ws-env-remove:hover { background: #FBEDED; color: #A4282A; } /* Raw config preview */ .ws-raw-config { margin-top: 10px; padding: 12px 14px; background: var(--t); color: #FAFAF7; border-radius: 8px; font: 400 11px/1.6 var(--mono); overflow-x: auto; max-height: 360px; overflow-y: auto; } /* ─── Sub-agents section ────────────────────────────────────────────── */ /* Tab strip inside the section card (Internal vs External) */ .ws-sub-tabs { display: flex; gap: 2px; background: var(--beige-pg); padding: 3px; border: 1px solid var(--beige-rule); border-radius: 8px; margin: 12px 0 14px; width: max-content; } .ws-sub-tab { background: transparent; border: 0; padding: 6px 14px; border-radius: 6px; font: 500 12px var(--sans); color: var(--t3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .12s; } .ws-sub-tab:hover { color: var(--t2); } .ws-sub-tab.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06); } .ws-sub-count { font: 600 9.5px var(--mono); background: var(--brand); color: #fff; padding: 1px 6px; border-radius: 8px; min-width: 16px; text-align: center; } .ws-sub-tab:not(.on) .ws-sub-count { background: var(--t4); } /* A2A picker — input form for adding external agents */ .ws-a2a-picker { display: flex; flex-direction: column; gap: 14px; } .ws-a2a-add { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 14px 16px; } .ws-a2a-add label { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .ws-a2a-add-lbl { font: 600 12px var(--sans); color: var(--t); } .ws-a2a-add-sub { font: 400 11.5px/1.55 var(--sans); color: var(--t3); } .ws-a2a-add-row { display: flex; gap: 8px; } .ws-a2a-add-row input { flex: 1; padding: 8px 11px; border: 1px solid var(--beige-b); border-radius: 6px; background: #fff; font: 500 12px var(--mono); color: var(--t); } .ws-a2a-add-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-a2a-add-row .btn.primary { background: var(--brand); color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; } .ws-a2a-add-row .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Card preview shown after validating a URL */ .ws-a2a-preview { background: var(--brandL); border: 1px solid #DDD0FF; border-radius: 8px; padding: 14px 16px; } .ws-a2a-preview-head { display: flex; align-items: center; gap: 12px; } .ws-a2a-preview-ic { width: 40px; height: 40px; border-radius: 8px; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ws-a2a-preview-ic svg { width: 20px; height: 20px; } .ws-a2a-preview-head > div:not(.ws-a2a-preview-ic) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ws-a2a-preview-head b { font: 600 13px var(--sans); color: var(--t); } .ws-a2a-preview-head span { font: 400 11px var(--mono); color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-a2a-preview-head .btn.primary { background: var(--brand); color: #fff; border: 0; padding: 7px 14px; border-radius: 6px; font: 600 12px var(--sans); cursor: pointer; flex-shrink: 0; } .ws-a2a-preview-desc { font: 400 12px/1.5 var(--sans); color: var(--t2); margin-top: 10px; } .ws-a2a-preview-skills { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #DDD0FF; } .ws-a2a-preview-skills small { font: 600 9.5px var(--mono); color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 5px; } .ws-a2a-preview-skills > div { display: flex; flex-wrap: wrap; gap: 4px; } .ws-a2a-skill { font: 500 11px var(--mono); padding: 2px 8px; background: #fff; border: 1px solid #DDD0FF; color: var(--brand); border-radius: 4px; } /* List of attached external A2A agents */ .ws-a2a-list-head { margin-bottom: 8px; } .ws-a2a-list-head small { font: 600 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; } .ws-a2a-row { display: grid; grid-template-columns: 32px 1fr 32px; gap: 11px; align-items: center; padding: 9px 10px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; margin-bottom: 6px; } /* A2A badge on agent rows (both internal and external) */ .ws-a2a-badge { font: 600 9px var(--mono); padding: 1px 6px; background: rgba(24, 95, 165, 0.12); color: #185FA5; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } /* === Phase 2c: status dots, publish modal === */ /* ============================================================ Phase 2c — polish layer - Section status dots in left nav - Completion progress bar in topbar - Publish modal (validation gate) - Variable-binding card (Behavior → Channels) ============================================================ */ /* ─── Section status dots in left nav ───────────────────────────────── */ .ws-leftnav-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; line-height: 1; color: var(--t4); font: 400 14px var(--sans); display: inline-flex; align-items: center; justify-content: center; } /* Inherit the dot color from the parent class */ .ws-leftnav-status.ws-status-required { /* Original required-but-untouched indicator — keep the legacy "•" character so familiarity carries across versions. */ background: transparent; color: var(--t4); width: auto; height: auto; } .ws-leftnav-item.on .ws-leftnav-status.ws-status-required { color: var(--brand); } .ws-leftnav-status.ws-status-complete { background: #2E7039; } .ws-leftnav-status.ws-status-warnings { background: #C8941F; } .ws-leftnav-status.ws-status-missing { background: #A4282A; /* Subtle pulse so users notice missing required fields */ animation: ws-status-pulse 1.6s ease-in-out infinite; } @keyframes ws-status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 40, 42, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(164, 40, 42, 0); } } /* ─── Completion progress bar (topbar) ──────────────────────────────── */ .ws-completion { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 6px; font: 500 11px var(--mono); color: var(--t3); } .ws-completion-bar { width: 80px; height: 5px; background: var(--beige-rule); border-radius: 9999px; overflow: hidden; flex-shrink: 0; } .ws-completion-fill { display: block; height: 100%; transition: width .25s ease; } .ws-completion-fill.ok { background: #2E7039; } .ws-completion-fill.warn { background: #C8941F; } .ws-completion-fill.err { background: #A4282A; } .ws-completion-lbl { font-weight: 600; color: var(--t2); letter-spacing: 0.04em; flex-shrink: 0; min-width: 32px; text-align: right; } /* ─── Publish modal ─────────────────────────────────────────────────── */ .ws-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .ws-modal { width: 720px; max-width: 100%; max-height: 85vh; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(20, 20, 30, 0.04); display: flex; flex-direction: column; overflow: hidden; outline: none; } .ws-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid var(--beige-rule); } .ws-modal-head-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ws-modal-head-ic svg { width: 18px; height: 18px; } .ws-modal-head h2 { font: 500 18px/1.3 var(--sans); color: var(--t); letter-spacing: -0.005em; margin: 0 0 2px; } .ws-modal-head p { font: 400 12.5px/1.5 var(--sans); color: var(--t3); margin: 0; } .ws-modal-head > div:not(.ws-modal-head-ic) { flex: 1; min-width: 0; } .ws-modal-close { background: transparent; border: 0; padding: 4px 10px; color: var(--t3); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; flex-shrink: 0; } .ws-modal-close:hover { background: var(--beige-pg); color: var(--t); } /* Body */ .ws-modal-body { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; } .ws-modal-card { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 14px 16px; } .ws-modal-card.ws-modal-card-err { background: #FBEDED; border-color: #E5B4B4; } .ws-modal-card.ws-modal-card-warn { background: #FBEDD9; border-color: #E1B47A; } .ws-modal-card h3 { font: 600 12.5px var(--sans); color: var(--t); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .ws-modal-card h3 svg { width: 14px; height: 14px; } .ws-modal-card.ws-modal-card-err h3 { color: #A4282A; } .ws-modal-card.ws-modal-card-warn h3 { color: #A6601C; } .ws-modal-card h3 small { font: 400 11px var(--sans); color: var(--t3); font-weight: 400; margin-left: auto; } /* Section status grid inside modal */ .ws-modal-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .ws-modal-section-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; } .ws-modal-section-row:hover { background: #fff; border-color: var(--beige-rule); } .ws-modal-section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--t4); } .ws-modal-section-row.ws-status-complete .ws-modal-section-dot { background: #2E7039; } .ws-modal-section-row.ws-status-warnings .ws-modal-section-dot { background: #C8941F; } .ws-modal-section-row.ws-status-missing .ws-modal-section-dot { background: #A4282A; } .ws-modal-section-row.ws-status-untouched .ws-modal-section-dot { background: var(--t4); opacity: 0.4; } .ws-modal-section-lbl { flex: 1; font: 500 12.5px var(--sans); color: var(--t); display: flex; align-items: center; gap: 6px; } .ws-modal-section-req { font: 600 9px var(--mono); color: var(--t3); background: var(--beige); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-modal-section-status { font: 500 11px var(--mono); color: var(--t3); flex-shrink: 0; } .ws-modal-section-row.ws-status-complete .ws-modal-section-status { color: #2E7039; } .ws-modal-section-row.ws-status-warnings .ws-modal-section-status { color: #C8941F; } .ws-modal-section-row.ws-status-missing .ws-modal-section-status { color: #A4282A; font-weight: 700; } /* Issue list (blockers + warnings) */ .ws-modal-issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ws-modal-issue { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 9px 11px; background: #fff; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; align-items: center; } .ws-modal-card-err .ws-modal-issue { border-color: #E5B4B4; } .ws-modal-card-warn .ws-modal-issue { border-color: #E1B47A; } .ws-modal-issue:hover { background: var(--beige-pg); } .ws-modal-issue-lbl { font: 600 11.5px var(--sans); color: var(--t); flex-shrink: 0; } .ws-modal-issue-msg { font: 400 11.5px/1.4 var(--sans); color: var(--t2); } .ws-modal-issue-link { font: 500 11px var(--sans); color: var(--brand); flex-shrink: 0; } /* Publish summary dl */ .ws-modal-summary { margin: 0; display: flex; flex-direction: column; gap: 7px; } .ws-modal-summary > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; } .ws-modal-summary dt { font: 500 11.5px var(--mono); color: var(--t3); letter-spacing: 0.02em; } .ws-modal-summary dd { font: 500 12px var(--sans); color: var(--t); margin: 0; } .ws-modal-summary dd b { font-weight: 600; } /* Footer */ .ws-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--beige-rule); background: var(--beige-pg); } .ws-modal-foot .btn { background: var(--beige); color: var(--t); border: 0; padding: 8px 16px; border-radius: 6px; font: 500 12.5px var(--sans); cursor: pointer; transition: background .12s; } .ws-modal-foot .btn:hover { background: var(--sh, var(--beige-rule)); } .ws-modal-foot .btn.primary { background: var(--brand); color: #fff; font-weight: 600; } .ws-modal-foot .btn.primary:hover { background: #4825D6; } .ws-modal-foot .btn.primary:disabled { background: var(--beige-b); color: var(--t3); cursor: not-allowed; } /* ─── Variable-binding card (Behavior → Channels) ──────────────────── */ .ws-var-binding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } @media (max-width: 999px) { .ws-var-binding-grid { grid-template-columns: 1fr; } } .ws-var-binding { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: all .12s; } .ws-var-binding:hover { border-color: var(--beige-b); } .ws-var-binding.on { border-color: var(--brand); background: #FAF7FF; box-shadow: 0 0 0 1px var(--brand); } .ws-var-binding code { font: 600 12px var(--mono); color: var(--t); background: transparent; padding: 0; } .ws-var-binding.on code { color: var(--brand); } .ws-var-binding.on .ws-attach-toggle { background: var(--brand); } .ws-var-binding.on .ws-attach-toggle::after { left: 14px; } /* === Phase 3: type-specific topology editors === */ /* ============================================================ Phase 3 — type-specific topology editors Canvas wrappers (workflow + team) lean on @xyflow/react's own CSS plus the legacy `.cnv*` classes already in the codebase. This file adds the workspace-specific chrome around them and the form sections (data sources, sandbox, research config). ============================================================ */ /* ─── Canvas section frame ─────────────────────────────────────────── */ .ws-section-canvas { /* Canvas needs more vertical room than form sections — bump to full main-pane height minus the header. */ flex: 1; min-height: 0; } .ws-canvas-card { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; } .ws-canvas-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--beige-rule); } .ws-canvas-head h3 { margin-bottom: 5px; } .ws-canvas-head p { margin: 0; } .ws-canvas-host { flex: 1; min-height: 480px; display: flex; background: var(--beige-pg); /* The xyflow canvas is opinionated about being its own scroll container — let it own this region. */ position: relative; overflow: hidden; } /* ─── Data sources section ─────────────────────────────────────────── */ .ws-data-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ws-data-source { border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; overflow: hidden; transition: border-color .12s, box-shadow .12s; } .ws-data-source.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-data-source-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; } .ws-data-source-row:hover { background: var(--beige-pg); } .ws-data-source.sel .ws-data-source-row { background: #FAF7FF; } .ws-data-source.sel .ws-attach-toggle { background: var(--brand); } .ws-data-source.sel .ws-attach-toggle::after { left: 14px; } .ws-data-source-detail { border-top: 1px solid var(--beige-rule); padding: 0 12px 12px; background: var(--beige-pg); } .ws-data-expand { margin-top: 10px; padding: 5px 9px; font: 500 11px var(--mono); color: var(--brand); background: transparent; border: 1px solid var(--beige-rule); border-radius: 6px; cursor: pointer; transition: all .12s; } .ws-data-expand:hover { background: var(--brandL); border-color: var(--brand); } .ws-data-schemas { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--beige-rule); border-radius: 8px; } .ws-data-schemas-help { font: 400 11.5px/1.5 var(--sans); color: var(--t3); margin-bottom: 9px; } .ws-data-schema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; } .ws-data-schema-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--beige-rule); border-radius: 6px; background: var(--beige-pg); cursor: pointer; text-align: left; transition: all .12s; } .ws-data-schema-chip:hover { border-color: var(--beige-b); } .ws-data-schema-chip.on { border-color: var(--brand); background: var(--brandL); color: var(--brand); } .ws-data-schema-chip code { font: 600 11.5px var(--mono); color: inherit; } .ws-data-schema-chip span { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-data-policy { display: flex; flex-direction: column; gap: 14px; } /* ─── Sandbox section ──────────────────────────────────────────────── */ .ws-sandbox-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 999px) { .ws-sandbox-images { grid-template-columns: 1fr; } } .ws-sandbox-image { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 8px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all .12s; position: relative; } .ws-sandbox-image:hover { border-color: var(--beige-b); } .ws-sandbox-image.sel { background: #FAF7FF; box-shadow: 0 0 0 1px currentColor; } .ws-sandbox-image code { font: 600 11.5px var(--mono); color: var(--t); margin-bottom: 4px; } .ws-sandbox-image b { font: 600 13px var(--sans); color: var(--t); } .ws-sandbox-image span { font: 400 11.5px/1.4 var(--sans); color: var(--t3); } .ws-sandbox-rec { position: absolute; top: 10px; right: 12px; font: 600 9px var(--mono); color: var(--brand); background: var(--brandL); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-sandbox-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; } @media (max-width: 999px) { .ws-sandbox-resources { grid-template-columns: 1fr; } } .ws-sandbox-net { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } /* Package editor */ .ws-pkg-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .ws-pkg-input { display: flex; gap: 8px; } .ws-pkg-input input { flex: 1; padding: 7px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); font: 500 12px var(--mono); color: var(--t); } .ws-pkg-input input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-pkg-input .btn { background: var(--beige); color: var(--t); border: 0; padding: 7px 14px; border-radius: 6px; font: 500 12px var(--sans); cursor: pointer; flex-shrink: 0; } .ws-pkg-input .btn:hover { background: var(--beige-b); } .ws-pkg-input .btn:disabled { opacity: 0.5; cursor: not-allowed; } .ws-pkg-list { display: flex; flex-wrap: wrap; gap: 6px; } .ws-pkg-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: var(--brandL); color: var(--brand); border: 1px solid #DDD0FF; border-radius: 6px; font: 500 11px var(--mono); cursor: pointer; transition: all .12s; } .ws-pkg-tag:hover { background: #FBEDED; color: #A4282A; border-color: #E5B4B4; } .ws-pkg-tag span { font-size: 14px; line-height: 1; opacity: 0.7; } .ws-pkg-tag:hover span { opacity: 1; } /* ─── Research config section ──────────────────────────────────────── */ .ws-rsc-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .ws-rsc-locked { opacity: 0.7; cursor: default; } .ws-rsc-locked-tag { font: 600 9px var(--mono); color: var(--t3); background: var(--beige); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; } .ws-rsc-depth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } @media (max-width: 999px) { .ws-rsc-depth { grid-template-columns: 1fr; } } .ws-rsc-depth-card { padding: 13px 14px; border: 1.5px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 4px; transition: all .12s; } .ws-rsc-depth-card:hover { border-color: var(--beige-b); background: #fff; } .ws-rsc-depth-card.sel { background: var(--brandL); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-rsc-depth-card b { font: 600 13px var(--sans); color: var(--t); } .ws-rsc-depth-card span { font: 400 11px/1.4 var(--sans); color: var(--t2); } .ws-rsc-depth-card em { font: italic 400 10.5px var(--sans); color: var(--t3); margin-top: 4px; } .ws-rsc-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 999px) { .ws-rsc-limits { grid-template-columns: 1fr; } } /* === Phase 4: Code view (file tree + Monaco) + Conversation view === */ /* ============================================================ Phase 4 — Code view + Conversation view Both are full-pane alternate views to the Visual section editor. They take over the body region (.ws-body) when activeView is 'code' or 'conversation'. ============================================================ */ /* ─── Body wrappers ─────────────────────────────────────────────────── */ .ws-body-code, .ws-body-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--beige-pg); } /* ─── Code view (Monaco YAML editor) ────────────────────────────────── */ .ws-code-view { display: flex; flex-direction: row; flex: 1; min-height: 0; background: #fff; } /* Editor pane (right side, takes remaining width) */ .ws-code-editor-pane { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; } /* ─── File tree sidebar ────────────────────────────────────────────── */ .ws-code-tree { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--beige-pg); border-right: 1px solid var(--beige-rule); overflow: hidden; } .ws-code-tree-head { display: flex; align-items: center; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; background: var(--beige); } .ws-code-tree-title { flex: 1; font: 600 11px var(--mono); color: var(--t3); letter-spacing: 0.06em; text-transform: uppercase; } .ws-code-tree-new { width: 22px; height: 22px; border: 1px solid var(--beige-b); border-radius: 4px; background: #fff; color: var(--t2); cursor: pointer; font: 600 14px/1 var(--sans); display: flex; align-items: center; justify-content: center; transition: all .12s; } .ws-code-tree-new:hover { color: var(--brand); border-color: var(--brand); background: var(--brandL); } .ws-code-tree-body { flex: 1; overflow-y: auto; padding: 4px 0; } /* Tree rows (folders + files) */ .ws-code-tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; font: 500 12px var(--sans); color: var(--t2); transition: background .08s; user-select: none; position: relative; } .ws-code-tree-row:hover { background: var(--beige); color: var(--t); } .ws-code-tree-file.on { background: var(--brandL); color: var(--brand); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); } .ws-code-tree-file.on:hover { background: var(--brandL); } /* Chevron (folder open/closed indicator) */ .ws-code-tree-chev { width: 10px; height: 10px; flex-shrink: 0; color: var(--t4); transition: transform .12s; } /* Folder + file icons */ .ws-code-tree-folder-ic { width: 13px; height: 13px; flex-shrink: 0; color: #A6601C; } .ws-code-tree-file-ic { width: 13px; height: 13px; flex-shrink: 0; } /* Label */ .ws-code-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Inline tags + status */ .ws-code-tree-tag { font: 600 8.5px var(--mono); color: var(--brand); background: var(--brandL); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } .ws-code-tree-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } /* Hover-only +/× action button on each row */ .ws-code-tree-rowact { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--t4); cursor: pointer; font: 700 13px/1 var(--sans); flex-shrink: 0; opacity: 0; transition: all .12s; } .ws-code-tree-row:hover .ws-code-tree-rowact { opacity: 1; } .ws-code-tree-rowact:hover { background: var(--beige-b); color: var(--t); } /* Delete button gets a red hover */ .ws-code-tree-file .ws-code-tree-rowact:hover { background: #FBEDED; color: #A4282A; } /* Inline new-file input */ .ws-code-tree-new-file { display: flex; align-items: center; gap: 6px; padding: 4px 8px; } .ws-code-tree-new-file input { flex: 1; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 4px; background: #fff; font: 500 11.5px var(--mono); color: var(--t); outline: none; min-width: 0; } .ws-code-tree-new-file input:focus { box-shadow: 0 0 0 2px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } /* Toolbar above the editor */ .ws-code-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--beige-pg); border-bottom: 1px solid var(--beige-rule); height: 44px; flex-shrink: 0; } .ws-code-toolbar-info { display: flex; align-items: center; gap: 10px; } .ws-code-toolbar-spacer { flex: 1; } .ws-code-filename { font: 600 12px var(--mono); color: var(--t); padding: 3px 8px; background: var(--beige); border-radius: 4px; letter-spacing: 0.02em; } .ws-code-status { font: 600 9px var(--mono); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .ws-code-status-clean { background: #EDF6EE; color: #2E7039; } .ws-code-status-dirty { background: #FBEDD9; color: #A6601C; } .ws-code-status-err { background: #FBEDED; color: #A4282A; } /* Toolbar buttons */ .ws-code-btn { background: #fff; border: 1px solid var(--beige-b); padding: 5px 14px; border-radius: 6px; font: 500 12px var(--sans); color: var(--t); cursor: pointer; transition: all .12s; } .ws-code-btn:hover:not(:disabled) { background: var(--beige-pg); border-color: var(--t4); } .ws-code-btn:disabled { opacity: 0.45; cursor: not-allowed; } .ws-code-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .ws-code-btn-primary:hover:not(:disabled) { background: #4825D6; border-color: #4825D6; } .ws-code-btn-primary:disabled { background: var(--beige-b); color: var(--t3); border-color: var(--beige-b); } .ws-code-btn-danger { background: #A4282A; border-color: #A4282A; } .ws-code-btn-danger:hover:not(:disabled) { background: #841F22; border-color: #841F22; } /* Banners (errors / warnings / info) */ .ws-code-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--beige-rule); font: 400 12px/1.5 var(--sans); flex-shrink: 0; } .ws-code-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .ws-code-banner-info { background: #EAF2F8; color: #185FA5; border-color: #C7D9EE; } .ws-code-banner-warn { background: #FBEDD9; color: #A6601C; border-color: #E1B47A; } .ws-code-banner-err { background: #FBEDED; color: #A4282A; border-color: #E5B4B4; } .ws-code-banner b { font-weight: 600; display: block; margin-bottom: 4px; } .ws-code-banner ul { margin: 0; padding-left: 18px; font-size: 11.5px; line-height: 1.55; } .ws-code-banner li { margin-bottom: 2px; } /* Editor host (Monaco fills this) */ .ws-code-editor-host { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ─── Conversation view ─────────────────────────────────────────────── */ .ws-conv-view { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; max-width: 880px; width: 100%; margin: 0 auto; border-left: 1px solid var(--beige-rule); border-right: 1px solid var(--beige-rule); } /* Message list */ .ws-conv-messages { flex: 1; overflow-y: auto; padding: 24px 28px 12px; display: flex; flex-direction: column; gap: 18px; } /* Message rows */ .ws-conv-msg { display: flex; gap: 12px; align-items: flex-start; } .ws-conv-avatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 600 10px var(--mono); letter-spacing: 0.04em; } .ws-conv-avatar-user { background: var(--beige); color: var(--t2); } .ws-conv-avatar-assistant { background: var(--brand); color: #fff; } .ws-conv-bubble-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ws-conv-bubble { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 12px 14px; font: 400 13.5px/1.55 var(--sans); color: var(--t); } .ws-conv-msg-user .ws-conv-bubble { background: var(--brandL); border-color: #DDD0FF; } .ws-conv-bubble p { margin: 0 0 8px; } .ws-conv-bubble p:last-child { margin-bottom: 0; } /* Loading bubble (3 dots) */ .ws-conv-bubble-loading { display: inline-flex; align-items: center; gap: 4px; padding: 16px 18px; } .ws-conv-loading-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); animation: ws-conv-pulse 1.2s ease-in-out infinite; } .ws-conv-loading-dot:nth-child(2) { animation-delay: 0.2s; } .ws-conv-loading-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes ws-conv-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* Patches card */ .ws-conv-patches { background: #FAF7FF; border: 1px solid #DDD0FF; border-radius: 8px; padding: 11px 13px; } .ws-conv-patches-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--brand); font: 600 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .ws-conv-patches-head svg { width: 13px; height: 13px; } .ws-conv-patches-summary { font: 400 12px/1.5 var(--sans); color: var(--t2); margin: 0 0 8px; } .ws-conv-patches ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ws-conv-patches li { display: flex; align-items: baseline; gap: 8px; font: 400 11.5px var(--sans); } .ws-conv-patches li code { font: 600 11px var(--mono); color: var(--brand); background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid #DDD0FF; flex-shrink: 0; } .ws-conv-patches li span { color: var(--t3); } /* Error banner */ .ws-conv-error { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FBEDED; border: 1px solid #E5B4B4; border-radius: 8px; color: #A4282A; font: 500 12px var(--sans); } .ws-conv-error svg { width: 16px; height: 16px; flex-shrink: 0; } /* Composer (input + send button) */ .ws-conv-composer { border-top: 1px solid var(--beige-rule); padding: 14px 28px 18px; background: #fff; flex-shrink: 0; } .ws-conv-composer textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--beige-b); border-radius: 8px; background: var(--beige-pg); font: 400 13.5px/1.5 var(--sans); color: var(--t); resize: none; transition: border-color .12s, background .12s; } .ws-conv-composer textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-conv-composer textarea::placeholder { color: var(--t4); } .ws-conv-composer textarea:disabled { opacity: 0.6; cursor: not-allowed; } .ws-conv-composer-foot { display: flex; align-items: center; margin-top: 8px; gap: 12px; } .ws-conv-composer-hint { flex: 1; font: 400 11px var(--sans); color: var(--t4); } /* Fix 4: Collapse draft panel when canvas is active */ .ws-side-collapsed { width: 48px !important; min-width: 48px !important; overflow: hidden; transition: width 0.2s ease; } .ws-side-collapsed > * { opacity: 0; pointer-events: none; } .ws-side-collapsed:hover { width: 320px !important; overflow: visible; } .ws-side-collapsed:hover > * { opacity: 1; pointer-events: auto; } /* FIX 5: Neutral progress bar on test tab */ .ws-topbar[data-tab="test"] .ws-progress-fill { background: var(--t4, #98958E) !important; } /* ===================== workspace.css ===================== */ /* ============================================================= workspace.css — consolidated workspace styles Merged in original import order from main.jsx: 1. workspace-5.css (Test/Deploy/Publish tabs) 2. workspace-5-2.css (Sub-agents role editor + A2A) 3. workspace-shell.css (main shell chrome) 4. workspace-test-layout.css (Test tab layout fixes) 5. workspace-deploy-merged.css (Deploy tab surface preview) 6. workspace-canvas-fullbleed.css (canvas full-bleed layout) ============================================================= */ /* ── 1. workspace-5 — Test / Deploy / Publish tabs ─────────── */ /* ============================================================ Phase 5 — Test / Deploy / Publish - .ws-body-test wrapper + ws-test-headerstrip + ws-test-panelwrap (Test tab body that hosts TestChatPanel) - .ws-body-deploy + ws-deploy-* (Deploy tab body: visibility + surfaces pickers, preview) - .ws-publish-busy + .ws-spinner keyframes (in-flight publish) - .ws-modal-publish-err / hint (publish error surface in modal) ============================================================ */ /* ─── Test tab body ───────────────────────────────────────────────── */ .ws-body-test { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--beige-pg); } .ws-test-headerstrip { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--s); border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; font: 500 12px var(--sans); } .ws-test-headerlbl { color: var(--t4); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; font-weight: 600; } .ws-test-headername { color: var(--t); font-weight: 600; font-size: 13px; } .ws-test-headertier { color: var(--t3); font-family: var(--mono); font-size: 11px; padding: 2px 8px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 4px; } .ws-test-headerstat { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; } .ws-test-headerstat .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ws-test-headerstat.ok { background: rgba(46, 112, 57, 0.10); color: #2E7039; } .ws-test-headerstat.warn { background: rgba(200, 148, 31, 0.10); color: #B58300; } /* Phase 5.1 disclaimer banner — sits between the header strip and the chat panel when the user has tools/KBs/sub-agents attached but we're running direct mode (LLM-only). Honest signal that those capabilities don't run until publish. */ .ws-test-disclaimer { background: rgba(200, 148, 31, 0.08); border-bottom: 1px solid rgba(200, 148, 31, 0.20); color: #8A6300; font: 400 12px/1.5 var(--sans); padding: 8px 20px; flex-shrink: 0; text-align: center; } /* The TestChatPanel renders a fixed-width side panel; we wrap it so it sits centered in the body with a max width, surrounded by the warm-beige page bg. The panel keeps its own resizable width from localStorage; we don't override it. */ .ws-test-panelwrap { flex: 1; min-height: 0; display: flex; justify-content: center; background: var(--beige-pg); overflow: hidden; } .ws-test-panelwrap > * { /* TestChatPanel's outermost div uses flexShrink: 0 + an inline width — let it own its width and just give it a centering wrapper. Override the borderLeft to a card-like edge on both sides since we're floating it, not docking it. */ border-left: 1px solid var(--bd); border-right: 1px solid var(--bd); box-shadow: var(--shadow-card, 0 4px 16px rgba(0, 0, 0, .06)); } /* ─── Deploy tab body ─────────────────────────────────────────────── */ .ws-body-deploy { flex: 1; min-height: 0; display: flex; background: var(--beige-pg); overflow: hidden; } .ws-deploy-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; } .ws-deploy-scroll { width: 100%; max-width: 720px; padding: 28px 28px 64px; display: flex; flex-direction: column; gap: 24px; } .ws-deploy-head h2 { font: 600 22px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--t); margin: 0 0 6px 0; } .ws-deploy-head p { font: 400 13px/1.55 var(--sans); color: var(--t3); margin: 0; max-width: 60ch; } .ws-deploy-section { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; padding: 18px 20px; } .ws-deploy-section h3 { font: 600 13px var(--sans); color: var(--t); margin: 0 0 12px 0; letter-spacing: -0.01em; } .ws-deploy-sectiondesc { font: 400 12px/1.55 var(--sans); color: var(--t3); margin: -4px 0 12px 0; } /* Visibility radio rows */ .ws-deploy-vislist { display: flex; flex-direction: column; gap: 4px; } .ws-deploy-visrow { position: relative; display: grid; grid-template-columns: 18px 100px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease; } .ws-deploy-visrow:hover { background: var(--sh); } .ws-deploy-visrow.on { background: var(--brandL, #EDE8FF); } .ws-deploy-visrow input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .ws-deploy-visradio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--bd); background: var(--s); position: relative; } .ws-deploy-visrow.on .ws-deploy-visradio { border-color: var(--brand); } .ws-deploy-visrow.on .ws-deploy-visradio::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .ws-deploy-visrow:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; } .ws-deploy-vislabel { font: 500 13px var(--sans); color: var(--t); } .ws-deploy-visdesc { font: 400 12px var(--sans); color: var(--t3); } /* Surfaces checkbox rows */ .ws-deploy-surflist { display: flex; flex-direction: column; gap: 4px; } .ws-deploy-surfrow { position: relative; display: grid; grid-template-columns: 18px 140px 1fr; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease; } .ws-deploy-surfrow:hover { background: var(--sh); } .ws-deploy-surfrow.on { background: var(--brandL, #EDE8FF); } .ws-deploy-surfrow input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .ws-deploy-surfbox { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--bd); background: var(--s); position: relative; } .ws-deploy-surfrow.on .ws-deploy-surfbox { border-color: var(--brand); background: var(--brand); } .ws-deploy-surfrow.on .ws-deploy-surfbox::after { content: ""; position: absolute; top: 1px; left: 4px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); } .ws-deploy-surfrow:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; } .ws-deploy-surflabel { font: 500 13px var(--sans); color: var(--t); } .ws-deploy-surfdesc { font: 400 12px var(--sans); color: var(--t3); } /* Preview block */ .ws-deploy-preview { background: var(--beige-pg); } .ws-deploy-previewlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ws-deploy-previewlist li { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; } .ws-deploy-previewlbl { font: 500 12px var(--sans); color: var(--t2); } .ws-deploy-previewline { font: 400 12px var(--mono); color: var(--t); background: var(--s); border: 1px solid var(--bl2); border-radius: 6px; padding: 4px 10px; overflow-x: auto; white-space: nowrap; } .ws-deploy-previewfoot { margin: 14px 0 0 0; font: 400 12px var(--sans); color: var(--t3); } .ws-deploy-previewfoot strong { color: var(--t); font-weight: 600; } /* ─── Publish modal — in-flight + error surfaces ─────────────────── */ .ws-publish-busy { /* Spinner inherits color from the button; just align it comfortably with the label. The spinner element itself sets its own dimensions inline. */ display: inline-flex; align-items: center; } @keyframes ws-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ws-modal-publish-err { font: 400 13px/1.55 var(--sans); color: var(--err, #A23E2E); margin: 8px 0 4px 0; /* Long stack-trace-like messages should wrap legibly inside the error card without forcing horizontal scroll. */ word-break: break-word; } .ws-modal-publish-err-hint { font: 400 12px/1.55 var(--sans); color: var(--t3); margin: 0; } /* Reduce motion: keep the spinner subtle so it still signals activity without flashing for users with prefers-reduced-motion. */ @media (prefers-reduced-motion: reduce) { .ws-spinner { animation-duration: 2s !important; } .ws-status-missing { animation: none !important; } } /* ── 2. workspace-5-2 — Sub-agents role editor + A2A ────────── */ /* ============================================================ Phase 5.2 — Sub-agents: role editor + A2A tweaks Adds the "edit role / description" panel that appears under the internal-agent picker after attachment, plus the register-without-preview affordance for CORS-blocked A2A cards. ============================================================ */ /* ─── Internal sub-agent role editor ─────────────────────────────── */ .ws-sub-roles { margin-top: 14px; padding: 14px; background: var(--beige-pg); border: 1px solid var(--bl2); border-radius: 12px; } .ws-sub-roles-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--bl2); } .ws-sub-roles-head small { font: 600 11px var(--mono); color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; } .ws-sub-roles-hint { font: 400 11.5px var(--sans); color: var(--t3); margin-left: auto; } .ws-sub-role-row { display: grid; grid-template-columns: 180px 1fr 200px; gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--bl2); } .ws-sub-role-row:last-child { border-bottom: none; padding-bottom: 0; } .ws-sub-role-name { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; } .ws-sub-role-name b { font: 600 13px var(--sans); color: var(--t); } .ws-sub-role-fields { display: flex; flex-direction: column; gap: 8px; } .ws-sub-role-fields label { display: flex; flex-direction: column; gap: 3px; } .ws-sub-role-fields label > span { font: 600 10px var(--sans); color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; } .ws-sub-role-fields input { border: 1px solid var(--bd); background: var(--s); border-radius: 6px; padding: 6px 9px; font: 400 12.5px var(--sans); color: var(--t); outline: none; width: 100%; } .ws-sub-role-fields input.mono { font-family: var(--mono); font-size: 12px; } .ws-sub-role-fields input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandGhost); } .ws-sub-role-preview { padding-top: 24px; text-align: right; } .ws-sub-role-preview .ws-inline-code { font: 500 11.5px var(--mono); background: var(--s); border: 1px solid var(--bl2); color: var(--brand); padding: 3px 8px; border-radius: 6px; word-break: break-all; } /* ─── A2A "register without preview" button ───────────────────────── */ .ws-a2a-add-blind { margin-left: auto; background: var(--s); color: var(--brand); border: 1px solid var(--brand); padding: 4px 10px; border-radius: 6px; font: 500 11.5px var(--sans); cursor: pointer; } .ws-a2a-add-blind:hover { background: var(--brandL); } /* ─── Mobile / narrow viewport adjustments ────────────────────────── */ @media (max-width: 880px) { .ws-sub-role-row { grid-template-columns: 1fr; gap: 8px; } .ws-sub-role-name { padding-top: 0; } .ws-sub-role-preview { padding-top: 0; text-align: left; } } /* ── 3. workspace-shell — main shell chrome ─────────────────── */ /* workspace-shell.css FIX: Restores workspace chrome + sections + canvas + code/conversation styles that were dropped during the workspace-5 consolidation. Concatenation of the original Phase 2a through Phase 4 stylesheets. IMPORT IN main.jsx AFTER workspace-5.css: import "./styles/workspace-5.css"; import "./styles/workspace-5-2.css"; import "./styles/workspace-shell.css"; <- ADD THIS */ /* === Phase 2a: workspace shell (topbar, left nav, completion) === */ /* ============================================================ Workspace styles — Phase 2a ============================================================ Lives alongside agent-journey.css. Namespace is .ws-* for workspace-specific layout, and we reuse .formCard / .fld / .prompt / .desc / .modelPicker from agents-art.css for the inner section cards. Tokens come from colors_and_type.css; the workspace specifically relies on: --beige, --beige-pg, --beige-rule, --beige-b --brand, --brandL --t / --t2 / --t3 / --t4 --sans, --mono, --serif ============================================================ */ .ws-page { display: flex; flex-direction: column; height: 100vh; min-height: 0; background: var(--beige-pg); } /* ─── Topbar (tabs + view toggle + save status + publish) ──────────── */ .ws-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 24px; border-bottom: 1px solid var(--beige-rule); background: #fff; flex-shrink: 0; height: 56px; } .ws-topbar-tabs { display: flex; gap: 2px; background: var(--beige-pg); padding: 3px; border: 1px solid var(--beige-rule); border-radius: 8px; } .ws-tab { background: transparent; border: 0; padding: 6px 14px; border-radius: 6px; font: 500 12.5px var(--sans); color: var(--t3); cursor: pointer; transition: background .12s, color .12s; } .ws-tab:hover { color: var(--t2); background: rgba(0, 0, 0, 0.025); } .ws-tab.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06); } .ws-topbar-spacer { flex: 1; } /* View toggle (visual / code / chat) */ .ws-topbar-views { display: flex; gap: 1px; background: var(--beige-pg); padding: 2px; border: 1px solid var(--beige-rule); border-radius: 6px; } .ws-view-btn { background: transparent; border: 0; padding: 5px 10px; border-radius: 4px; font: 500 11.5px var(--sans); color: var(--t3); cursor: pointer; transition: background .12s, color .12s; } .ws-view-btn:hover { color: var(--t2); } .ws-view-btn.on { background: #fff; color: var(--t); font-weight: 600; } /* Save status pill */ .ws-save-pill { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font: 500 11.5px var(--sans); color: var(--t3); background: var(--beige-pg); border: 1px solid var(--beige-rule); transition: all .15s; } .ws-save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); flex-shrink: 0; } .ws-save-saved { color: #2E7039; background: #EDF6EE; border-color: #C7DFCC; } .ws-save-saved .ws-save-dot { background: #2E7039; } .ws-save-saving { color: var(--brand); background: var(--brandL); border-color: #DDD0FF; } .ws-save-saving .ws-save-dot { background: var(--brand); animation: ws-pulse 1.2s ease-in-out infinite; } .ws-save-dirty { color: #A6601C; background: #FBEDD9; border-color: #E1B47A; } .ws-save-dirty .ws-save-dot { background: #A6601C; } .ws-save-error { color: #A4282A; background: #FBEDED; border-color: #E5B4B4; cursor: pointer; } .ws-save-error .ws-save-dot { background: #A4282A; } @keyframes ws-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } /* Publish button */ .ws-publish { background: var(--brand); color: #fff; border: 0; padding: 7px 16px; border-radius: 6px; font: 600 12.5px var(--sans); cursor: pointer; transition: background .12s; } .ws-publish:hover { background: #4825D6; } /* ─── Body: left nav + main + side ──────────────────────────────────── */ .ws-body { flex: 1; min-height: 0; overflow: hidden; } .ws-body-visual { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; height: 100%; } @media (max-width: 1199px) { .ws-body-visual { grid-template-columns: 200px minmax(0, 1fr) 280px; } } /* Left nav */ .ws-leftnav { background: #fff; border-right: 1px solid var(--beige-rule); padding: 14px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .ws-leftnav-group { display: flex; flex-direction: column; gap: 1px; } .ws-leftnav-grouplbl { font: 600 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px 4px; } .ws-leftnav-item { background: transparent; border: 0; padding: 7px 10px; border-radius: 6px; font: 500 12.5px var(--sans); color: var(--t2); cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; transition: background .12s, color .12s; } .ws-leftnav-item:hover { background: var(--beige-pg); color: var(--t); } .ws-leftnav-item.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .ws-leftnav-lbl { flex: 1; } .ws-leftnav-req { color: var(--t4); font: 400 14px var(--sans); line-height: 1; } .ws-leftnav-item.on .ws-leftnav-req { color: var(--brand); } /* Main content area */ .ws-main { overflow-y: auto; padding: 24px 28px 48px; background: var(--beige-pg); } .ws-main-head { margin-bottom: 18px; } .ws-main-head h2 { font: 500 18px/1.3 var(--sans); color: var(--t); letter-spacing: -0.005em; } .ws-main-head p { font: 400 12.5px/1.5 var(--sans); color: var(--t3); margin-top: 3px; } /* Side pane wrapper — gives the DraftPreviewPane a scrollable container */ .ws-side-wrap { background: #fff; border-left: 1px solid var(--beige-rule); overflow-y: auto; padding: 18px 16px; } .ws-side-wrap > .acj-side { /* Side pane should fill the wrapper rather than float as a card */ position: static; border: 0; padding: 0; background: transparent; } /* ─── Sections (.ws-section is the wrapper for any section content) ── */ .ws-section { display: flex; flex-direction: column; gap: 16px; max-width: 740px; } .ws-section .formCard { background: #fff; border: 1px solid var(--beige-rule); border-radius: 12px; padding: 18px 20px; } .ws-section .formCard h3 { font: 600 13px var(--sans); color: var(--t); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .ws-section .formCard h3 small { font: 400 11px var(--mono); color: var(--t3); margin-left: auto; font-weight: 400; } .ws-section .formCard p { font: 400 12.5px/1.5 var(--sans); color: var(--t2); } /* Form fields shared across sections */ .ws-section .fld { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; } .ws-section .fld:first-of-type { margin-top: 0; } .ws-section .fld:last-of-type { margin-bottom: 0; } .ws-section .fld label { font: 500 11.5px var(--sans); color: var(--t2); } .ws-section .fld input { font: 500 13px var(--sans); padding: 8px 11px; border: 1px solid var(--beige-b); border-radius: 6px; background: #fff; color: var(--t); transition: border-color .12s, background .12s, box-shadow .12s; } .ws-section .fld input.mono { font: 500 12.5px var(--mono); background: var(--beige-pg); } .ws-section .fld input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-section .fld input[aria-invalid="true"] { border-color: #A4282A; } .ws-section .fld input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(164, 40, 42, 0.18); } .ws-section .fld .desc { font: 400 11px/1.45 var(--sans); color: var(--t3); } .ws-fld-err { font: 500 11px var(--sans); color: #A4282A; } /* System prompt textarea */ .ws-section .fld textarea.prompt { font: 400 12.5px/1.6 var(--mono); padding: 12px 14px; border: 1px solid var(--beige-b); border-radius: 6px; background: #FAFAF7; color: var(--t); min-height: 280px; resize: vertical; width: 100%; } .ws-section .fld textarea.prompt:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } /* ─── Prompt Studio import controls ─────────────────────────────────── */ /* "Browse Prompt Studio" button next to the section heading. Looks like a tertiary action — secondary to the section, but discoverable as a real action (not a link). */ .ws-prompt-browse { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); color: var(--brand); font: 600 11px var(--sans); cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .ws-prompt-browse:hover { background: var(--brandL); border-color: var(--brand); } .ws-prompt-browse:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-prompt-glyph { width: 13px; height: 13px; flex-shrink: 0; } /* Source chip — shown below the textarea when a Prompt Studio prompt has been imported. Brand-tinted to match the picker. */ .ws-source-chip { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; background: var(--brandL); border: 1px solid #DDD0FF; border-radius: 8px; font: 400 11.5px var(--sans); color: var(--t2); } .ws-source-chip.err { background: #FBEDED; border-color: #E5B4B4; color: #A4282A; } .ws-source-chip > .ws-prompt-glyph { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; } .ws-source-chip.err > .ws-prompt-glyph { color: #A4282A; } .ws-source-text { flex: 1; line-height: 1.4; } .ws-source-text b { font-weight: 600; color: var(--t); } .ws-source-chip.err .ws-source-text b { color: #A4282A; } .ws-source-newer { margin-left: 6px; padding: 1px 6px; background: #fff; border: 1px solid var(--brand); border-radius: 4px; color: var(--brand); font: 600 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .ws-source-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .ws-source-action { background: transparent; border: 0; padding: 4px 8px; border-radius: 4px; font: 500 11px var(--sans); color: var(--t3); text-decoration: none; cursor: pointer; transition: background .12s, color .12s; } .ws-source-action:hover { background: #fff; color: var(--t); } .ws-source-action.primary { background: var(--brand); color: #fff; font-weight: 600; } .ws-source-action.primary:hover { background: #4825D6; color: #fff; } .ws-source-action:disabled { opacity: 0.5; cursor: not-allowed; } /* Warning chips (variables, multi-message, sync error) */ .ws-source-warn { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 12px; background: #FBEDD9; border: 1px solid #E1B47A; border-radius: 8px; font: 400 11.5px/1.5 var(--sans); color: var(--t2); } .ws-source-warn.err { background: #FBEDED; border-color: #E5B4B4; color: #A4282A; } .ws-source-warn svg { width: 13px; height: 13px; color: #A6601C; flex-shrink: 0; margin-top: 2px; } .ws-source-warn.err svg { color: #A4282A; } .ws-source-warn span { flex: 1; } .ws-var-tag { display: inline-block; margin: 0 2px; padding: 0 5px; background: #fff; border: 1px solid #E1B47A; border-radius: 4px; font: 600 10.5px var(--mono); color: #A6601C; letter-spacing: 0.02em; } /* ─── Tier picker (Behavior section's headline component) ───────────── */ .ws-tier-explainer { margin: 0 0 14px; font: 400 12.5px/1.5 var(--sans); color: var(--t3); } .ws-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 999px) { .ws-tier-grid { grid-template-columns: 1fr; } } .ws-tier-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: border-color .12s, box-shadow .12s, background .12s; } .ws-tier-card:hover { border-color: var(--beige-b); box-shadow: 0 1px 3px rgba(20, 20, 30, 0.04); } .ws-tier-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-tier-card.sel { background: #FBFAFE; box-shadow: 0 0 0 1px currentColor; } .ws-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ws-tier-tag { font: 600 9.5px var(--mono); letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; } .ws-tier-cost { font: 600 12px var(--mono); color: var(--t3); letter-spacing: 0.06em; } .ws-tier-card h4 { font: 600 14px var(--sans); color: var(--t); margin: 0; line-height: 1.2; } .ws-tier-card p { font: 400 11.5px/1.5 var(--sans); color: var(--t2); margin: 0; flex: 1; } .ws-tier-meta { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid var(--beige-rule); } .ws-tier-meta span { display: flex; flex-direction: column; gap: 1px; } .ws-tier-meta small { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-tier-meta b { font: 600 11.5px var(--mono); color: var(--t); } .ws-tier-eg { font: italic 400 10.5px/1.4 var(--sans); color: var(--t3); padding-top: 6px; border-top: 1px dashed var(--beige-rule); } .ws-tier-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--beige-rule); font: 400 12px var(--sans); color: var(--t3); } .ws-tier-foot b { font-weight: 600; color: var(--t); } .ws-link { color: var(--brand); text-decoration: none; font-weight: 500; } .ws-link:hover { text-decoration: underline; } /* ─── Placeholder section ───────────────────────────────────────────── */ .ws-placeholder-section .formCard { background: var(--beige-pg); border-style: dashed; } .ws-placeholder-body { color: var(--t3); font-style: italic; margin-bottom: 16px; } .ws-placeholder-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--beige-b); } .ws-placeholder-meta > div { display: flex; gap: 12px; align-items: baseline; } .ws-placeholder-lbl { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; width: 70px; flex-shrink: 0; } .ws-placeholder-val { font: 500 12px var(--sans); color: var(--t2); flex: 1; } /* Test / Deploy / Code / Conversation tab placeholders */ .ws-placeholder-tab { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; background: var(--beige-pg); color: var(--t3); } .ws-placeholder-tab h2 { font: 500 22px var(--sans); color: var(--t); margin-bottom: 8px; } .ws-placeholder-tab p { font: 400 13px/1.6 var(--sans); color: var(--t3); max-width: 480px; } /* ─── Loading skeleton ──────────────────────────────────────────────── */ .ws-skeleton { pointer-events: none; } .ws-skel-row { height: 11px; background: linear-gradient( 90deg, var(--beige-rule) 0%, var(--beige-pg) 50%, var(--beige-rule) 100% ); background-size: 200% 100%; border-radius: 4px; animation: ws-skel-shimmer 1.4s ease-in-out infinite; margin: 6px 0; } .ws-skel-card { height: 240px; background: linear-gradient( 90deg, var(--beige-rule) 0%, var(--beige-pg) 50%, var(--beige-rule) 100% ); background-size: 200% 100%; border-radius: 12px; animation: ws-skel-shimmer 1.4s ease-in-out infinite; margin: 8px; } @keyframes ws-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === Phase 2b: capabilities, channels, guardrails, sub-agents === */ /* ============================================================ Phase 2b workspace sections — attach lists, channels, guardrails, memory, advanced. Loaded after workspace.css. Keeps Phase 2b styles isolated for easy rollback / lazy-load in v1.1. Token usage: same palette as workspace.css. New utilities here are namespaced .ws-attach-*, .ws-chan-*, .ws-gr-*, .ws-mem-*, .ws-adv-*, .ws-env-*, .ws-policy-*, .ws-toggle-*. ============================================================ */ /* ─── Section grid (two-column for Tools section) ───────────────────── */ .ws-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1199px) { .ws-section-grid { grid-template-columns: 1fr; } } /* ─── Attachable list (Tools / Skills / KBs) ───────────────────────── */ .ws-attach-col { background: #fff; border: 1px solid var(--beige-rule); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; } /* When AttachableList is nested inside a formCard (e.g. Sub-agents section) the outer card already provides the box chrome. Strip the inner card's border/background/padding so the list flows flat inside the parent card instead of creating a visible box-within-a-box. */ .formCard .ws-attach-col { border: none; border-radius: 0; background: transparent; padding: 0; margin-top: 8px; /* visual gap between sub-tab strip and list content */ } /* Demote the list's own sub-heading inside formCard so it reads as a secondary label rather than competing with the section's own h3. */ .formCard .ws-attach-head { font: 500 10.5px var(--mono); color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } .ws-attach-head { font: 600 13px var(--sans); color: var(--t); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; } .ws-attach-icon { width: 16px; height: 16px; color: var(--t2); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .ws-attach-icon svg { width: 14px; height: 14px; } .ws-attach-count { font: 600 10px var(--mono); padding: 2px 7px; background: var(--beige); border-radius: 6px; color: var(--t3); margin-left: auto; letter-spacing: 0.04em; } .ws-attach-desc { font: 400 11.5px/1.5 var(--sans); color: var(--t3); margin-bottom: 12px; } .ws-attach-search { display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; margin-bottom: 9px; transition: border-color .12s, background .12s; } .ws-attach-search:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-attach-search svg { width: 13px; height: 13px; color: var(--t4); flex-shrink: 0; } .ws-attach-search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 11.5px var(--sans); color: var(--t); } .ws-attach-search input::placeholder { color: var(--t4); } /* CR-474: gap increased 6px→8px and padding added on all sides so the focus-visible box-shadow (3px spread) and the sel border never bleed into adjacent rows or get clipped at the scroll container edges. */ .ws-attach-list { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; padding: 3px 4px 3px 2px; } .ws-attach-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 9px 10px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color .12s, background .12s, box-shadow .12s; } .ws-attach-item:hover { border-color: var(--beige-b); } .ws-attach-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } /* CR-474: removed box-shadow:0 0 0 1px var(--brand) — an outer box-shadow extends 1px outside the layout box in every direction (shadows don't take up space), bleeding into adjacent rows with only 6-8px gap and making selected rows appear to merge/overlap visually. The 1px border-color change to var(--brand) is sufficient to show selection clearly. */ .ws-attach-item.sel { border-color: var(--brand); background: #FAF7FF; } .ws-attach-itemic { width: 32px; height: 32px; border-radius: 8px; background: var(--beige-pg); display: flex; align-items: center; justify-content: center; color: var(--t2); flex-shrink: 0; } .ws-attach-itemic svg { width: 15px; height: 15px; } /* Kind-specific tints — match the chip palette from agents-art.css */ .ws-attach-itemic.tool { background: #E9F0FB; color: #1F58B5; } .ws-attach-itemic.kb { background: #EDF6EE; color: #2E7039; } .ws-attach-itemic.mcp { background: #F4ECFB; color: #6B36B5; } .ws-attach-itemic.skill { background: #FFEFE9; color: #C34F28; } .ws-attach-itemic.agent { background: #FFEFE9; color: #C34F28; font: 600 11px var(--sans); letter-spacing: 0.02em; border-radius: 50%; /* circle avatar, not rounded-rect */ line-height: 1; /* prevent extra line-height pushing text off-center */ } .ws-attach-itembody { min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .ws-attach-itembody b { font: 600 12.5px var(--sans); color: var(--t); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Name text node sits inside a flex container so text-overflow won't fire without an explicit overflow block on the text span itself. */ .ws-attach-itembody b .ws-agent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .ws-attach-itemmeta { font: 400 10.5px/1.4 var(--mono); color: var(--t3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-attach-itemmeta em { font: italic 400 10.5px var(--sans); color: var(--t3); } /* Toggle pill on the right of each row */ .ws-attach-toggle { width: 28px; height: 16px; border-radius: 8px; background: var(--beige-b); position: relative; flex-shrink: 0; transition: background .18s; } .ws-attach-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); transition: left .18s; } /* CR-487: With align-items:center on the 3-column grid, the 16px toggle gets centered at ~25px from the button top — between the name line (~18px) and the meta line (~35px). Scoping align-self:start to this context (not ws-var-binding / ws-data-source-row / ws-toggle-row) places the toggle top flush with the grid track start so its vertical center (9px padding + 8px half-height = 17px) aligns with the name line center (~18px). Icon and body keep their centered alignment unchanged. */ .ws-attach-item .ws-attach-toggle { align-self: start; } .ws-attach-item.sel .ws-attach-toggle, .ws-attach-toggle.sel, .ws-toggle-row.on .ws-attach-toggle { background: var(--brand); } .ws-attach-item.sel .ws-attach-toggle::after, .ws-attach-toggle.sel::after, .ws-toggle-row.on .ws-attach-toggle::after { left: 14px; } .ws-attach-empty { padding: 24px 16px; text-align: center; color: var(--t3); font: 400 12px var(--sans); background: var(--beige-pg); border: 1px dashed var(--beige-b); border-radius: 8px; } .ws-attach-err { padding: 9px 12px; background: #FBEDED; border: 1px solid #E5B4B4; border-radius: 8px; font: 500 11.5px var(--sans); color: #A4282A; margin-bottom: 8px; } .ws-attach-skel .ws-attach-itemic { background: var(--beige-rule); animation: ws-skel-shimmer 1.4s ease-in-out infinite; } .ws-attach-action { margin-top: 12px; padding: 8px 14px; width: 100%; border: 1px dashed var(--beige-b); background: var(--beige-pg); border-radius: 8px; font: 500 12px var(--sans); color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all .12s; } .ws-attach-action:hover { border-color: var(--brand); background: var(--brandL); color: var(--brand); } .ws-attach-action svg { width: 13px; height: 13px; } .ws-attach-foot { margin-top: 10px; padding: 9px 12px; background: var(--beige-pg); border-radius: 8px; font: 400 11px/1.5 var(--sans); color: var(--t3); } /* Per-tool badges */ .ws-policy-badge { font: 600 9px var(--mono); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-policy-auto { background: #EDF6EE; color: #2E7039; } .ws-policy-manual { background: #FBEDD9; color: #A6601C; } .ws-policy-deny { background: #FBEDED; color: #A4282A; } .ws-mcp-status { font: 600 9px var(--mono); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-mcp-status.ok { background: #EDF6EE; color: #2E7039; } .ws-mcp-status.warn { background: #FBEDD9; color: #A6601C; } .ws-mcp-status.err { background: #FBEDED; color: #A4282A; } .ws-skill-ver { font: 600 9.5px var(--mono); color: var(--t4); letter-spacing: 0.02em; } .ws-skill-builtin { font: 600 9px var(--mono); padding: 1px 5px; background: var(--brandL); color: var(--brand); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Memory section ─────────────────────────────────────────────────── */ .ws-mem-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 4px; } @media (max-width: 999px) { .ws-mem-row { grid-template-columns: 1fr; } } .ws-mem-card { padding: 13px 14px; border: 1.5px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; display: flex; flex-direction: column; gap: 4px; } .ws-mem-card:hover { border-color: var(--beige-b); background: #fff; } .ws-mem-card.sel { background: var(--brandL); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-mem-card b { font: 600 13px var(--sans); color: var(--t); } .ws-mem-card span { font: 400 11px/1.4 var(--sans); color: var(--t2); } .ws-mem-card em { font: italic 400 10.5px var(--sans); color: var(--t3); margin-top: 4px; } /* Toggle row — single-line settings inside formCards */ .ws-toggle-row { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; margin-top: 12px; transition: all .12s; } .ws-toggle-row:hover { border-color: var(--beige-b); background: #fff; } .ws-toggle-row.on { border-color: var(--brand); background: #FAF7FF; } .ws-toggle-row-body { flex: 1; display: flex; flex-direction: column; } .ws-toggle-row-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-toggle-row-body span { font: 400 11px/1.4 var(--sans); color: var(--t3); margin-top: 2px; } /* ─── Channels section ─────────────────────────────────────────────── */ .ws-chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 1099px) { .ws-chan-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .ws-chan-grid { grid-template-columns: 1fr; } } .ws-chan-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 13px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; display: flex; flex-direction: column; gap: 6px; transition: all .12s; } .ws-chan-card:hover { border-color: var(--beige-b); } .ws-chan-card.on { background: #FAF7FF; box-shadow: 0 0 0 1px currentColor; } .ws-chan-card.ws-chan-disabled { opacity: 0.55; cursor: not-allowed; } .ws-chan-head { display: flex; align-items: center; justify-content: space-between; } .ws-chan-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .ws-chan-logo svg { width: 18px; height: 18px; } .ws-chan-card h4 { font: 600 13px var(--sans); color: var(--t); margin: 4px 0 0; } .ws-chan-card p { font: 400 11.5px/1.45 var(--sans); color: var(--t2); flex: 1; margin: 0; } .ws-chan-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 7px; border-top: 1px solid var(--beige-rule); font: 500 10.5px var(--mono); color: var(--t3); } .ws-chan-soon { background: var(--beige); color: var(--t3); padding: 1px 6px; border-radius: 4px; font: 600 9px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Guardrails section ──────────────────────────────────────────── */ .ws-gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 999px) { .ws-gr-grid { grid-template-columns: 1fr; } } .ws-gr-card { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 12px; padding: 13px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; display: flex; flex-direction: column; gap: 7px; transition: all .12s; } .ws-gr-card:hover { border-color: var(--beige-b); } .ws-gr-card.sel { background: #FBFAFE; box-shadow: 0 0 0 1px currentColor; } .ws-gr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ws-gr-card-tag { font: 600 9.5px var(--mono); padding: 2px 7px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .ws-gr-card-rules { font: 600 10.5px var(--mono); color: var(--t3); letter-spacing: 0.02em; } .ws-gr-card h4 { font: 600 14px var(--sans); color: var(--t); margin: 0; } .ws-gr-card p { font: 400 11.5px/1.5 var(--sans); color: var(--t2); margin: 0; flex: 1; } .ws-gr-card-rec { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--beige-rule); } .ws-gr-card-rec small { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-gr-card-rec span { font: 500 10.5px var(--mono); color: var(--t2); } .ws-gr-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--beige-rule); font: 400 12px var(--sans); color: var(--t3); } .ws-gr-foot b { font-weight: 600; color: var(--t); } /* Per-rule overrides */ .ws-gr-override { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-bottom: 1px solid var(--beige-rule); } .ws-gr-override:last-child { border-bottom: 0; } .ws-gr-override-body { flex: 1; display: flex; flex-direction: column; } .ws-gr-override-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-gr-override-body span { font: 400 11px/1.4 var(--sans); color: var(--t3); margin-top: 2px; } .ws-gr-override-pick { display: flex; gap: 1px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 6px; padding: 2px; flex-shrink: 0; } .ws-gr-override-btn { background: transparent; border: 0; padding: 4px 9px; border-radius: 4px; font: 500 11px var(--sans); color: var(--t3); cursor: pointer; transition: all .12s; } .ws-gr-override-btn:hover { color: var(--t); } .ws-gr-override-btn.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, .06); } /* ─── Advanced section ────────────────────────────────────────────── */ .ws-adv-nat-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ws-adv-nat-choice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; } .ws-adv-nat-choice:hover { border-color: var(--beige-b); background: var(--beige-pg); } .ws-adv-nat-choice.sel { border-color: var(--brand); background: #FAF7FF; box-shadow: 0 0 0 1px var(--brand); } .ws-adv-nat-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--beige-b); background: #fff; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; } .ws-adv-nat-choice.sel .ws-adv-nat-radio { border-color: var(--brand); } .ws-adv-nat-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .ws-adv-nat-body { flex: 1; display: flex; flex-direction: column; } .ws-adv-nat-body b { font: 600 12.5px var(--sans); color: var(--t); } .ws-adv-nat-body span { font: 400 11.5px/1.45 var(--sans); color: var(--t3); margin-top: 2px; } .ws-inline-code { font: 500 11.5px var(--mono); background: var(--beige-pg); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--beige-rule); color: var(--t); } /* Env var editor */ .ws-env-list { display: flex; flex-direction: column; gap: 6px; } .ws-env-empty { padding: 20px 16px; text-align: center; color: var(--t3); font: 400 12px var(--sans); background: var(--beige-pg); border: 1px dashed var(--beige-b); border-radius: 8px; } .ws-env-row { display: grid; grid-template-columns: 1fr 1.5fr 32px; gap: 8px; align-items: center; } .ws-env-row input { padding: 7px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); font: 500 12px var(--mono); color: var(--t); } .ws-env-row input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-env-remove { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 6px; color: var(--t3); cursor: pointer; font-size: 18px; line-height: 1; transition: all .12s; } .ws-env-remove:hover { background: #FBEDED; color: #A4282A; } /* Raw config preview */ .ws-raw-config { margin-top: 10px; padding: 12px 14px; background: var(--t); color: #FAFAF7; border-radius: 8px; font: 400 11px/1.6 var(--mono); overflow-x: auto; max-height: 360px; overflow-y: auto; } /* ─── Sub-agents section ────────────────────────────────────────────── */ /* Tab strip inside the section card (Internal vs External) */ .ws-sub-tabs { display: flex; gap: 2px; background: var(--beige-pg); padding: 3px; border: 1px solid var(--beige-rule); border-radius: 8px; margin: 12px 0 14px; width: max-content; } .ws-sub-tab { background: transparent; border: 0; padding: 6px 14px; border-radius: 6px; font: 500 12px var(--sans); color: var(--t3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .12s; } .ws-sub-tab:hover { color: var(--t2); } .ws-sub-tab.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06); } .ws-sub-count { font: 600 9.5px var(--mono); background: var(--brand); color: #fff; padding: 1px 6px; border-radius: 8px; min-width: 16px; text-align: center; } .ws-sub-tab:not(.on) .ws-sub-count { background: var(--t4); } /* A2A picker — input form for adding external agents */ .ws-a2a-picker { display: flex; flex-direction: column; gap: 14px; } .ws-a2a-add { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 14px 16px; } .ws-a2a-add label { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .ws-a2a-add-lbl { font: 600 12px var(--sans); color: var(--t); } .ws-a2a-add-sub { font: 400 11.5px/1.55 var(--sans); color: var(--t3); } .ws-a2a-add-row { display: flex; gap: 8px; } .ws-a2a-add-row input { flex: 1; padding: 8px 11px; border: 1px solid var(--beige-b); border-radius: 6px; background: #fff; font: 500 12px var(--mono); color: var(--t); } .ws-a2a-add-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-a2a-add-row .btn.primary { background: var(--brand); color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; font: 600 12px var(--sans); cursor: pointer; white-space: nowrap; } .ws-a2a-add-row .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; } /* Card preview shown after validating a URL */ .ws-a2a-preview { background: var(--brandL); border: 1px solid #DDD0FF; border-radius: 8px; padding: 14px 16px; } .ws-a2a-preview-head { display: flex; align-items: center; gap: 12px; } .ws-a2a-preview-ic { width: 40px; height: 40px; border-radius: 8px; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ws-a2a-preview-ic svg { width: 20px; height: 20px; } .ws-a2a-preview-head > div:not(.ws-a2a-preview-ic) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ws-a2a-preview-head b { font: 600 13px var(--sans); color: var(--t); } .ws-a2a-preview-head span { font: 400 11px var(--mono); color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ws-a2a-preview-head .btn.primary { background: var(--brand); color: #fff; border: 0; padding: 7px 14px; border-radius: 6px; font: 600 12px var(--sans); cursor: pointer; flex-shrink: 0; } .ws-a2a-preview-desc { font: 400 12px/1.5 var(--sans); color: var(--t2); margin-top: 10px; } .ws-a2a-preview-skills { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #DDD0FF; } .ws-a2a-preview-skills small { font: 600 9.5px var(--mono); color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 5px; } .ws-a2a-preview-skills > div { display: flex; flex-wrap: wrap; gap: 4px; } .ws-a2a-skill { font: 500 11px var(--mono); padding: 2px 8px; background: #fff; border: 1px solid #DDD0FF; color: var(--brand); border-radius: 4px; } /* List of attached external A2A agents */ .ws-a2a-list-head { margin-bottom: 8px; } .ws-a2a-list-head small { font: 600 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; } .ws-a2a-row { display: grid; grid-template-columns: 32px 1fr 32px; gap: 11px; align-items: center; padding: 9px 10px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; margin-bottom: 6px; } /* A2A badge on agent rows (both internal and external) */ .ws-a2a-badge { font: 600 9px var(--mono); padding: 1px 6px; background: rgba(24, 95, 165, 0.12); color: #185FA5; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } /* === Phase 2c: status dots, publish modal === */ /* ============================================================ Phase 2c — polish layer - Section status dots in left nav - Completion progress bar in topbar - Publish modal (validation gate) - Variable-binding card (Behavior → Channels) ============================================================ */ /* ─── Section status dots in left nav ───────────────────────────────── */ .ws-leftnav-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; line-height: 1; color: var(--t4); font: 400 14px var(--sans); display: inline-flex; align-items: center; justify-content: center; } /* Inherit the dot color from the parent class */ .ws-leftnav-status.ws-status-required { /* Original required-but-untouched indicator — keep the legacy "•" character so familiarity carries across versions. */ background: transparent; color: var(--t4); width: auto; height: auto; } .ws-leftnav-item.on .ws-leftnav-status.ws-status-required { color: var(--brand); } .ws-leftnav-status.ws-status-complete { background: #2E7039; } .ws-leftnav-status.ws-status-warnings { background: #C8941F; } .ws-leftnav-status.ws-status-missing { background: #A4282A; /* Subtle pulse so users notice missing required fields */ animation: ws-status-pulse 1.6s ease-in-out infinite; } @keyframes ws-status-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(164, 40, 42, 0.45); } 50% { box-shadow: 0 0 0 4px rgba(164, 40, 42, 0); } } /* ─── Completion progress bar (topbar) ──────────────────────────────── */ .ws-completion { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 6px; font: 500 11px var(--mono); color: var(--t3); } .ws-completion-bar { width: 80px; height: 5px; background: var(--beige-rule); border-radius: 9999px; overflow: hidden; flex-shrink: 0; } .ws-completion-fill { display: block; height: 100%; transition: width .25s ease; } .ws-completion-fill.ok { background: #2E7039; } .ws-completion-fill.warn { background: #C8941F; } .ws-completion-fill.err { background: #A4282A; } .ws-completion-lbl { font-weight: 600; color: var(--t2); letter-spacing: 0.04em; flex-shrink: 0; min-width: 32px; text-align: right; } /* ─── Publish modal ─────────────────────────────────────────────────── */ .ws-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .ws-modal { width: 720px; max-width: 100%; max-height: 85vh; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(20, 20, 30, 0.04); display: flex; flex-direction: column; overflow: hidden; outline: none; } .ws-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid var(--beige-rule); } .ws-modal-head-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ws-modal-head-ic svg { width: 18px; height: 18px; } .ws-modal-head h2 { font: 500 18px/1.3 var(--sans); color: var(--t); letter-spacing: -0.005em; margin: 0 0 2px; } .ws-modal-head p { font: 400 12.5px/1.5 var(--sans); color: var(--t3); margin: 0; } .ws-modal-head > div:not(.ws-modal-head-ic) { flex: 1; min-width: 0; } .ws-modal-close { background: transparent; border: 0; padding: 4px 10px; color: var(--t3); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; flex-shrink: 0; } .ws-modal-close:hover { background: var(--beige-pg); color: var(--t); } /* Body */ .ws-modal-body { flex: 1; overflow-y: auto; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; } .ws-modal-card { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 14px 16px; } .ws-modal-card.ws-modal-card-err { background: #FBEDED; border-color: #E5B4B4; } .ws-modal-card.ws-modal-card-warn { background: #FBEDD9; border-color: #E1B47A; } .ws-modal-card h3 { font: 600 12.5px var(--sans); color: var(--t); margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .ws-modal-card h3 svg { width: 14px; height: 14px; } .ws-modal-card.ws-modal-card-err h3 { color: #A4282A; } .ws-modal-card.ws-modal-card-warn h3 { color: #A6601C; } .ws-modal-card h3 small { font: 400 11px var(--sans); color: var(--t3); font-weight: 400; margin-left: auto; } /* Section status grid inside modal */ .ws-modal-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .ws-modal-section-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; transition: all .12s; } .ws-modal-section-row:hover { background: #fff; border-color: var(--beige-rule); } .ws-modal-section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--t4); } .ws-modal-section-row.ws-status-complete .ws-modal-section-dot { background: #2E7039; } .ws-modal-section-row.ws-status-warnings .ws-modal-section-dot { background: #C8941F; } .ws-modal-section-row.ws-status-missing .ws-modal-section-dot { background: #A4282A; } .ws-modal-section-row.ws-status-untouched .ws-modal-section-dot { background: var(--t4); opacity: 0.4; } .ws-modal-section-lbl { flex: 1; font: 500 12.5px var(--sans); color: var(--t); display: flex; align-items: center; gap: 6px; } .ws-modal-section-req { font: 600 9px var(--mono); color: var(--t3); background: var(--beige); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-modal-section-status { font: 500 11px var(--mono); color: var(--t3); flex-shrink: 0; } .ws-modal-section-row.ws-status-complete .ws-modal-section-status { color: #2E7039; } .ws-modal-section-row.ws-status-warnings .ws-modal-section-status { color: #C8941F; } .ws-modal-section-row.ws-status-missing .ws-modal-section-status { color: #A4282A; font-weight: 700; } /* Issue list (blockers + warnings) */ .ws-modal-issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ws-modal-issue { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 9px 11px; background: #fff; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; align-items: center; } .ws-modal-card-err .ws-modal-issue { border-color: #E5B4B4; } .ws-modal-card-warn .ws-modal-issue { border-color: #E1B47A; } .ws-modal-issue:hover { background: var(--beige-pg); } .ws-modal-issue-lbl { font: 600 11.5px var(--sans); color: var(--t); flex-shrink: 0; } .ws-modal-issue-msg { font: 400 11.5px/1.4 var(--sans); color: var(--t2); } .ws-modal-issue-link { font: 500 11px var(--sans); color: var(--brand); flex-shrink: 0; } /* Publish summary dl */ .ws-modal-summary { margin: 0; display: flex; flex-direction: column; gap: 7px; } .ws-modal-summary > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; } .ws-modal-summary dt { font: 500 11.5px var(--mono); color: var(--t3); letter-spacing: 0.02em; } .ws-modal-summary dd { font: 500 12px var(--sans); color: var(--t); margin: 0; } .ws-modal-summary dd b { font-weight: 600; } /* Footer */ .ws-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--beige-rule); background: var(--beige-pg); } .ws-modal-foot .btn { background: var(--beige); color: var(--t); border: 0; padding: 8px 16px; border-radius: 6px; font: 500 12.5px var(--sans); cursor: pointer; transition: background .12s; } .ws-modal-foot .btn:hover { background: var(--sh, var(--beige-rule)); } .ws-modal-foot .btn.primary { background: var(--brand); color: #fff; font-weight: 600; } .ws-modal-foot .btn.primary:hover { background: #4825D6; } .ws-modal-foot .btn.primary:disabled { background: var(--beige-b); color: var(--t3); cursor: not-allowed; } /* ─── Variable-binding card (Behavior → Channels) ──────────────────── */ .ws-var-binding-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } @media (max-width: 999px) { .ws-var-binding-grid { grid-template-columns: 1fr; } } .ws-var-binding { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: all .12s; } .ws-var-binding:hover { border-color: var(--beige-b); } .ws-var-binding.on { border-color: var(--brand); background: #FAF7FF; box-shadow: 0 0 0 1px var(--brand); } .ws-var-binding code { font: 600 12px var(--mono); color: var(--t); background: transparent; padding: 0; } .ws-var-binding.on code { color: var(--brand); } .ws-var-binding.on .ws-attach-toggle { background: var(--brand); } .ws-var-binding.on .ws-attach-toggle::after { left: 14px; } /* === Phase 3: type-specific topology editors === */ /* ============================================================ Phase 3 — type-specific topology editors Canvas wrappers (workflow + team) lean on @xyflow/react's own CSS plus the legacy `.cnv*` classes already in the codebase. This file adds the workspace-specific chrome around them and the form sections (data sources, sandbox, research config). ============================================================ */ /* ─── Canvas section frame ─────────────────────────────────────────── */ .ws-section-canvas { /* Canvas needs more vertical room than form sections — bump to full main-pane height minus the header. Unset the 740px cap from .ws-section so the canvas fills the full ws-main width. */ flex: 1; min-height: 0; max-width: none !important; width: 100% !important; margin: 0 !important; gap: 0 !important; } .ws-canvas-card { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; } .ws-canvas-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--beige-rule); } .ws-canvas-head h3 { margin-bottom: 5px; } .ws-canvas-head p { margin: 0; } .ws-canvas-host { flex: 1; min-height: 480px; display: flex; background: var(--beige-pg); /* The xyflow canvas is opinionated about being its own scroll container — let it own this region. */ position: relative; overflow: hidden; } /* ─── Data sources section ─────────────────────────────────────────── */ .ws-data-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ws-data-source { border: 1px solid var(--beige-rule); border-radius: 8px; background: #fff; overflow: hidden; transition: border-color .12s, box-shadow .12s; } .ws-data-source.sel { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-data-source-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; } .ws-data-source-row:hover { background: var(--beige-pg); } .ws-data-source.sel .ws-data-source-row { background: #FAF7FF; } .ws-data-source.sel .ws-attach-toggle { background: var(--brand); } .ws-data-source.sel .ws-attach-toggle::after { left: 14px; } .ws-data-source-detail { border-top: 1px solid var(--beige-rule); padding: 0 12px 12px; background: var(--beige-pg); } .ws-data-expand { margin-top: 10px; padding: 5px 9px; font: 500 11px var(--mono); color: var(--brand); background: transparent; border: 1px solid var(--beige-rule); border-radius: 6px; cursor: pointer; transition: all .12s; } .ws-data-expand:hover { background: var(--brandL); border-color: var(--brand); } .ws-data-schemas { margin-top: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--beige-rule); border-radius: 8px; } .ws-data-schemas-help { font: 400 11.5px/1.5 var(--sans); color: var(--t3); margin-bottom: 9px; } .ws-data-schema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; } .ws-data-schema-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--beige-rule); border-radius: 6px; background: var(--beige-pg); cursor: pointer; text-align: left; transition: all .12s; } .ws-data-schema-chip:hover { border-color: var(--beige-b); } .ws-data-schema-chip.on { border-color: var(--brand); background: var(--brandL); color: var(--brand); } .ws-data-schema-chip code { font: 600 11.5px var(--mono); color: inherit; } .ws-data-schema-chip span { font: 500 9.5px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .ws-data-policy { display: flex; flex-direction: column; gap: 14px; } /* ─── Sandbox section ──────────────────────────────────────────────── */ .ws-sandbox-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } @media (max-width: 999px) { .ws-sandbox-images { grid-template-columns: 1fr; } } .ws-sandbox-image { background: #fff; border: 1.5px solid var(--beige-rule); border-radius: 8px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: all .12s; position: relative; } .ws-sandbox-image:hover { border-color: var(--beige-b); } .ws-sandbox-image.sel { background: #FAF7FF; box-shadow: 0 0 0 1px currentColor; } .ws-sandbox-image code { font: 600 11.5px var(--mono); color: var(--t); margin-bottom: 4px; } .ws-sandbox-image b { font: 600 13px var(--sans); color: var(--t); } .ws-sandbox-image span { font: 400 11.5px/1.4 var(--sans); color: var(--t3); } .ws-sandbox-rec { position: absolute; top: 10px; right: 12px; font: 600 9px var(--mono); color: var(--brand); background: var(--brandL); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; } .ws-sandbox-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; } @media (max-width: 999px) { .ws-sandbox-resources { grid-template-columns: 1fr; } } .ws-sandbox-net { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; } /* Package editor */ .ws-pkg-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .ws-pkg-input { display: flex; gap: 8px; } .ws-pkg-input input { flex: 1; padding: 7px 10px; border: 1px solid var(--beige-b); border-radius: 6px; background: var(--beige-pg); font: 500 12px var(--mono); color: var(--t); } .ws-pkg-input input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-pkg-input .btn { background: var(--beige); color: var(--t); border: 0; padding: 7px 14px; border-radius: 6px; font: 500 12px var(--sans); cursor: pointer; flex-shrink: 0; } .ws-pkg-input .btn:hover { background: var(--beige-b); } .ws-pkg-input .btn:disabled { opacity: 0.5; cursor: not-allowed; } .ws-pkg-list { display: flex; flex-wrap: wrap; gap: 6px; } .ws-pkg-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: var(--brandL); color: var(--brand); border: 1px solid #DDD0FF; border-radius: 6px; font: 500 11px var(--mono); cursor: pointer; transition: all .12s; } .ws-pkg-tag:hover { background: #FBEDED; color: #A4282A; border-color: #E5B4B4; } .ws-pkg-tag span { font-size: 14px; line-height: 1; opacity: 0.7; } .ws-pkg-tag:hover span { opacity: 1; } /* ─── Research config section ──────────────────────────────────────── */ .ws-rsc-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .ws-rsc-locked { opacity: 0.7; cursor: default; } .ws-rsc-locked-tag { font: 600 9px var(--mono); color: var(--t3); background: var(--beige); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; margin-left: 6px; } .ws-rsc-depth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } @media (max-width: 999px) { .ws-rsc-depth { grid-template-columns: 1fr; } } .ws-rsc-depth-card { padding: 13px 14px; border: 1.5px solid var(--beige-rule); border-radius: 8px; background: var(--beige-pg); cursor: pointer; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 4px; transition: all .12s; } .ws-rsc-depth-card:hover { border-color: var(--beige-b); background: #fff; } .ws-rsc-depth-card.sel { background: var(--brandL); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .ws-rsc-depth-card b { font: 600 13px var(--sans); color: var(--t); } .ws-rsc-depth-card span { font: 400 11px/1.4 var(--sans); color: var(--t2); } .ws-rsc-depth-card em { font: italic 400 10.5px var(--sans); color: var(--t3); margin-top: 4px; } .ws-rsc-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } @media (max-width: 999px) { .ws-rsc-limits { grid-template-columns: 1fr; } } /* === Phase 4: Code view (file tree + Monaco) + Conversation view === */ /* ============================================================ Phase 4 — Code view + Conversation view Both are full-pane alternate views to the Visual section editor. They take over the body region (.ws-body) when activeView is 'code' or 'conversation'. ============================================================ */ /* ─── Body wrappers ─────────────────────────────────────────────────── */ .ws-body-code, .ws-body-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--beige-pg); } /* ─── Code view (Monaco YAML editor) ────────────────────────────────── */ .ws-code-view { display: flex; flex-direction: row; flex: 1; min-height: 0; background: #fff; } /* Editor pane (right side, takes remaining width) */ .ws-code-editor-pane { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; } /* ─── File tree sidebar ────────────────────────────────────────────── */ .ws-code-tree { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--beige-pg); border-right: 1px solid var(--beige-rule); overflow: hidden; } .ws-code-tree-head { display: flex; align-items: center; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; background: var(--beige); } .ws-code-tree-title { flex: 1; font: 600 11px var(--mono); color: var(--t3); letter-spacing: 0.06em; text-transform: uppercase; } .ws-code-tree-new { width: 22px; height: 22px; border: 1px solid var(--beige-b); border-radius: 4px; background: #fff; color: var(--t2); cursor: pointer; font: 600 14px/1 var(--sans); display: flex; align-items: center; justify-content: center; transition: all .12s; } .ws-code-tree-new:hover { color: var(--brand); border-color: var(--brand); background: var(--brandL); } .ws-code-tree-body { flex: 1; overflow-y: auto; padding: 4px 0; } /* Tree rows (folders + files) */ .ws-code-tree-row { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; font: 500 12px var(--sans); color: var(--t2); transition: background .08s; user-select: none; position: relative; } .ws-code-tree-row:hover { background: var(--beige); color: var(--t); } .ws-code-tree-file.on { background: var(--brandL); color: var(--brand); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); } .ws-code-tree-file.on:hover { background: var(--brandL); } /* Chevron (folder open/closed indicator) */ .ws-code-tree-chev { width: 10px; height: 10px; flex-shrink: 0; color: var(--t4); transition: transform .12s; } /* Folder + file icons */ .ws-code-tree-folder-ic { width: 13px; height: 13px; flex-shrink: 0; color: #A6601C; } .ws-code-tree-file-ic { width: 13px; height: 13px; flex-shrink: 0; } /* Label */ .ws-code-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Inline tags + status */ .ws-code-tree-tag { font: 600 8.5px var(--mono); color: var(--brand); background: var(--brandL); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; } .ws-code-tree-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } /* Hover-only +/× action button on each row */ .ws-code-tree-rowact { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--t4); cursor: pointer; font: 700 13px/1 var(--sans); flex-shrink: 0; opacity: 0; transition: all .12s; } .ws-code-tree-row:hover .ws-code-tree-rowact { opacity: 1; } .ws-code-tree-rowact:hover { background: var(--beige-b); color: var(--t); } /* Delete button gets a red hover */ .ws-code-tree-file .ws-code-tree-rowact:hover { background: #FBEDED; color: #A4282A; } /* Inline new-file input */ .ws-code-tree-new-file { display: flex; align-items: center; gap: 6px; padding: 4px 8px; } .ws-code-tree-new-file input { flex: 1; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 4px; background: #fff; font: 500 11.5px var(--mono); color: var(--t); outline: none; min-width: 0; } .ws-code-tree-new-file input:focus { box-shadow: 0 0 0 2px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } /* Toolbar above the editor */ .ws-code-toolbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: var(--beige-pg); border-bottom: 1px solid var(--beige-rule); height: 44px; flex-shrink: 0; } .ws-code-toolbar-info { display: flex; align-items: center; gap: 10px; } .ws-code-toolbar-spacer { flex: 1; } .ws-code-filename { font: 600 12px var(--mono); color: var(--t); padding: 3px 8px; background: var(--beige); border-radius: 4px; letter-spacing: 0.02em; } .ws-code-status { font: 600 9px var(--mono); padding: 1px 6px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .ws-code-status-clean { background: #EDF6EE; color: #2E7039; } .ws-code-status-dirty { background: #FBEDD9; color: #A6601C; } .ws-code-status-err { background: #FBEDED; color: #A4282A; } /* Toolbar buttons */ .ws-code-btn { background: #fff; border: 1px solid var(--beige-b); padding: 5px 14px; border-radius: 6px; font: 500 12px var(--sans); color: var(--t); cursor: pointer; transition: all .12s; } .ws-code-btn:hover:not(:disabled) { background: var(--beige-pg); border-color: var(--t4); } .ws-code-btn:disabled { opacity: 0.45; cursor: not-allowed; } .ws-code-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .ws-code-btn-primary:hover:not(:disabled) { background: #4825D6; border-color: #4825D6; } .ws-code-btn-primary:disabled { background: var(--beige-b); color: var(--t3); border-color: var(--beige-b); } .ws-code-btn-danger { background: #A4282A; border-color: #A4282A; } .ws-code-btn-danger:hover:not(:disabled) { background: #841F22; border-color: #841F22; } /* Banners (errors / warnings / info) */ .ws-code-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--beige-rule); font: 400 12px/1.5 var(--sans); flex-shrink: 0; } .ws-code-banner svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; } .ws-code-banner-info { background: #EAF2F8; color: #185FA5; border-color: #C7D9EE; } .ws-code-banner-warn { background: #FBEDD9; color: #A6601C; border-color: #E1B47A; } .ws-code-banner-err { background: #FBEDED; color: #A4282A; border-color: #E5B4B4; } .ws-code-banner b { font-weight: 600; display: block; margin-bottom: 4px; } .ws-code-banner ul { margin: 0; padding-left: 18px; font-size: 11.5px; line-height: 1.55; } .ws-code-banner li { margin-bottom: 2px; } /* Editor host (Monaco fills this) */ .ws-code-editor-host { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* ─── Conversation view ─────────────────────────────────────────────── */ .ws-conv-view { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; max-width: 880px; width: 100%; margin: 0 auto; border-left: 1px solid var(--beige-rule); border-right: 1px solid var(--beige-rule); } /* Message list */ .ws-conv-messages { flex: 1; overflow-y: auto; padding: 24px 28px 12px; display: flex; flex-direction: column; gap: 18px; } /* Message rows */ .ws-conv-msg { display: flex; gap: 12px; align-items: flex-start; } .ws-conv-avatar { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 600 10px var(--mono); letter-spacing: 0.04em; } .ws-conv-avatar-user { background: var(--beige); color: var(--t2); } .ws-conv-avatar-assistant { background: var(--brand); color: #fff; } .ws-conv-bubble-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ws-conv-bubble { background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 8px; padding: 12px 14px; font: 400 13.5px/1.55 var(--sans); color: var(--t); } .ws-conv-msg-user .ws-conv-bubble { background: var(--brandL); border-color: #DDD0FF; } .ws-conv-bubble p { margin: 0 0 8px; } .ws-conv-bubble p:last-child { margin-bottom: 0; } /* Loading bubble (3 dots) */ .ws-conv-bubble-loading { display: inline-flex; align-items: center; gap: 4px; padding: 16px 18px; } .ws-conv-loading-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); animation: ws-conv-pulse 1.2s ease-in-out infinite; } .ws-conv-loading-dot:nth-child(2) { animation-delay: 0.2s; } .ws-conv-loading-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes ws-conv-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* Patches card */ .ws-conv-patches { background: #FAF7FF; border: 1px solid #DDD0FF; border-radius: 8px; padding: 11px 13px; } .ws-conv-patches-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--brand); font: 600 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .ws-conv-patches-head svg { width: 13px; height: 13px; } .ws-conv-patches-summary { font: 400 12px/1.5 var(--sans); color: var(--t2); margin: 0 0 8px; } .ws-conv-patches ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ws-conv-patches li { display: flex; align-items: baseline; gap: 8px; font: 400 11.5px var(--sans); } .ws-conv-patches li code { font: 600 11px var(--mono); color: var(--brand); background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid #DDD0FF; flex-shrink: 0; } .ws-conv-patches li span { color: var(--t3); } /* Error banner */ .ws-conv-error { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FBEDED; border: 1px solid #E5B4B4; border-radius: 8px; color: #A4282A; font: 500 12px var(--sans); } .ws-conv-error svg { width: 16px; height: 16px; flex-shrink: 0; } /* Composer (input + send button) */ .ws-conv-composer { border-top: 1px solid var(--beige-rule); padding: 14px 28px 18px; background: #fff; flex-shrink: 0; } .ws-conv-composer textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--beige-b); border-radius: 8px; background: var(--beige-pg); font: 400 13.5px/1.5 var(--sans); color: var(--t); resize: none; transition: border-color .12s, background .12s; } .ws-conv-composer textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .ws-conv-composer textarea::placeholder { color: var(--t4); } .ws-conv-composer textarea:disabled { opacity: 0.6; cursor: not-allowed; } .ws-conv-composer-foot { display: flex; align-items: center; margin-top: 8px; gap: 12px; } .ws-conv-composer-hint { flex: 1; font: 400 11px var(--sans); color: var(--t4); } /* Fix 4: Collapse draft panel when canvas is active */ .ws-side-collapsed { width: 48px !important; min-width: 48px !important; overflow: hidden; transition: width 0.2s ease; } .ws-side-collapsed > * { opacity: 0; pointer-events: none; } .ws-side-collapsed:hover { width: 320px !important; overflow: visible; } .ws-side-collapsed:hover > * { opacity: 1; pointer-events: auto; } /* FIX 5: Neutral progress bar on test tab */ .ws-topbar[data-tab="test"] .ws-progress-fill { background: var(--t4, #98958E) !important; } /* ── 4. workspace-test-layout — Test tab layout fixes ────────── */ /* ============================================================ workspace-test-layout.css FIX: The Test tab body uses class `.ws-test-body` (from TestTabBody.jsx) but `workspace-5.css` only styles `.ws-body-test` (a class higher up the chain). Result: the inner panel wrap collapses to block layout and the 520px-wide TestChatPanel floats with empty space around it instead of sitting in a designed surface. This file: 1. Gives `.ws-test-body` a proper column flex layout 2. Turns `.ws-test-panelwrap` into a centered card stage 3. Lets TestChatPanel breathe to the natural chat-UI width and drops its right-dock borderLeft (we're floating it, not docking) 4. Adds an empty-state-friendly background IMPORT IN main.jsx AFTER workspace-shell.css: import "./styles/workspace-shell.css"; import "./styles/workspace-test-layout.css"; <- ADD THIS ============================================================ */ /* Root of the Test tab body — column flex so the header strip, optional disclaimer, and the panel wrap stack correctly and the wrap gets flex space. */ .ws-test-body { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--beige-pg, #F4EFE6); } /* The chat stage. Fills remaining height, centers a max-width column. The 880px max keeps the chat readable on big monitors while letting it expand on smaller ones. The 24px padding gives the floating card breathing room from the surrounding chrome. */ .ws-test-panelwrap { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; padding: 24px; overflow: hidden; } /* TestChatPanel's outermost element. The component sets its own inline width (default 520px) and a borderLeft for its legacy right-dock context. We override here: - Strip borderLeft (we want card edges on both sides, not a dock edge) - Add a full card border + rounding + subtle shadow so it reads as a designed surface instead of a floating widget - Cap width sensibly. The component's MAX_W is 700 by default; we let CSS go a bit wider to feel intentional, capped at 920 so line lengths stay comfortable - !important on borderLeft because TestChatPanel writes it inline. */ .ws-test-panelwrap > * { border-left: 1px solid var(--bd, #E5E1D6) !important; border-right: 1px solid var(--bd, #E5E1D6); border-top: 1px solid var(--bd, #E5E1D6); border-bottom: 1px solid var(--bd, #E5E1D6); border-radius: 12px; box-shadow: 0 1px 2px rgba(20, 14, 6, 0.04), 0 8px 24px rgba(20, 14, 6, 0.06); overflow: hidden; /* Honor the component's inline width but cap it. The component uses width:520px by default; let it grow comfortably while keeping chat line lengths readable. */ max-width: 920px; width: 100% !important; } /* The drag handle on TestChatPanel's left edge is meaningless now that we're not docking; hide it. The user resizes the panel by the window or just lives with the responsive width. */ .ws-test-panelwrap > * > div[style*="col-resize"] { display: none; } /* Header strip polish — pin it to the top of the body and give it a card-aligned background so the visual hierarchy reads as "context bar → chat surface" instead of two floating regions. */ .ws-test-body > .ws-test-headerstrip { background: #FFFFFF; border-bottom: 1px solid var(--beige-rule, #E8E2D4); flex-shrink: 0; } .ws-test-body > .ws-test-disclaimer { flex-shrink: 0; } /* ── 5. workspace-deploy-merged — Deploy surface preview ────── */ /* ============================================================ workspace-deploy-merged.css Adds styling for the new inline `.ws-deploy-surfpreview` element in DeployTabBody v2 (Surfaces + Preview merged into one section). The original styles for .ws-deploy-surfrow used a fixed 2-column grid (checkbox | label + desc). The new layout adds a third row that only appears when the surface is checked, showing the URL/code preview inline. IMPORT IN main.jsx AFTER workspace-shell.css: import "./styles/workspace-test-layout.css"; import "./styles/workspace-deploy-merged.css"; <- ADD THIS ============================================================ */ /* Allow the surface row to span content vertically and reflow when the preview line appears. The original grid had fixed rows; we relax it to auto so the preview line fits naturally. */ .ws-deploy-surfrow { grid-template-rows: auto auto !important; row-gap: 4px; } /* The inline preview line. Mono font, muted color, lives in the second grid row spanning the label and description columns so it lines up under the surface name (not under the checkbox). */ .ws-deploy-surfpreview { grid-column: 2 / -1; grid-row: 2; font: 400 12px/1.5 var(--mono, "JetBrains Mono", monospace); color: var(--t4, #6F6657); background: var(--beige-pg, #F4EFE6); border: 1px solid var(--beige-rule, #E8E2D4); border-radius: 6px; padding: 6px 10px; margin-top: 6px; word-break: break-all; user-select: all; } /* When the row is checked, give the preview line a subtle tint matching the row's "on" state so it reads as part of the same selection. */ .ws-deploy-surfrow.on .ws-deploy-surfpreview { background: color-mix(in srgb, var(--brand) 4%, transparent); border-color: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--t3, #4A4233); } /* ── 6. workspace-canvas-fullbleed — canvas full-bleed layout ── */ /* * workspace-canvas-fullbleed.css * * Promotes the Workflow canvas (and any other canvas-driven section, * Team canvas / Data sources) to a full-bleed editor surface that * fills the available viewport instead of the cramped 350px card * that ships today. * * Filed as: workspace UX fix, May 11 review. * * What this fixes (visible to the user): * 1. Canvas height was fixed at ~350px in any viewport. * Now fills available height from below the workspace topbar * to the bottom of the viewport. * 2. ADD STEP palette was a 280px static card stealing canvas * width. Now overlays the canvas in the top-left corner. * 3. Inspector (selected-node properties) rendered OUTSIDE the * canvas card in its own column. Now docks INSIDE the canvas * viewport on the right edge as a 280px floating panel. * 4. Stats row (STEPS / AVG TIME / EST. COST) rendered BELOW the * canvas, eating more vertical space. Now overlays the canvas * in the bottom-left corner. * 5. Duplicate "Workflow canvas" title (page heading + card * heading). Removed the page-level heading, kept the toolbar. * 6. Section description "Drag steps from the palette..." was 3 * lines of prose permanently displayed. Hidden; should surface * as a first-time onboarding tooltip in a later patch. * * This file is CSS-only and additive. It uses high specificity and * !important where needed to override the inline / shipped styles. * No JSX changes required for issues 1, 2, 4, 5, 6. Issue 3 (the * inspector relocation) works through `position: fixed`, which is * functional but a structural JSX fix is cleaner. The companion * WorkflowCanvasSection.jsx in this bundle gives the cleaner shape; * apply if you want the proper containment. * * Apply by adding to main.jsx after workspace-shell.css: * * import "./styles/workspace-canvas-fullbleed.css"; * * Targets the Workflow canvas section primarily, and applies the * same overlays to Team canvas (Phase 3) since it shares the same * .ws-canvas-card / .ws-canvas-host / .cnv-* class scaffold. */ /* ─── 1. Section container becomes a vertical flex column ─────────── */ /* * The workspace main pane is .ws-main with overflow:auto and standard * padding. For canvas sections we want it to behave as a flex column * that fills available height, no scroll. The section component lives * inside it as a flex child. * * The wrapper class on each section in the shipped code is one of: * .ws-workspace-section[data-section="workflow_canvas"] * .ws-section-workflow-canvas * .ws-workflow-canvas-section * depending on which build is deployed. We cover all three. */ .ws-main:has(.ws-canvas-card), .ws-main:has([class*="canvas-section"]) { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0 !important; overflow: hidden !important; background: #fff; } .ws-workspace-section[data-section="workflow_canvas"], .ws-workspace-section[data-section="team_canvas"], .ws-section-workflow-canvas, .ws-section-team-canvas, .ws-workflow-canvas-section, .ws-team-canvas-section { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 !important; max-width: none !important; width: 100% !important; gap: 0 !important; } /* ─── 2. Hide the duplicate section title and description ─────────── */ /* * The page-level .ws-main-head ("Workflow canvas" / subtitle) is * redundant with the canvas card's own toolbar title. Drop it for * canvas sections; canvas users orient themselves from the toolbar. */ .ws-main:has(.ws-canvas-card) > .ws-main-head, .ws-main:has([class*="canvas-section"]) > .ws-main-head, .ws-workspace-section[data-section="workflow_canvas"] > .ws-main-head, .ws-workspace-section[data-section="team_canvas"] > .ws-main-head { display: none !important; } /* * Section description ("Drag steps from the palette...") is a 3-line * paragraph above the canvas. Useful as onboarding once, distracting * forever. Hide it; future patch should add a first-time tooltip. */ .ws-canvas-card .ws-canvas-head p { display: none !important; } /* ─── 3. Canvas card fills available space, no rounded corners ─── */ /* * Drop the card chrome (border-radius, outer borders) so the canvas * reads as a workspace pane rather than a widget. Keep the toolbar * border to separate it from the canvas area visually. */ .ws-canvas-card { flex: 1 !important; min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--beige-rule, #F2EFE9) !important; display: flex !important; flex-direction: column !important; background: #fff !important; } /* ─── 4. Compact canvas toolbar ────────────────────────────────── */ /* * The shipped layout has 4 stacked boxes at the top: file-name chip, * Auto-arrange, View as code, "saves with draft". Consolidate into * a single horizontal toolbar: name on the left, action chips on * the right. */ .ws-canvas-card .ws-canvas-head { padding: 10px 16px !important; border-bottom: 1px solid var(--beige-rule, #F2EFE9) !important; background: var(--beige-pg, #FCFBF8) !important; display: flex !important; align-items: center !important; gap: 10px !important; min-height: 44px !important; flex-wrap: nowrap !important; } .ws-canvas-card .ws-canvas-head h3 { font: 600 13px var(--sans, "DM Sans", system-ui, sans-serif) !important; margin: 0 !important; flex-shrink: 0 !important; } .ws-canvas-card .ws-canvas-head h3 small { font: 400 11px var(--mono, "JetBrains Mono", ui-monospace, monospace) !important; color: var(--t3, #76726B) !important; margin-left: 8px !important; font-weight: 400 !important; } /* * The "untitled-workflow draft·unsaved", "Auto-arrange", "View as code", * "saves with draft" chips appear as siblings in the toolbar. Align * them to the right edge. */ .ws-canvas-card .ws-canvas-head > *:not(h3):not(p) { margin-left: auto !important; } .ws-canvas-card .ws-canvas-head > *:not(h3):not(p) ~ *:not(h3):not(p) { margin-left: 4px !important; } /* ─── 5. Canvas host fills the card ────────────────────────────── */ .ws-canvas-host, .ws-canvas-card > .ws-canvas-host, .ws-canvas-card .react-flow, .ws-canvas-card .xyflow { flex: 1 !important; min-height: 0 !important; height: auto !important; max-height: none !important; position: relative !important; overflow: hidden !important; } /* ─── 6. Palette overlays the canvas, top-left, collapsible ────── */ /* * Shipped .cnv-palette renders inline and steals 280px of width. * Force it to position:absolute as an overlay anchored to the canvas * top-left. Width capped at 168px so it never hogs more than ~10% of * canvas on a 1080p screen. */ .cnv-palette, .ws-canvas-host .cnv-palette, .workflow-canvas-palette { position: absolute !important; left: 12px !important; top: 12px !important; width: 160px !important; max-height: calc(100% - 76px) !important; overflow-y: auto !important; background: #fff !important; border: 1px solid var(--beige-b, #EAE3D4) !important; border-radius: 8px !important; padding: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; z-index: 10 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } .cnv-palette .cnv-palette-lbl, .workflow-canvas-palette > h4, .workflow-canvas-palette > .palette-label { font: 600 9px var(--mono, "JetBrains Mono", monospace) !important; color: var(--t4, #A09B91) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 2px 6px !important; } /* ─── 7. Inspector docks inside the canvas viewport, right edge ── */ /* * Shipped code renders the inspector as a sibling of .ws-canvas-card, * NOT inside it, which is why it steals horizontal space from the * canvas. CSS alone can't move DOM nodes, but `position: fixed` * relative to the viewport gets us most of the way. The companion * JSX patch in this bundle restructures it to live inside the canvas * host as `position: absolute`, which is cleaner. * * Selectors cover the various names the inspector might have: * .cnv-inspector (Phase 3 mockup naming) * .ws-canvas-inspector (deployed name guess) * .workflow-inspector (alt deployed name) * .node-inspector */ .cnv-inspector, .ws-canvas-inspector, .workflow-inspector, .node-inspector { position: fixed !important; right: 24px !important; top: 175px !important; bottom: 24px !important; width: 300px !important; max-height: calc(100vh - 200px) !important; background: #fff !important; border: 1px solid var(--beige-b, #EAE3D4) !important; border-radius: 8px !important; padding: 14px 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; z-index: 15 !important; overflow-y: auto !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; } .cnv-inspector h4, .ws-canvas-inspector h4, .workflow-inspector h4, .node-inspector h4 { font: 600 12px var(--sans, "DM Sans", system-ui, sans-serif) !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 0 4px 0 !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--beige-rule, #F2EFE9) !important; } /* ─── 8. Stats overlay in the bottom-left of the canvas ────────── */ /* * Shipped renders STEPS / AVG TIME / EST. COST as a separate row of * cards BELOW the canvas. Re-position as a compact pill in the * bottom-left of the canvas. */ .ws-canvas-stats, .ws-canvas-summary, .workflow-canvas-stats { position: fixed !important; left: 260px !important; bottom: 16px !important; display: inline-flex !important; align-items: center !important; gap: 14px !important; padding: 6px 12px !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px) !important; border: 1px solid var(--beige-b, #EAE3D4) !important; border-radius: 6px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important; z-index: 10 !important; font: 500 11px var(--mono, "JetBrains Mono", monospace) !important; color: var(--t2, #3D3B38) !important; grid-template-columns: none !important; width: auto !important; margin: 0 !important; } .ws-canvas-stats > *, .ws-canvas-summary > *, .workflow-canvas-stats > * { border: 0 !important; padding: 0 !important; background: transparent !important; display: inline-flex !important; flex-direction: column !important; gap: 1px !important; } .ws-canvas-stats > * > :first-child, .ws-canvas-summary > * > :first-child, .workflow-canvas-stats > * > :first-child { font: 600 8.5px var(--mono, "JetBrains Mono", monospace) !important; color: var(--t4, #A09B91) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } /* ─── 9. Zoom controls anchor to bottom-right of canvas ────────── */ .cnv-controls, .ws-canvas-controls, .workflow-canvas-controls { position: absolute !important; right: 12px !important; bottom: 12px !important; z-index: 10 !important; background: #fff !important; border: 1px solid var(--beige-b, #EAE3D4) !important; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important; display: flex !important; flex-direction: column !important; } /* * If the inspector is docked (i.e. visible at fixed:right:24px), nudge * the zoom controls inward so they don't sit under it. */ .ws-canvas-host:has(~ .cnv-inspector) .cnv-controls, .ws-canvas-host:has(~ .ws-canvas-inspector) .cnv-controls, .ws-canvas-host:has(~ .workflow-inspector) .cnv-controls { right: 340px !important; } /* ─── 10. Section nav: collapse hint while in canvas mode ──────── */ /* * The 220px left section nav competes with the canvas for horizontal * space. We don't auto-collapse it (preserves user agency) but we add * a hover hint and a keyboard shortcut affordance. * * For now, just make sure it's not visually overpowering when the * canvas is open. Lighter background, no shadow on the active item. */ .ws-main:has(.ws-canvas-card) ~ aside.ws-leftnav, .ws-leftnav:has(~ .ws-main .ws-canvas-card) { background: var(--beige-pg, #FCFBF8) !important; } /* ─── 11. xyflow / React Flow inner host fills its container ───── */ /* * React Flow's wrapper needs explicit height to render. Force it to * fill its parent. */ .ws-canvas-host > .react-flow, .ws-canvas-host > [class*="reactflow"], .ws-canvas-host > .xyflow, .ws-canvas-host > div:not(.cnv-palette):not(.cnv-inspector):not(.cnv-controls):not(.ws-canvas-stats) { width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } /* ─── 12. Optional: auto-arrange / view-as-code chips ──────────── */ /* * Make the action chips in the toolbar compact pills that match the * rest of the workspace chip style. */ .ws-canvas-card .ws-canvas-head [class*="auto-arrange"], .ws-canvas-card .ws-canvas-head [class*="view-as-code"], .ws-canvas-card .ws-canvas-head [class*="saves-with"] { font: 500 11px var(--sans, "DM Sans", system-ui, sans-serif) !important; padding: 4px 8px !important; border-radius: 6px !important; background: transparent !important; border: 1px solid var(--beige-rule, #F2EFE9) !important; color: var(--t2, #3D3B38) !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } /* ─── 13. Responsive: collapse inspector below 1280px viewports ─── */ /* * On narrower screens the docked inspector eats too much canvas. * Below 1280px, the inspector becomes a slide-up panel from the * bottom edge instead of a side dock. */ @media (max-width: 1280px) { .cnv-inspector, .ws-canvas-inspector, .workflow-inspector, .node-inspector, .team-canvas-inspector { position: fixed !important; left: 240px !important; right: 24px !important; top: auto !important; bottom: 24px !important; width: auto !important; max-height: 50vh !important; } .ws-canvas-host:has(~ .cnv-inspector) .cnv-controls, .ws-canvas-host:has(~ .ws-canvas-inspector) .cnv-controls, .ws-canvas-host:has(~ .workflow-inspector) .cnv-controls { right: 12px !important; bottom: calc(50vh + 36px) !important; } } /* ═══ TEAM CANVAS SPECIFIC ═══════════════════════════════════════════ * * The Team canvas uses different node types (Coordinator, Specialist, * Synthesis) instead of the Workflow nodes (LLM, Tool, KB, Branch, * Loop, Approval). Visual treatment differs to reinforce the pattern * distinction: hub-and-spoke for Team, DAG for Workflow. * * These styles pair with TeamCanvasSection.jsx in this bundle. They * use class names from the new JSX so they won't accidentally style * Workflow canvas content. */ /* ─── Team canvas section container ──────────────────────────────── */ .ws-canvas-section-fullbleed { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; margin: 0; padding: 0; width: 100%; } /* ─── Toolbar (used by both Workflow and Team canvas) ────────────── */ .ws-canvas-section-fullbleed .ws-canvas-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--beige-rule, #F2EFE9); background: var(--beige-pg, #FCFBF8); min-height: 44px; flex-shrink: 0; } .ws-canvas-section-fullbleed .ws-canvas-toolbar-title { display: inline-flex; align-items: center; gap: 10px; } .ws-canvas-section-fullbleed .ws-canvas-name { font: 600 13px var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t, #171716); } .ws-canvas-section-fullbleed .ws-canvas-status-pill { font: 500 11px var(--mono, "JetBrains Mono", ui-monospace, monospace); color: var(--t3, #76726B); padding: 2px 8px; background: #fff; border: 1px solid var(--beige-rule, #F2EFE9); border-radius: 4px; } .ws-canvas-section-fullbleed .ws-canvas-toolbar-spacer { flex: 1; } .ws-canvas-section-fullbleed .ws-canvas-toolbar-btn { font: 500 11.5px var(--sans, "DM Sans", system-ui, sans-serif); padding: 5px 12px; border: 1px solid var(--beige-b, #EAE3D4); border-radius: 6px; background: #fff; color: var(--t2, #3D3B38); cursor: pointer; transition: all 0.12s; } .ws-canvas-section-fullbleed .ws-canvas-toolbar-btn:hover:not(:disabled) { background: var(--brandL, #F4EFFF); color: var(--brand, #5C31FF); border-color: var(--brand, #5C31FF); } .ws-canvas-section-fullbleed .ws-canvas-toolbar-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Viewport (canvas host) ─────────────────────────────────────── */ .ws-canvas-section-fullbleed .ws-canvas-viewport { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--beige-pg, #FCFBF8); } /* ─── Team canvas palette ────────────────────────────────────────── */ .team-canvas-palette { position: absolute; left: 12px; top: 12px; width: 168px; background: #fff; border: 1px solid var(--beige-b, #EAE3D4); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); z-index: 10; } .team-canvas-palette .palette-label { font: 600 9px var(--mono, "JetBrains Mono", monospace); color: var(--t4, #A09B91); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; } .team-canvas-palette .palette-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--beige-pg, #FCFBF8); border: 1px solid var(--beige-rule, #F2EFE9); border-radius: 6px; cursor: pointer; text-align: left; transition: all 0.12s; font-family: var(--sans, "DM Sans", system-ui, sans-serif); } .team-canvas-palette .palette-item:hover:not(:disabled) { background: var(--brandL, #F4EFFF); border-color: var(--brand, #5C31FF); } .team-canvas-palette .palette-item:disabled { opacity: 0.4; cursor: not-allowed; } .team-canvas-palette .palette-chip { font: 600 8.5px var(--mono, "JetBrains Mono", monospace); padding: 2px 5px; border-radius: 4px; letter-spacing: 0.06em; flex-shrink: 0; } .team-canvas-palette .palette-chip-coord { background: rgba(24, 95, 165, 0.12); color: #185FA5; } .team-canvas-palette .palette-chip-spec { background: rgba(15, 110, 86, 0.12); color: #0F6E56; } .team-canvas-palette .palette-name { font: 500 11.5px var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t2, #3D3B38); } .team-canvas-palette .palette-divider { height: 1px; background: var(--beige-rule, #F2EFE9); margin: 4px 2px; } .team-canvas-palette .palette-hint { font: 400 10.5px/1.4 var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t3, #76726B); padding: 4px 6px; } /* ─── Team node visuals (xyflow custom nodes) ─────────────────────── */ .team-node { background: #fff; border: 1.5px solid var(--beige-rule, #F2EFE9); border-radius: 8px; padding: 10px 12px; min-width: 168px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); font-family: var(--sans, "DM Sans", system-ui, sans-serif); } .team-node .team-node-chip { font: 600 8.5px var(--mono, "JetBrains Mono", monospace); padding: 1px 5px; border-radius: 4px; letter-spacing: 0.06em; display: inline-block; margin-bottom: 5px; } .team-node .team-node-title { font: 600 12.5px var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t, #171716); margin-bottom: 2px; } .team-node .team-node-sub { font: 400 10.5px var(--mono, "JetBrains Mono", monospace); color: var(--t3, #76726B); margin-top: 1px; } .team-node .team-node-condition { font: 400 10px var(--mono, "JetBrains Mono", monospace); color: var(--brand, #5C31FF); margin-top: 6px; padding: 3px 6px; background: var(--brandL, #F4EFFF); border-radius: 4px; border-left: 2px solid var(--brand, #5C31FF); } .team-node-coordinator { border-left: 3px solid #185FA5; } .team-node-coordinator .team-node-chip { background: rgba(24, 95, 165, 0.12); color: #185FA5; } .team-node-specialist { border-left: 3px solid #0F6E56; } .team-node-specialist .team-node-chip { background: rgba(15, 110, 86, 0.12); color: #0F6E56; } .team-node-specialist.team-node-unbound { border-style: dashed; border-left-style: solid; background: var(--beige-pg, #FCFBF8); } .team-node-specialist.team-node-unbound .team-node-sub { color: #A6601C; font-style: italic; } .team-node-synthesis { border-left: 3px solid #5C31FF; } .team-node-synthesis .team-node-chip { background: color-mix(in srgb, var(--brand) 12%, transparent); color: #5C31FF; } /* ─── Team canvas inspector ──────────────────────────────────────── */ .team-canvas-inspector { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 300px; max-height: calc(100% - 32px); background: #fff; border: 1px solid var(--beige-b, #EAE3D4); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); z-index: 15; overflow-y: auto; display: flex; flex-direction: column; } .team-canvas-inspector .team-inspector-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--beige-rule, #F2EFE9); flex-shrink: 0; } .team-canvas-inspector .team-inspector-head h4 { font: 600 13px var(--sans, "DM Sans", system-ui, sans-serif); margin: 0; flex: 1; } .team-canvas-inspector .team-inspector-chip { font: 600 8.5px var(--mono, "JetBrains Mono", monospace); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.06em; } .team-canvas-inspector .team-inspector-chip-coord { background: rgba(24, 95, 165, 0.12); color: #185FA5; } .team-canvas-inspector .team-inspector-chip-spec { background: rgba(15, 110, 86, 0.12); color: #0F6E56; } .team-canvas-inspector .team-inspector-chip-synth { background: color-mix(in srgb, var(--brand) 12%, transparent); color: #5C31FF; } .team-canvas-inspector .team-inspector-close { background: transparent; border: 0; font-size: 20px; line-height: 1; color: var(--t3, #76726B); cursor: pointer; padding: 2px 8px; border-radius: 4px; } .team-canvas-inspector .team-inspector-close:hover { background: var(--beige-pg, #FCFBF8); color: var(--t, #171716); } .team-canvas-inspector .team-inspector-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; } .team-canvas-inspector .team-inspector-field { display: flex; flex-direction: column; gap: 4px; } .team-canvas-inspector .team-inspector-field > span { font: 600 10px var(--mono, "JetBrains Mono", monospace); color: var(--t3, #76726B); text-transform: uppercase; letter-spacing: 0.06em; } .team-canvas-inspector .team-inspector-field input, .team-canvas-inspector .team-inspector-field select, .team-canvas-inspector .team-inspector-field textarea { padding: 7px 9px; border: 1px solid var(--beige-b, #EAE3D4); border-radius: 6px; background: var(--beige-pg, #FCFBF8); font: 500 12px var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t, #171716); } .team-canvas-inspector .team-inspector-field textarea { font-family: var(--sans, "DM Sans", system-ui, sans-serif); resize: vertical; min-height: 60px; } .team-canvas-inspector .team-inspector-field input:focus, .team-canvas-inspector .team-inspector-field select:focus, .team-canvas-inspector .team-inspector-field textarea:focus { outline: none; border-color: var(--brand, #5C31FF); background: #fff; box-shadow: 0 0 0 3px var(--brandGhost, color-mix(in srgb, var(--brand) 18%, transparent)); } .team-canvas-inspector .team-inspector-hint { font: 400 11px/1.4 var(--sans, "DM Sans", system-ui, sans-serif); color: var(--t3, #76726B); font-style: italic; } .team-canvas-inspector .team-inspector-remove { margin-top: 6px; padding: 7px 12px; border: 1px solid #E5B4B4; border-radius: 6px; background: #fff; color: #A4282A; font: 500 12px var(--sans, "DM Sans", system-ui, sans-serif); cursor: pointer; } .team-canvas-inspector .team-inspector-remove:hover { background: #FBEDED; } /* ─── Team canvas stats overlay ──────────────────────────────────── */ .team-canvas-stats { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 14px; padding: 6px 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border: 1px solid var(--beige-b, #EAE3D4); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); z-index: 10; } .team-canvas-stats > span { display: inline-flex; flex-direction: column; gap: 1px; font: 600 12px var(--mono, "JetBrains Mono", monospace); color: var(--t, #171716); } .team-canvas-stats > span small { font: 600 8.5px var(--mono, "JetBrains Mono", monospace); color: var(--t4, #A09B91); text-transform: uppercase; letter-spacing: 0.06em; } /* ── canvas fixes from pre-dev-anuja-21-05 (merged) ────────────── */ /* Fix 3: Coordinator visual dominance */ .team-node-coordinator { min-width: 240px !important; z-index: 2; } /* Fix 1: Unbound specialist dashed border */ .team-node-specialist.team-node-unbound { border-style: dashed !important; cursor: pointer; } .team-node-specialist.team-node-unbound:hover { border-color: var(--brand, #5C31FF) !important; opacity: 1 !important; } /* Fix 2: Edge label styling for routing conditions */ .react-flow__edge-label { font: 600 9px var(--mono, "JetBrains Mono", monospace) !important; pointer-events: none; } /* FIX 1: Fallback explicit height when flex chain breaks */ .ws-canvas-host:not([style*="height"]) { min-height: max(400px, calc(100vh - 200px)) !important; } /* FIX 2: Inspector floats OVER the canvas, not beside it */ .cnvInsp, .ws-canvas-overlay-inspector, .team-canvas-inspector { position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 300px !important; max-width: 40vw !important; z-index: 10 !important; background: #fff !important; border-left: 1px solid var(--beige-rule, #E8E4DB) !important; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06) !important; overflow-y: auto !important; transition: transform 0.2s ease !important; } /* When no node is selected, hide the inspector */ .cnvInsp:empty, .ws-canvas-overlay-inspector:empty { transform: translateX(100%) !important; } /* The canvas main area gets full width and full height. CR-477: must be a flex COLUMN container so .cnvCanvas (the ReactFlow viewport) can use flex:1 to fill the remaining height after .cnvToolbar. Without display:flex + flex-direction:column, .cnvCanvas is a block element with no height — ReactFlow renders into a 0px container and the canvas area appears blank while the absolute-positioned inspector remains visible (it anchors to .cnvLayout, not .cnvCanvas). */ .cnvMain { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 0 !important; min-height: 0 !important; } /* ReactFlow viewport: fill remaining height in the flex column above */ .cnvCanvas { flex: 1 !important; min-height: 0 !important; position: relative !important; overflow: hidden !important; } /* cnvLayout: remove the old 2-column grid that put inspector beside canvas. Use flex:1 + min-height:0 so the layout fills the flex parent (ws-canvas-host) correctly regardless of whether it has an explicit height or only min-height. */ .cnvLayout { display: flex !important; flex: 1 !important; min-height: 0 !important; position: relative !important; } /* Fix 5: Undo/redo toolbar buttons */ .cnvToolBtn { background: none; border: 1px solid var(--beige-rule, #E8E4DB); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; color: var(--t3); transition: all 0.15s; } .cnvToolBtn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .cnvToolBtn:disabled { cursor: default; } /* ===================== agents-art.css ===================== */ /* ============================================================ My Agents · artboard styles (Studio) Reuses chrome from studio-chrome.css and deployments-art.css. Defines agents-only blocks: agentTbl, persona/template cards, playground (chat), tools panel, knowledge panel, memory, traces (conversation timeline), channels. ============================================================ */ /* ─── Pill states reused (extends from deployments-art.css) ─── */ .pill.draft { background:var(--sh); color:var(--t3); } .pill.draft .dot{ background:var(--t4); } .pill.review { background:var(--warn-bg); color:#A6601C; } .pill.review .dot{ background:#A6601C; } .pill.archived { background:var(--beige); color:var(--t4); opacity:.85; } .pill.archived .dot{ background:var(--t4); } .pill.tool { background:var(--info-bg); color:#1F58B5; } .pill.kb { background:var(--ok-bg); color:#2E7039; } .pill.mcp { background:var(--brandL); color:#6B36B5; } /* ============================================================ AGENTS LIST (Artboard B) — agent rows ============================================================ */ .agTbl { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; overflow:hidden; } .agHdr, .agRow { display:grid; grid-template-columns: 32px 2.1fr 1fr 1.1fr 1.1fr 0.8fr 0.8fr 80px; gap:14px; align-items:center; padding:10px 14px; } .agHdr { background:var(--beige-pg); border-bottom:1px solid var(--beige-rule); font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); } .agRow { border-bottom:1px solid var(--beige-rule); font:400 12.5px var(--sans); color:var(--t2); } .agRow:last-child { border-bottom:0; } .agRow.draftRow { background:var(--beige-card); } .agRow.archivedRow { opacity:.62; } /* .ck wraps the real . The wrapper sizes the cell; the input takes the wrapper's full area so the click target isn't a sub-pixel sliver. Native browser checkbox styling kicks in for the checked state — cheaper than a custom SVG and accessible by default. The header (.agHdr) reuses the same rule. */ .agHdr .ck, .agRow .ck { width:14px; height:14px; display:flex; align-items:center; justify-content:center; } .agHdr .ck input[type="checkbox"], .agRow .ck input[type="checkbox"] { width:14px; height:14px; margin:0; cursor:pointer; accent-color: var(--ink, #1f1b13); } .ag-name { display:flex; align-items:center; gap:11px; min-width:0; } .ag-icon { width:36px; height:36px; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#fff; font:700 13px var(--serif); flex-shrink:0; position:relative; } .ag-icon .vbadge { position:absolute; bottom:-4px; right:-4px; font:700 9px var(--mono); padding:1px 4px; background:var(--s); color:var(--t2); border-radius: 6px; border:1px solid var(--beige-rule); letter-spacing:.04em; } .ag-meta { min-width:0; flex:1; } .ag-meta .nm { font:600 13px var(--sans); color:var(--t); display:flex; align-items:center; gap:7px; line-height:1.2; } .ag-meta .nm .star { color:#D9A04A; } .ag-meta .desc { font:400 11.5px/1.45 var(--sans); color:var(--t3); margin-top:3px; max-width:380px; } .ag-meta .deps { font:400 10.5px var(--mono); color:var(--t4); margin-top:4px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .ag-meta .deps .chip { padding:1px 6px; background:var(--beige); border-radius:4px; color:var(--t3); font:600 10px var(--mono); letter-spacing:.04em; } .ag-meta .deps .chip.tool { background:var(--info-bg); color:#1F58B5; } .ag-meta .deps .chip.kb { background:var(--ok-bg); color:#2E7039; } .ag-meta .deps .chip.mcp { background:var(--brandL); color:#6B36B5; } .ag-status { display:flex; flex-direction:column; gap:4px; } .ag-status .where { font:500 10.5px var(--mono); color:var(--t3); } .ag-model .row1 { font:600 12px var(--sans); color:var(--t); } .ag-model .row2 { font:400 11px var(--mono); color:var(--t3); margin-top:2px; } .ag-traffic { display:flex; flex-direction:column; gap:3px; } .ag-traffic .spark { height:24px; } .ag-traffic .meta { font:500 10.5px var(--mono); color:var(--t3); } .ag-quality { display:flex; flex-direction:column; gap:3px; } .ag-quality .v { font:700 13px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .ag-quality .v.good { color:#107A4D; } .ag-quality .v.warn { color:#A6601C; } .ag-quality .sub { font:500 10.5px var(--mono); color:var(--t3); } .ag-cost b { font:700 13px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .ag-cost .rate { font:500 10.5px var(--mono); color:var(--t3); margin-top:2px; } .ag-actions { display:flex; gap:5px; justify-self:end; } .ag-actions button { width:26px; height:26px; border:1px solid var(--beige-b); background:var(--s); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--t3); } .ag-actions button svg { width:13px; height:13px; } .ag-actions .openBtn { width:auto; padding:0 9px; font:500 11px var(--sans); color:var(--t2); gap:5px; } /* ============================================================ EMPTY STATE — re-uses .emWrap / .emHero / .emPaths from deps css. We add agent-specific tweaks for the templates strip. ============================================================ */ .tplStrip { display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:14px; } .tplCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:13px 14px; display:flex; flex-direction:column; gap:8px; min-height:130px; } .tplCard .head { display:flex; align-items:center; gap:9px; } .tplCard .ic { width:30px; height:30px; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#fff; font:700 13px var(--serif); flex-shrink:0; } .tplCard b { font:600 12.5px var(--sans); color:var(--t); } .tplCard p { font:400 11px/1.45 var(--sans); color:var(--t3); flex:1; } .tplCard .foot { display:flex; justify-content:space-between; align-items:center; font:500 10px var(--mono); color:var(--t4); text-transform:uppercase; letter-spacing:.06em; } .tplCard .foot .pick { color:var(--brand); } /* ============================================================ WIZARD · pick pattern + template (C) ============================================================ */ .patSection { font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin:4px 0 10px; } .patSection:not(:first-child) { margin-top:24px; padding-top:18px; border-top:1px dashed var(--beige-rule); } .patSection b { font-weight:700; color:var(--t); letter-spacing:.04em; } .patGrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .patCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 15px; display:flex; flex-direction:column; gap:7px; cursor:default; position:relative; min-height:158px; } .patCard.sel { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); background:var(--brandL); } .patCard.sel::after { content:"selected"; position:absolute; top:10px; right:11px; padding:1px 7px; border-radius:4px; background:var(--brand); color:#fff; font:600 9.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .patCard .patHd { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .patCard .ic { width:34px; height:34px; border-radius: 8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .patCard .ic svg { width:18px; height:18px; } .patCard .builder { font:600 9.5px var(--mono); letter-spacing:.04em; padding:2px 7px; border-radius:4px; flex-shrink:0; } .patCard h3 { font:600 13.5px var(--sans); color:var(--t); margin-top:3px; } .patCard p { font:400 11.5px/1.5 var(--sans); color:var(--t2); flex:1; } .patCard em { font:500 10.5px var(--mono); color:var(--t3); font-style:normal; } .tplGrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } .tplOpt { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 15px; display:flex; flex-direction:column; gap:9px; cursor:default; position:relative; min-height:170px; } .tplOpt.sel { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); background:var(--brandL); } .tplOpt .top { display:flex; align-items:flex-start; gap:11px; } .tplOpt .ic { width:36px; height:36px; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#fff; font:700 14px var(--serif); flex-shrink:0; } .tplOpt h3 { font:600 13.5px var(--sans); color:var(--t); margin-bottom:2px; } .tplOpt .who { font:500 10.5px var(--mono); color:var(--t3); } .tplOpt p { font:400 11.5px/1.5 var(--sans); color:var(--t2); flex:1; } .tplOpt .specs { display:flex; flex-wrap:wrap; gap:5px; } .tplOpt .specs .chip { padding:1px 7px; border-radius:4px; background:var(--beige); color:var(--t3); font:600 10px var(--mono); letter-spacing:.04em; } .tplOpt .specs .chip.tool { background:var(--info-bg); color:#1F58B5; } .tplOpt .specs .chip.kb { background:var(--ok-bg); color:#2E7039; } .tplOpt .specs .chip.brand { background:var(--brandL); color:var(--brand); } .tplOpt .stars { display:flex; gap:2px; align-items:center; font:500 10.5px var(--mono); color:var(--t3); } .tplOpt .stars .star { color:#D9A04A; } .tplFromScratch { background:repeating-linear-gradient(135deg, transparent 0 6px, var(--beige-pg) 6px 7px), var(--s); border:1px dashed var(--beige-b); } /* ── Pattern picker (Step C) ── */ .patGrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:11px; margin-bottom:18px; } .patCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:8px; cursor:default; position:relative; min-height:158px; } .patCard.sel { border:2px solid var(--brand); padding:15px 15px 13px; background:var(--brandL); } .patCard .ic { width:38px; height:38px; border-radius: 8px; display:flex; align-items:center; justify-content:center; } .patCard .ic svg { width:18px; height:18px; } .patCard h3 { font:600 14px var(--sans); color:var(--t); } .patCard p { font:400 12px/1.5 var(--sans); color:var(--t2); flex:1; } .patCard em { font:italic 400 11px/1.45 var(--sans); color:var(--t3); font-style:italic; } .patSection { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); margin:6px 0 10px; } .tplCat { display:flex; gap:6px; padding:10px 0 14px; } .tplCat .chip { padding:5px 11px; border-radius: 8px; font:500 11.5px var(--sans); color:var(--t3); border:1px solid var(--beige-rule); background:var(--s); } .tplCat .chip.on { background:var(--t); color:#fff; border-color:var(--t); font-weight:600; } /* ============================================================ WIZARD · persona & model (D) ============================================================ */ .formGrid { display:grid; grid-template-columns:1fr; gap:14px; } .formCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:16px 18px; } .formCard h3 { font:600 13px var(--sans); color:var(--t); margin-bottom:12px; display:flex; align-items:center; gap:6px; } .formCard h3 small { font:400 11px var(--sans); color:var(--t3); margin-left:auto; } .fld { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .fld:last-child { margin-bottom:0; } .fld label { font:600 10.5px var(--mono); color:var(--t3); text-transform:uppercase; letter-spacing:.06em; } .fld .desc { font:400 11.5px/1.5 var(--sans); color:var(--t3); margin-top:2px; } .fld input, .fld textarea, .fld select { width:100%; padding:9px 12px; background:var(--s); border:1px solid var(--beige-b); border-radius: 8px; font:400 13px var(--sans); color:var(--t); resize:none; } .fld textarea.prompt { font:500 12.5px/1.55 var(--mono); min-height:138px; padding:12px 14px; } .fld input.mono { font:500 13px var(--mono); } .fld .row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .modelPicker { display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--beige-rule); border-radius:8px; background:var(--beige-pg); } .modelPicker .ic { width:38px; height:38px; border-radius:8px; background:#FFCD00; display:flex; align-items:center; justify-content:center; color:#fff; font:700 13px var(--mono); flex-shrink:0; } .modelPicker .meta { flex:1; min-width:0; } .modelPicker .meta b { font:600 12.5px var(--sans); color:var(--t); display:block; } .modelPicker .meta .x { font:400 11px var(--mono); color:var(--t3); display:block; margin-top:2px; } .modelPicker .swap { font:600 11.5px var(--sans); color:var(--brand); } .tempBar { padding:12px 14px; border:1px solid var(--beige-rule); border-radius:8px; background:var(--s); } .tempBar .lbl { font:600 11px var(--sans); color:var(--t3); display:flex; justify-content:space-between; } .tempBar .lbl b { color:var(--t); font:600 13px var(--mono); } .tempBar .track { height:6px; border-radius: 4px; background:var(--beige); margin-top:9px; position:relative; } .tempBar .fill { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, var(--brand), #9B6BFF); border-radius: 4px; } .tempBar .knob { position:absolute; top:-3px; width:12px; height:12px; border-radius:50%; background:var(--s); border:2px solid var(--brand); transform:translateX(-50%); } .tempBar .ticks { display:flex; justify-content:space-between; margin-top:7px; font:500 9.5px var(--mono); color:var(--t4); text-transform:uppercase; letter-spacing:.05em; } /* ============================================================ WIZARD · tools & knowledge (E) ============================================================ */ .attachGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .attachCol { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; display:flex; flex-direction:column; min-height:0; } .attachCol h3 { font:600 13px var(--sans); color:var(--t); margin-bottom:5px; display:flex; align-items:center; gap:7px; } .attachCol h3 .ct { font:600 10.5px var(--mono); padding:1px 6px; background:var(--beige); border-radius: 6px; color:var(--t3); margin-left:auto; } .attachCol > p { font:400 11.5px var(--sans); color:var(--t3); margin-bottom:12px; } .attachCol .search { display:flex; align-items:center; gap:7px; padding:7px 11px; background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 8px; font:400 11.5px var(--sans); color:var(--t3); margin-bottom:9px; } .attachCol .search svg { width:13px; height:13px; color:var(--t4); } .attachItem { display:grid; grid-template-columns:32px 1fr auto; gap:11px; align-items:center; padding:9px 10px; border:1px solid var(--beige-rule); border-radius:8px; background:var(--s); } .attachItem + .attachItem { margin-top:6px; } .attachItem.sel { border-color:var(--brand); background:var(--brandL); box-shadow:0 0 0 1px var(--brand); } .attachItem .ic { width:32px; height:32px; border-radius: 8px; background:var(--beige-pg); display:flex; align-items:center; justify-content:center; color:var(--t2); flex-shrink:0; } .attachItem .ic.tool { background:var(--info-bg); color:#1F58B5; } .attachItem .ic.kb { background:var(--ok-bg); color:#2E7039; } .attachItem .ic.mcp { background:var(--brandL); color:#6B36B5; } .attachItem .ic.agent { background:var(--err-bg); color:#C34F28; font:600 11px var(--sans); letter-spacing:.02em; } .attachItem .ic svg { width:15px; height:15px; } .attachItem b { font:600 12.5px var(--sans); color:var(--t); display:block; } .attachItem .x { font:400 10.5px var(--mono); color:var(--t3); display:block; margin-top:2px; } .attachItem .toggle { width:28px; height:16px; border-radius: 8px; background:var(--beige-b); position:relative; flex-shrink:0; } .attachItem .toggle::after { content:""; position:absolute; left:2px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--s); box-shadow:0 1px 2px rgba(0,0,0,.18); transition:left .18s; } .attachItem.sel .toggle { background:var(--brand); } .attachItem.sel .toggle::after { left:14px; } /* ============================================================ WIZARD · test & publish (F) — chat preview + publish summary ============================================================ */ .testGrid { display:grid; grid-template-columns: 1fr 360px; gap:14px; align-items:stretch; min-height:0; } .testChat { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; display:flex; flex-direction:column; overflow:hidden; min-height:0; } .testChatHd { padding:10px 14px; border-bottom:1px solid var(--beige-rule); display:flex; align-items:center; gap:9px; background:var(--beige-pg); } .testChatHd .av { width:28px; height:28px; border-radius: 8px; background:var(--brand); color:#fff; font:700 11px var(--serif); display:flex; align-items:center; justify-content:center; } .testChatHd .meta { flex:1; } .testChatHd .meta b { font:600 12.5px var(--sans); color:var(--t); display:block; } .testChatHd .meta span { font:400 11px var(--mono); color:var(--t3); display:block; margin-top:1px; } /* Publish summary side panel reuses .sideHero/.sideStats/.sideRecBox */ /* ============================================================ PLAYGROUND (Artboard H) — rich chat with traces ============================================================ */ .pgGrid { flex:1; display:grid; grid-template-columns: 240px 1fr 320px; gap:0; min-height:0; } .pgGrid > * { min-height:0; } .pgSess { border-right:1px solid var(--beige-rule); padding:12px 12px; background:var(--beige-pg); overflow:auto; display:flex; flex-direction:column; gap:7px; } .pgSess h4 { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); padding:0 4px 4px; } .pgSess .newBtn { display:flex; align-items:center; gap:6px; padding:8px 11px; border:1px dashed var(--beige-b); border-radius: 8px; background:var(--s); font:600 11.5px var(--sans); color:var(--t3); justify-content:center; } .pgSess .newBtn svg { width:12px; height:12px; } .pgSessItem { padding:9px 11px; border-radius: 8px; cursor:default; } .pgSessItem.on { background:var(--s); border:1px solid var(--beige-rule); } .pgSessItem b { font:600 12px var(--sans); color:var(--t); display:block; line-height:1.25; } .pgSessItem .meta { font:400 10.5px var(--mono); color:var(--t3); margin-top:3px; } .pgSessItem .preview { font:400 11px var(--sans); color:var(--t3); margin-top:4px; line-height:1.4; max-height:30px; overflow:hidden; } /* CR-331 — reveal the per-row delete (×) button only on hover so the left rail stays uncluttered; selected row keeps it visible so the user can always delete the open session. */ .pgSessItem:hover .pgSessItemDel, .pgSessItem.on .pgSessItemDel { opacity:1 !important; } .pgChat { display:flex; flex-direction:column; min-height:0; background:var(--s); border-right:1px solid var(--beige-rule); } .pgChatHd { padding:10px 16px; border-bottom:1px solid var(--beige-rule); display:flex; align-items:center; gap:8px; flex-shrink:0; } .pgChatHd b { font:600 12.5px var(--sans); color:var(--t); } .pgChatHd .meta { font:400 11px var(--mono); color:var(--t3); } .pgFlow { flex:1; min-height:0; overflow:auto; padding:14px 18px; display:flex; flex-direction:column; gap:14px; } .msg { display:flex; gap:11px; } .msg .av { width:28px; height:28px; border-radius: 8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font:700 11px var(--mono); color:#fff; } .msg.user .av { background:#3B5566; } .msg.bot .av { background:var(--brand); font-family:var(--serif); font-size:13px; } .msg.bot.tool .av { background:#1F58B5; } .msg .body { flex:1; min-width:0; } .msg .role { font:600 10.5px var(--mono); color:var(--t3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; display:flex; align-items:center; gap:7px; } .msg .role .t { font-weight:400; color:var(--t4); text-transform:none; letter-spacing:0; } .msg .text { font:400 13px/1.55 var(--sans); color:var(--t); } .msg .text code { font:500 11.5px var(--mono); background:var(--beige-card); padding:1px 5px; border-radius: 4px; } /* CR-284 — Playground agent responses are now passed through `marked` so markdown renders as HTML. Style the elements `marked` emits so the conversation reads as formatted text instead of raw symbols. */ .msg .text-md { font:400 13px/1.55 var(--sans); color:var(--t); } .msg .text-md > :first-child { margin-top: 0; } .msg .text-md > :last-child { margin-bottom: 0; } .msg .text-md p { margin: 0 0 8px; } .msg .text-md h1 { font:600 16px/1.3 var(--serif); margin: 10px 0 6px; color: var(--t); } .msg .text-md h2 { font:600 15px/1.3 var(--serif); margin: 10px 0 6px; color: var(--t); } .msg .text-md h3 { font:600 14px/1.3 var(--serif); margin: 9px 0 5px; color: var(--t); } .msg .text-md h4, .msg .text-md h5, .msg .text-md h6 { font:600 13px/1.3 var(--serif); margin: 8px 0 4px; color: var(--t); } .msg .text-md strong, .msg .text-md b { font-weight: 600; color: var(--t); } .msg .text-md em, .msg .text-md i { font-style: italic; } .msg .text-md ul, .msg .text-md ol { margin: 4px 0 8px; padding-left: 20px; } .msg .text-md li { margin: 2px 0; } .msg .text-md li > p { margin: 0; } .msg .text-md a { color: var(--brand, #5C31FF); text-decoration: underline; text-underline-offset: 2px; } .msg .text-md a:hover { text-decoration: none; } .msg .text-md code { font:500 11.5px var(--mono); background:var(--beige-card); padding:1px 5px; border-radius: 4px; } .msg .text-md pre { font:500 11.5px/1.5 var(--mono); background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:6px; padding:8px 11px; margin: 6px 0 8px; overflow-x:auto; } .msg .text-md pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; } .msg .text-md blockquote { margin: 6px 0 8px; padding: 4px 11px; border-left: 3px solid var(--beige-rule); color: var(--t2); } .msg .text-md hr { margin: 10px 0; border: none; border-top: 1px solid var(--beige-rule); } .msg .text-md table { border-collapse: collapse; margin: 6px 0 8px; font-size: 12px; } .msg .text-md th, .msg .text-md td { border: 1px solid var(--beige-rule); padding: 4px 8px; text-align: left; } .msg .text-md th { background: var(--beige-pg); font-weight: 600; } .toolCall { background:var(--info-bg); border:1px solid var(--beige-b); border-radius:8px; padding:9px 12px; font:500 11.5px/1.5 var(--mono); color:#1F58B5; } .toolCall .head { display:flex; align-items:center; gap:7px; margin-bottom:5px; font:600 10px var(--mono); color:#1F58B5; text-transform:uppercase; letter-spacing:.06em; } .toolCall .head svg { width:11px; height:11px; } .toolCall pre { font:500 11px/1.5 var(--mono); color:#1F58B5; white-space:pre-wrap; word-break:break-word; } .kbCite { background:var(--ok-bg); border:1px solid var(--beige-b); border-radius:8px; padding:8px 11px; display:flex; gap:9px; align-items:flex-start; margin-top:6px; } .kbCite svg { width:12px; height:12px; color:#2E7039; flex-shrink:0; margin-top:3px; } .kbCite b { font:600 11.5px var(--sans); color:#1E5028; display:block; } .kbCite span { font:400 11px var(--sans); color:#2E7039; } .pgComp { padding:11px 14px; border-top:1px solid var(--beige-rule); background:var(--beige-pg); flex-shrink:0; } .pgComp .box { display:flex; gap:9px; align-items:center; padding:10px 12px; background:var(--s); border:1px solid var(--beige-b); border-radius:8px; } .pgComp .box span { flex:1; font:400 12.5px var(--sans); color:var(--t3); } .pgComp .box .send { width:28px; height:28px; border-radius:6px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; } .pgComp .box .send svg { width:13px; height:13px; } .pgComp .meta { display:flex; gap:11px; font:500 10.5px var(--mono); color:var(--t3); margin-top:7px; padding:0 2px; } .pgComp .meta b { color:var(--t2); font-weight:600; } .pgInsp { padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:12px; background:var(--beige-pg); } .pgInsp h4 { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); } .pgStat { background:var(--s); border:1px solid var(--beige-rule); border-radius:8px; padding:11px 13px; } .pgStat .row { display:flex; justify-content:space-between; padding:5px 0; font:500 11.5px var(--sans); color:var(--t3); border-bottom:1px solid var(--beige-rule); } .pgStat .row:last-child { border-bottom:0; } .pgStat .row b { color:var(--t); font:600 12px var(--mono); font-variant-numeric:tabular-nums; } .pgTimeline { background:var(--s); border:1px solid var(--beige-rule); border-radius:8px; padding:11px 13px; display:flex; flex-direction:column; gap:6px; } .pgTimeline .step { display:grid; grid-template-columns:14px 1fr auto; gap:8px; align-items:center; font:500 11.5px var(--sans); color:var(--t2); } .pgTimeline .step .d { width:10px; height:10px; border-radius:50%; background:var(--brand); } .pgTimeline .step.tool .d { background:#1F58B5; } .pgTimeline .step.kb .d { background:#2E7039; } .pgTimeline .step b { font:600 12px var(--sans); color:var(--t); } .pgTimeline .step .ms { font:500 10.5px var(--mono); color:var(--t3); } /* ============================================================ TOOLS panel (Artboard I) ============================================================ */ .toolsBody { padding:14px 28px 18px; display:grid; grid-template-columns: 1fr 320px; gap:16px; flex:1; min-height:0; overflow:auto; } .toolList { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; overflow:hidden; } .toolHdr { display:grid; grid-template-columns: 36px 1.7fr 1fr 1fr 0.7fr 60px; gap:12px; align-items:center; padding:9px 14px; background:var(--beige-pg); border-bottom:1px solid var(--beige-rule); font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); } .toolRow { display:grid; grid-template-columns: 36px 1.7fr 1fr 1fr 0.7fr 60px; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--beige-rule); font:400 12.5px var(--sans); color:var(--t2); } .toolRow:last-child { border-bottom:0; } .toolRow .ic { width:32px; height:32px; border-radius: 8px; background:var(--info-bg); color:#1F58B5; display:flex; align-items:center; justify-content:center; } .toolRow .ic.mcp { background:var(--brandL); color:#6B36B5; } .toolRow .ic.builtin { background:var(--beige); color:var(--t2); } .toolRow .ic svg { width:15px; height:15px; } .toolRow .nm { font:600 12.5px var(--sans); color:var(--t); display:flex; align-items:center; gap:6px; } .toolRow .sub { font:400 11px var(--mono); color:var(--t3); margin-top:2px; } .toolRow .source { font:500 11.5px var(--sans); color:var(--t2); } .toolRow .source small { font:400 10.5px var(--mono); color:var(--t4); display:block; margin-top:2px; } .toolRow .calls b { font:700 12.5px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .toolRow .calls span { font:500 10.5px var(--mono); color:var(--t3); margin-left:4px; } .toolRow .succ { font:600 12px var(--mono); color:#107A4D; font-variant-numeric:tabular-nums; } .toolRow .succ.warn { color:#A6601C; } .toolAside { display:flex; flex-direction:column; gap:11px; } .toolDetail { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .toolDetail h4 { font:600 12.5px var(--sans); color:var(--t); display:flex; align-items:center; gap:7px; margin-bottom:10px; } .toolDetail .schema { background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 8px; padding:10px 12px; font:500 11px/1.55 var(--mono); color:var(--t2); white-space:pre-wrap; } .toolDetail .schema .k { color:#6B36B5; } .toolDetail .schema .s { color:#1F58B5; } .toolDetail .row { display:flex; justify-content:space-between; padding:6px 0; font:500 11.5px var(--sans); color:var(--t3); border-bottom:1px solid var(--beige-rule); } .toolDetail .row:last-child { border-bottom:0; } .toolDetail .row b { color:var(--t); font:600 12px var(--mono); } /* ============================================================ KNOWLEDGE panel (Artboard J) ============================================================ */ .kbBody { padding:14px 28px 18px; display:grid; grid-template-columns: 1fr 320px; gap:16px; flex:1; min-height:0; overflow:auto; } .kbList { display:flex; flex-direction:column; gap:10px; } .kbCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; display:grid; grid-template-columns: 42px 1fr auto; gap:13px; align-items:flex-start; } .kbCard .kbIc { width:42px; height:42px; border-radius: 8px; background:var(--ok-bg); color:#2E7039; display:flex; align-items:center; justify-content:center; } .kbCard .kbIc svg { width:19px; height:19px; } .kbCard .meta b { font:600 13.5px var(--sans); color:var(--t); display:flex; align-items:center; gap:7px; } .kbCard .meta .desc { font:400 11.5px/1.5 var(--sans); color:var(--t3); margin-top:4px; max-width:520px; } .kbCard .stats { display:flex; gap:14px; margin-top:9px; font:500 11px var(--mono); color:var(--t3); } .kbCard .stats b { color:var(--t); font:600 12px var(--mono); } .kbCard .right { display:flex; flex-direction:column; align-items:flex-end; gap:7px; } .kbCard .right .syncBar { width:120px; height:4px; border-radius: 4px; background:var(--beige); position:relative; overflow:hidden; } .kbCard .right .syncBar i { position:absolute; left:0; top:0; bottom:0; background:#2E7039; } .kbCard .right .when { font:500 10.5px var(--mono); color:var(--t3); } .kbAside { display:flex; flex-direction:column; gap:11px; } .kbAside .card { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:13px 14px; } .kbAside .card h4 { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); margin-bottom:9px; } /* ============================================================ MEMORY (Artboard K) ============================================================ */ .memBody { padding:14px 28px 18px; display:grid; grid-template-columns: 1fr 320px; gap:16px; flex:1; min-height:0; overflow:auto; } .memCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .memCard h3 { font:600 13px var(--sans); color:var(--t); margin-bottom:5px; display:flex; align-items:center; gap:7px; } .memCard p { font:400 11.5px var(--sans); color:var(--t3); margin-bottom:14px; } .memSegRow { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:9px; margin-bottom:14px; } .memSegRow .item { padding:11px 13px; border:1px solid var(--beige-rule); border-radius:8px; background:var(--beige-pg); cursor:default; } .memSegRow .item.sel { background:var(--brandL); border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); } .memSegRow .item b { font:600 12.5px var(--sans); color:var(--t); display:block; } .memSegRow .item span { font:400 11px var(--sans); color:var(--t3); display:block; margin-top:3px; line-height:1.45; } .memFacts { background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:8px; padding:0; overflow:hidden; } .memFact { display:grid; grid-template-columns: 28px 1fr auto; gap:11px; padding:10px 13px; border-bottom:1px solid var(--beige-rule); align-items:center; } .memFact:last-child { border-bottom:0; } .memFact .ic { width:28px; height:28px; border-radius:6px; background:var(--s); color:var(--t3); display:flex; align-items:center; justify-content:center; border:1px solid var(--beige-rule); } .memFact .ic svg { width:13px; height:13px; } .memFact b { font:600 12.5px var(--sans); color:var(--t); display:block; line-height:1.3; } .memFact span { font:400 10.5px var(--mono); color:var(--t3); display:block; margin-top:2px; } .memFact .x { font:500 10.5px var(--mono); color:var(--t3); } /* ============================================================ TRACES (Artboard L) ============================================================ */ .trcBody { padding:14px 28px 18px; display:grid; grid-template-columns: 1.4fr 1fr; gap:14px; flex:1; min-height:0; overflow:hidden; } .trcList, .trcDetail { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; display:flex; flex-direction:column; overflow:hidden; min-height:0; } .trcListHd { display:grid; grid-template-columns:1fr 80px 60px 80px 60px; gap:12px; padding:10px 14px; background:var(--beige-pg); border-bottom:1px solid var(--beige-rule); font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); } /* Scoped under .trcList on purpose. A bare global `.trcRow` also exists in deployments.css as a 3-column grid (`auto 1fr auto`); whichever sheet loaded last won, so the deployments rule could override this 5-column trace-list grid and the Latency/Cost cells wrapped onto a second line. `.trcList .trcRow` (specificity 0,2,0 > the global 0,1,0) always wins. min-width:0 + ellipsis keep the 1fr conversation column from expanding past its track. */ .trcList .trcRow { display:grid; grid-template-columns:1fr 80px 60px 80px 60px; gap:12px; padding:10px 14px; border-bottom:1px solid var(--beige-rule); font:400 12px var(--sans); color:var(--t2); align-items:center; cursor:default; } .trcList .trcRow:last-child { border-bottom:0; } .trcList .trcRow.on { background:var(--brandL); } .trcList .trcRow.flag { background:var(--err-bg); } .trcList .trcRow .conv { min-width:0; } .trcList .trcRow .conv b { font:600 12px var(--sans); color:var(--t); display:block; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .trcList .trcRow .conv span { font:400 10.5px var(--mono); color:var(--t3); display:block; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .trcList .trcRow .turns, .trcList .trcRow .ms, .trcList .trcRow .cost { font:600 12px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .trcList .trcRow .ok { font:600 11.5px var(--mono); color:#107A4D; } .trcList .trcRow .ok.bad { color:#A23E2E; } .trcList .trcRow .ok.warn { color:#A6601C; } .trcDetailHd { padding:14px 16px; border-bottom:1px solid var(--beige-rule); } .trcDetailHd b { font:600 13px var(--sans); color:var(--t); display:block; } .trcDetailHd .meta { font:400 11px var(--mono); color:var(--t3); margin-top:3px; } .trcDetailHd .pillRow { display:flex; gap:6px; margin-top:9px; } .trcDetailBody { flex:1; min-height:0; overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:11px; } .trcWf { display:flex; flex-direction:column; gap:6px; padding:11px 13px; background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:8px; } .trcWf .span { display:grid; grid-template-columns: 14px 1fr 64px; gap:9px; align-items:center; font:500 11.5px var(--sans); color:var(--t2); } .trcWf .span .d { width:10px; height:10px; border-radius: 4px; background:var(--brand); } .trcWf .span.tool .d { background:#1F58B5; } .trcWf .span.kb .d { background:#2E7039; } .trcWf .span.llm .d { background:var(--brand); } .trcWf .span b { font:600 12px var(--sans); color:var(--t); } .trcWf .span .ms { font:600 11px var(--mono); color:var(--t3); text-align:right; font-variant-numeric:tabular-nums; } /* ============================================================ VERSIONS (Artboard M) ============================================================ */ .verBody { padding:14px 28px 18px; display:flex; flex-direction:column; gap:13px; flex:1; min-height:0; overflow:auto; } .verBanner { background:var(--brandL); border:1px solid var(--brandL); border-radius: 12px; padding:14px 16px; display:flex; align-items:center; gap:14px; } .verBanner .ic { width:36px; height:36px; border-radius:8px; background:var(--brandL); color:var(--brand); display:flex; align-items:center; justify-content:center; } .verBanner .ic svg { width:17px; height:17px; } .verBanner b { font:600 13px var(--sans); color:var(--t); display:block; } .verBanner span { font:400 11.5px var(--sans); color:var(--t3); display:block; margin-top:2px; } .verBanner .acts { display:flex; gap:7px; margin-left:auto; } .verTimeline { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; } .verItem { display:grid; grid-template-columns: 50px 1fr 1.2fr 0.9fr 110px; gap:14px; padding:13px 16px; border-bottom:1px solid var(--beige-rule); align-items:center; } .verItem:last-child { border-bottom:0; } .verItem.champion { background:var(--ok-bg); } .verItem.candidate { background:var(--brandL); } .verItem .vTag { font:700 13px var(--mono); padding:5px 9px; border-radius:6px; background:var(--beige); color:var(--t2); text-align:center; } .verItem.champion .vTag { background:var(--ok-bg); color:#107A4D; } .verItem.candidate .vTag { background:var(--brandL); color:var(--brand); } .verItem .who { font:500 11.5px var(--sans); color:var(--t3); } .verItem .who b { font:600 12.5px var(--sans); color:var(--t); display:block; line-height:1.3; } .verItem .who small { font:400 10.5px var(--mono); color:var(--t4); display:block; margin-top:2px; } .verItem .diff { font:400 11.5px/1.5 var(--sans); color:var(--t2); } .verItem .diff .d { display:inline-block; padding:0 5px; border-radius: 4px; background:var(--beige); font:500 10.5px var(--mono); color:var(--t3); margin-right:4px; } .verItem .diff .d.add { background:var(--ok-bg); color:#107A4D; } .verItem .diff .d.rem { background:var(--err-bg); color:#A23E2E; } .verItem .perf b { font:700 13px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .verItem .perf small { font:500 10.5px var(--mono); color:var(--t3); margin-left:3px; } .verItem .perf .delta { font:500 11px var(--mono); color:#107A4D; display:block; margin-top:2px; } .verItem .perf .delta.dn { color:#A23E2E; } .verItem .acts { display:flex; gap:5px; } /* ============================================================ CHANNELS (Artboard N) ============================================================ */ .chBody { padding:14px 28px 18px; flex:1; overflow:auto; } .chGrid { display:grid; grid-template-columns: repeat(3, 1fr); gap:13px; } .chCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:16px 18px; display:flex; flex-direction:column; gap:11px; min-height:230px; position:relative; } .chCard.live { border-color:var(--beige-b); background:var(--ok-bg); } .chCard .head { display:flex; align-items:flex-start; gap:11px; } .chCard .ic { width:38px; height:38px; border-radius: 8px; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .chCard .ic svg { width:19px; height:19px; } .chCard h3 { font:600 13.5px var(--sans); color:var(--t); margin-bottom:2px; } .chCard .who { font:400 11px var(--mono); color:var(--t3); } .chCard p { font:400 11.5px/1.5 var(--sans); color:var(--t2); flex:1; } .chCard .stats { display:flex; gap:14px; padding-top:11px; border-top:1px solid var(--beige-rule); font:500 10.5px var(--mono); color:var(--t3); } .chCard .stats b { color:var(--t); font:600 11.5px var(--mono); } .chCard .pill { position:absolute; top:14px; right:14px; } .chCard .acts { display:flex; gap:7px; } /* ============================================================ SETTINGS (Artboard O) — re-uses .formCard / .fld from wizard ============================================================ */ .setLayout { padding:14px 28px 18px; display:grid; grid-template-columns: 200px 1fr; gap:18px; flex:1; min-height:0; overflow:auto; } .setNav { display:flex; flex-direction:column; gap:2px; } .setNav .it { padding:8px 12px; border-radius: 8px; font:500 12.5px var(--sans); color:var(--t3); cursor:default; display:flex; align-items:center; gap:9px; } .setNav .it svg { width:13px; height:13px; } .setNav .it.on { background:var(--s); color:var(--t); border:1px solid var(--beige-rule); font-weight:600; } .setMain { display:flex; flex-direction:column; gap:14px; } .dangerCard { border-color:var(--beige-b) !important; background:var(--err-bg) !important; } .dangerCard h3 { color:#A23E2E !important; } /* ============================================================ PAUSE / ARCHIVE confirm — extends modal blocks from deps ============================================================ */ .archImpact { background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 8px; padding:12px 14px; } .archImpact .row { display:grid; grid-template-columns: 30px 1fr; gap:11px; padding:7px 0; align-items:flex-start; border-bottom:1px solid var(--beige-rule); } .archImpact .row:last-child { border-bottom:0; } .archImpact .ic { width:26px; height:26px; border-radius:6px; background:var(--s); border:1px solid var(--beige-rule); color:var(--t3); display:flex; align-items:center; justify-content:center; } .archImpact .ic.warn { background:var(--warn-bg); color:#A6601C; border-color:var(--beige-b); } .archImpact .ic svg { width:12px; height:12px; } .archImpact b { font:600 12.5px var(--sans); color:var(--t); display:block; } .archImpact span { font:400 11.5px/1.45 var(--sans); color:var(--t3); display:block; margin-top:2px; } /* ============================================================ ERROR STATE (Q) — re-uses .errBody / .errHero / .fixOpt etc. We add only agent-flavored badges. ============================================================ */ .errAgent { display:flex; align-items:center; gap:11px; padding:11px 13px; background:var(--s); border:1px solid var(--beige-rule); border-radius: 8px; margin-bottom:13px; position:relative; z-index:1; } .errAgent .ic { width:36px; height:36px; border-radius:8px; background:var(--brand); color:#fff; font:700 13px var(--serif); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .errAgent b { font:600 13px var(--sans); color:var(--t); display:block; } .errAgent span { font:400 11px var(--mono); color:var(--t3); display:block; margin-top:2px; } /* ============================================================ D′ · CANVAS BUILDER (Workflow + Team) ============================================================ */ .cnvLayout { flex:1; display:grid; grid-template-columns: 1fr 320px; min-height:0; } .cnvMain { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--beige-pg); } .cnvToolbar { display:flex; align-items:center; gap:8px; padding:9px 16px; border-bottom:1px solid var(--beige-rule); background:var(--s); flex-shrink:0; } .cnvToolbar .agnm { display:inline-flex; align-items:center; gap:7px; padding:4px 10px; border:1px solid; border-radius: 8px; background:var(--s); font:500 11.5px var(--sans); } .cnvToolbar .agnm .dot { width:7px; height:7px; border-radius:50%; } .cnvToolbar .agnm b { font:600 12px var(--sans); color:var(--t); } .cnvToolbar .agnm .x { font:500 10.5px var(--mono); color:var(--t3); margin-left:4px; } .cnvToolbar .gap { flex:1; } .cnvToolbar .ctl { width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--beige-b); background:var(--s); border-radius:6px; color:var(--t2); cursor:default; } .cnvToolbar .ctl svg { width:13px; height:13px; } .cnvToolbar .zoom { font:600 11px var(--mono); color:var(--t2); padding:0 4px; min-width:34px; text-align:center; } .cnvToolbar .viewCode { width:auto; padding:0 10px; font:600 11px var(--mono); color:var(--brand); border-color:var(--brandL); background:var(--brandL); } .cnvCanvas { flex:1; min-height:0; position:relative; overflow:auto; background: radial-gradient(circle at 1px 1px, var(--beige-rule) 1px, transparent 0) 0 0/22px 22px, var(--beige-pg); } .cnvBg { position:relative; width:1280px; min-width:100%; height:100%; min-height:480px; } .cnvEdges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } .cnvEdge { stroke:var(--t3); stroke-width:1.5; fill:none; } .cnvEdge.anim { stroke:var(--brand); stroke-width:1.6; stroke-dasharray:5 4; animation:cnvFlow 1.2s linear infinite; } @keyframes cnvFlow { to { stroke-dashoffset:-18; } } .cnvEdgeLbl { font:600 9.5px var(--mono); color:var(--t2); background:var(--s); border:1px solid var(--beige-rule); border-radius:4px; padding:1px 5px; text-align:center; letter-spacing:.04em; } .cnvNode { position:absolute; background:var(--s); border:1px solid var(--beige-b); border-radius: 8px; padding:9px 11px; box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex; flex-direction:column; gap:3px; } .cnvNode b { font:600 12.5px var(--sans); color:var(--t); } .cnvNode span { font:500 10.5px var(--mono); color:var(--t3); } .cnvNode.sel { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), 0 4px 14px rgba(92,49,255,.12); } .cnvNode.k-coord { background:linear-gradient(180deg,var(--info-bg),var(--s)); border-color:var(--beige-b); } .cnvNode.k-approve { background:var(--warn-bg); border-color:var(--beige-b); } .cnvNode.k-in, .cnvNode.k-out { background:var(--beige-pg); } .cnvNodeHd { display:flex; align-items:center; gap:6px; margin-bottom:1px; } .nodeChip { font:600 9px var(--mono); letter-spacing:.06em; padding:1px 5px; border-radius: 4px; } .cnvBadge { margin-left:auto; font:500 9.5px var(--mono); color:#A6601C; background:var(--warn-bg); padding:1px 5px; border-radius: 4px; } /* Palette overlaid in canvas */ .cnvPalette { position:absolute; top:14px; left:14px; width:200px; background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:11px; box-shadow:0 2px 8px rgba(0,0,0,.04); z-index:2; } .cnvPalette .palLbl { font:600 9.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:7px; } .cnvPalette .palItem { display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:6px; cursor:default; } .cnvPalette .palItem:hover { background:var(--beige-pg); } .cnvPalette .palItem b { font:600 11.5px var(--sans); color:var(--t); flex:1; } .cnvPalette .palItem span { font:500 9.5px var(--mono); color:var(--t3); } .cnvPalette .palRouting { display:flex; flex-direction:column; gap:5px; } .cnvPalette .palRouting .seg { display:flex; flex-direction:column; gap:1px; padding:7px 9px; border:1px solid var(--beige-rule); border-radius:6px; cursor:default; } .cnvPalette .palRouting .seg:has(input:checked) { border-color:var(--brand); background:var(--brandL); } .cnvPalette .palRouting input { display:none; } .cnvPalette .palRouting b { font:600 11.5px var(--sans); color:var(--t); } .cnvPalette .palRouting span { font:500 9.5px/1.4 var(--mono); color:var(--t3); } /* Right inspector */ .cnvInsp { background:var(--s); border-left:1px solid var(--beige-rule); padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:14px; } .inspHd { display:flex; align-items:center; gap:9px; padding-bottom:11px; border-bottom:1px dashed var(--beige-rule); } .inspHd b { font:600 13.5px var(--sans); color:var(--t); display:block; } .inspHd span { font:500 10.5px var(--mono); color:var(--t3); display:block; } .inspBody { display:flex; flex-direction:column; gap:13px; } .inspGrp { display:flex; flex-direction:column; gap:5px; } .inspGrp label { font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--t3); } .inspGrp label small { font-weight:400; color:var(--t4); margin-left:5px; } .inspExpr { display:flex; align-items:center; gap:7px; padding:8px 10px; background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:6px; font:600 11.5px var(--mono); } .inspExpr .ref { color:var(--brand); } .inspExpr .op { color:var(--t3); } .inspExpr .val { color:var(--t); } .inspRef { padding:6px 10px; background:var(--s); border:1px solid var(--beige-rule); border-radius:6px; font:600 11.5px var(--mono); color:var(--t2); } .inspGrp select { padding:6px 9px; border:1px solid var(--beige-b); border-radius:6px; background:var(--s); font:500 11.5px var(--sans); color:var(--t); } .inspNote { display:flex; gap:9px; padding:9px 11px; background:var(--brandL); border:1px solid var(--brandL); border-radius: 8px; font:400 11px/1.5 var(--sans); color:var(--t2); } .inspNote svg { width:14px; height:14px; color:var(--brand); flex-shrink:0; margin-top:1px; } .inspPrompt { padding:9px 10px; background:var(--s); border:1px solid var(--beige-rule); border-radius:6px; font:400 11px/1.55 var(--sans); color:var(--t2); } .inspPrompt b { color:var(--brand); font-weight:600; } .inspList { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; } .inspList li { display:flex; align-items:center; gap:7px; padding:6px 9px; background:var(--s); border:1px solid var(--beige-rule); border-radius:6px; font:500 11.5px var(--sans); color:var(--t); } .inspList li .d { width:6px; height:6px; border-radius:50%; flex-shrink:0; } .inspList li em { margin-left:auto; font:500 10.5px var(--mono); color:var(--t3); font-style:normal; } .inspStats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding-top:13px; border-top:1px dashed var(--beige-rule); } .inspStats > div { background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 8px; padding:7px 9px; } .inspStats span { font:500 9.5px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--t3); display:block; } .inspStats b { font:600 13px var(--sans); color:var(--t); display:block; margin-top:2px; } .modelPicker.compact { padding:6px 8px; gap:8px; } .modelPicker.compact .meta b { font-size:11.5px; } /* ============================================================ D″ · IMPORT (BYOA) ============================================================ */ .impSrcRow { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .impSrc { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--beige-rule); border-radius: 8px; background:var(--s); cursor:default; } .impSrc.sel { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); background:var(--brandL); } .impSrc .logo { width:24px; height:24px; display:flex; align-items:center; justify-content:center; } .impSrc .logo svg { width:18px; height:18px; } .impSrc .logo.gh { color:#181717; } .impSrc b { font:600 12px var(--sans); color:var(--t); } .impDetect { display:flex; flex-direction:column; gap:0; border:1px solid var(--beige-rule); border-radius:8px; overflow:hidden; } .dRow { display:grid; grid-template-columns:140px 1fr; gap:14px; padding:10px 14px; border-bottom:1px solid var(--beige-rule); align-items:center; } .dRow:last-child { border-bottom:0; } .dLbl { font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--t3); text-transform:uppercase; } .dVal { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; } .dVal.stack { row-gap:5px; } .dVal code { font:600 11.5px var(--mono); color:var(--t); background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 6px; padding:2px 7px; } .dVal b { font:600 12.5px var(--sans); color:var(--t); } .dVal .x { font:500 10.5px var(--mono); color:var(--t3); margin-left:6px; } .dVal .ok { font:600 9.5px var(--mono); letter-spacing:.04em; padding:1px 6px; border-radius:4px; background:var(--ok-bg); color:#107A4D; margin-left:auto; } .fwLogo { width:26px; height:26px; border-radius:6px; background:var(--beige-pg); border:1px solid var(--beige-rule); display:flex; align-items:center; justify-content:center; font-size:14px; } .fwLogo.lg { font-size:13px; } .dChip { font:600 10.5px var(--mono); padding:2px 7px; border-radius:4px; border:1px solid var(--beige-rule); background:var(--s); color:var(--t2); } .dChip.warn { background:var(--warn-bg); border-color:var(--beige-b); color:#A6601C; } .impHint { display:flex; gap:10px; padding:11px 13px; background:var(--ok-bg); border:1px solid var(--beige-b); border-radius: 8px; margin-top:13px; } .impHint svg { width:16px; height:16px; color:#107A4D; flex-shrink:0; margin-top:1px; } .impHint div { font:400 11.5px/1.55 var(--sans); color:var(--t2); } .impHint b { font-weight:600; color:#107A4D; } .impPick { display:flex; align-items:center; padding:7px 11px; border:1px solid var(--beige-rule); border-radius:6px; background:var(--beige-pg); font:500 11.5px var(--sans); color:var(--t); } .impPick .swap { margin-left:auto; font:600 10.5px var(--mono); color:var(--brand); cursor:default; } .impCode { display:block; font:600 11.5px var(--mono); color:var(--t); background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:6px; padding:8px 10px; } /* ============================================================ D‴ · SCHEDULED-TRIGGER variant ============================================================ */ .formCard h3 small { font:400 11px var(--sans); color:var(--t3); margin-left:8px; font-weight:400; } .trigPicker { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; } .trigOpt { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--beige-rule); border-radius:8px; background:var(--s); cursor:default; } .trigOpt input { display:none; } .trigOpt.sel { border-color:#888780; background:var(--sh); box-shadow:0 0 0 1px #888780; } .trigIc { width:30px; height:30px; border-radius: 8px; background:var(--beige-pg); border:1px solid var(--beige-rule); display:flex; align-items:center; justify-content:center; color:var(--t2); flex-shrink:0; } .trigOpt.sel .trigIc { background:var(--s); color:#888780; border-color:#888780; } .trigIc svg { width:14px; height:14px; } .trigMeta { min-width:0; } .trigMeta b { font:600 12px var(--sans); color:var(--t); display:block; } .trigMeta span { font:500 10.5px var(--mono); color:var(--t3); display:block; margin-top:1px; } .trigCron { background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:13px; } .cronRow { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .cronFld label { display:block; font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--t3); margin-bottom:5px; text-transform:uppercase; } .cronFld input, .cronFld select { width:100%; padding:7px 10px; border:1px solid var(--beige-b); border-radius:6px; background:var(--s); font:600 12px var(--mono); color:var(--t); } .cronHuman { display:block; font:500 11px var(--sans); color:var(--t3); margin-top:4px; } .cronPresets { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .cronPresets .lbl { font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--t3); text-transform:uppercase; margin-right:4px; } .presetChip { font:500 11px var(--sans); padding:4px 10px; border:1px solid var(--beige-b); background:var(--s); border-radius: 12px; color:var(--t2); cursor:default; } .presetChip.sel { border-color:#888780; background:var(--sh); color:var(--t); font-weight:600; } .cronUpcoming { display:flex; align-items:center; gap:11px; padding-top:11px; border-top:1px dashed var(--beige-b); flex-wrap:wrap; } .cronUpcoming .lbl { font:600 10.5px var(--mono); letter-spacing:.04em; color:var(--t3); text-transform:uppercase; } .cronUpcoming .run { font:500 11px var(--mono); color:var(--t2); padding:3px 9px; background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; } .cronUpcoming .run b { color:var(--t); font-weight:600; } .cronOpts { display:flex; flex-direction:column; gap:5px; padding-top:11px; border-top:1px dashed var(--beige-b); } .ckOpt { display:flex; align-items:center; gap:8px; font:400 11.5px var(--sans); color:var(--t2); cursor:default; } .ckOpt input { width:14px; height:14px; accent-color:#888780; } .delivList { display:flex; flex-direction:column; gap:8px; } .delivRow { display:flex; align-items:center; gap:11px; padding:10px 13px; background:var(--s); border:1px solid var(--beige-rule); border-radius:8px; } .delivRow.sel { border-color:#888780; background:var(--sh); } .delivIc { width:30px; height:30px; border-radius: 8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .delivIc svg { width:15px; height:15px; } .delivMeta { flex:1; min-width:0; } .delivMeta b { font:600 12.5px var(--sans); color:var(--t); display:block; } .delivMeta span { font:500 11px var(--mono); color:var(--t3); display:block; margin-top:1px; } .trigBtn { font:600 10.5px var(--mono); letter-spacing:.04em; padding:5px 11px; border:1px solid var(--beige-b); background:var(--s); border-radius: 6px; color:var(--t2); cursor:default; } .delivRow.sel .trigBtn { color:var(--t); border-color:#888780; } /* ============================================================ RUN HISTORY (R1 / R2 / R3) — scheduled agents ============================================================ */ .runBody { padding:16px 28px 28px; display:flex; flex-direction:column; gap:14px; } .runStatus { display:inline-flex; align-items:center; gap:5px; font:600 9.5px var(--mono); letter-spacing:.06em; padding:2px 7px; border-radius:4px; } .runStatus .d { width:6px; height:6px; border-radius:50%; } /* KPI strip — mirrors .dtlKpiRow but with 5 columns */ .runKpis { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; } .runKpis .kpi { background:var(--s); border:1px solid var(--beige-rule); border-radius: 8px; padding:11px 13px; } .runKpis .kpi .lbl { font:600 10.5px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--t3); margin-bottom:4px; } .runKpis .kpi .v { font:600 22px var(--serif); color:var(--t); line-height:1; } .runKpis .kpi .v small { font:500 12px var(--sans); color:var(--t3); margin-left:2px; } .runKpis .kpi .sub { font:400 11px var(--sans); color:var(--t3); margin-top:5px; } .runKpis .kpi .sub .up { color:#107A4D; font-weight:600; margin-right:3px; } /* Run card chrome */ .runCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .runCardHd { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; } .runCardHd h3 { font:600 13.5px var(--sans); color:var(--t); } .runCardHd .sub { font:400 11.5px var(--sans); color:var(--t3); display:block; margin-top:2px; } .runLegend { display:flex; gap:10px; align-items:center; margin-left:auto; } /* Calendar heatmap */ .runCal { padding:6px 0 0; } .runCalLabels { display:grid; grid-template-rows:repeat(5,18px); gap:3px; font:500 9.5px var(--mono); color:var(--t3); float:left; padding-right:8px; padding-top:0; text-align:right; } .runCalGrid { display:grid; grid-template-rows:repeat(5,18px); grid-auto-flow:column; grid-auto-columns:18px; gap:3px; padding-bottom:8px; } .runCalCell { width:18px; height:18px; border-radius: 4px; position:relative; } .runCalCell.s-ok { background:#A2C4A8; } .runCalCell.s-fail { background:#E8A2A4; } .runCalCell.s-partial { background:#E6C795; } .runCalCell.s-skipped { background:#E2DDD0; } .runCalCell.s-running { background:#B5C7E2; } .runCalCell .runToday { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font:600 9px var(--mono); color:var(--t2); white-space:nowrap; } .runCalAxis { display:flex; justify-content:space-between; font:500 10px var(--mono); color:var(--t3); padding-top:7px; border-top:1px dashed var(--beige-rule); margin-top:4px; padding-left:30px; } /* Filters row */ .runFilters { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .runFilters .seg { display:inline-flex; background:var(--s); border:1px solid var(--beige-b); border-radius: 8px; overflow:hidden; } .runFilters .seg span { padding:6px 11px; font:500 11.5px var(--sans); color:var(--t2); cursor:default; border-right:1px solid var(--beige-rule); } .runFilters .seg span:last-child { border-right:0; } .runFilters .seg .sel { background:var(--t); color:#fff; font-weight:600; } .runFilters .filterChips { display:flex; gap:5px; flex-wrap:wrap; } .fchip { font:500 11px var(--sans); padding:4px 10px; border:1px solid var(--beige-b); background:var(--s); border-radius: 12px; color:var(--t2); cursor:default; } .fchip.sel { border-color:var(--t); background:var(--t); color:#fff; font-weight:600; } .runFilters .rt { margin-left:auto; display:flex; gap:7px; } /* Run table */ .runTable { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; overflow:hidden; } .runHdr, .runRow { display:grid; grid-template-columns: 90px 1.4fr 0.7fr 0.7fr 2.6fr 1.2fr; gap:14px; align-items:center; padding:9px 14px; } .runHdr { background:var(--beige-pg); border-bottom:1px solid var(--beige-rule); font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); } .runRow { border-bottom:1px solid var(--beige-rule); font:400 12px var(--sans); color:var(--t2); } .runRow:last-child { border-bottom:0; } .runRow.sel { background:var(--brandL); } .runRow.s-fail { background:linear-gradient(90deg,var(--err-bg) 0%, var(--s) 6%); } .runRow.s-skipped { color:var(--t4); } .runRow .cellRun b { font:600 12.5px var(--sans); color:var(--t); display:block; } .runRow .cellRun span { font:500 10.5px var(--mono); color:var(--t3); } .runRow .cellDur { font:600 11.5px var(--mono); color:var(--t); } .runRow .cellCost { font:600 11.5px var(--mono); color:var(--t); } .runRow .cellOut { font:400 11.5px var(--sans); color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .runRow .cellTrace { display:flex; align-items:center; gap:8px; } .runRow .cellTrace code { font:500 10.5px var(--mono); color:var(--t3); } .runRow .cellTrace .open { font:600 10.5px var(--mono); color:var(--brand); margin-left:auto; } .runMore { padding:11px 14px; text-align:center; font:500 11.5px var(--sans); color:var(--t3); border-top:1px solid var(--beige-rule); background:var(--beige-pg); } .runMore a { color:var(--brand); font-weight:600; cursor:default; } /* ── Run detail (R2 / R3) ───────────────────────────────────── */ .runDetailHd { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; } .runDetailHd .b { flex:1; min-width:0; } .runDetailHd .back { font:500 11px var(--mono); color:var(--brand); cursor:default; display:inline-block; margin-bottom:5px; } .runDetailHd h2 { font:600 18px var(--serif); color:var(--t); display:flex; align-items:center; gap:10px; margin-bottom:5px; } .runDetailHd h2 .mono { font:600 13.5px var(--mono); color:var(--t2); } .runDetailHd .sub { display:flex; gap:8px; font:400 11.5px var(--sans); color:var(--t3); flex-wrap:wrap; } .runDetailHd .sub b { color:var(--t2); font-weight:600; } .runDetailHd .r { display:flex; gap:7px; flex-shrink:0; } .runDetailGrid { display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:flex-start; } /* Timeline */ .runTl { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .tlHdr { padding-bottom:11px; border-bottom:1px solid var(--beige-rule); margin-bottom:13px; } .tlHdr h3 { font:600 13.5px var(--sans); color:var(--t); } .tlHdr .sub { font:500 11px var(--mono); color:var(--t3); display:block; margin-top:2px; } .tlList { display:flex; flex-direction:column; } .tlStep { display:grid; grid-template-columns: 70px 30px 1fr; gap:9px; padding-bottom:13px; position:relative; } .tlStep:not(.last)::before { content:""; position:absolute; left:84px; top:24px; bottom:0; width:1.5px; background:var(--beige-rule); } .tlStep .tlT { font:500 10.5px var(--mono); color:var(--t3); padding-top:5px; } .tlStep .tlT span { display:block; color:var(--t4); margin-top:1px; } .tlNode { display:flex; align-items:flex-start; justify-content:center; padding-top:3px; position:relative; z-index:1; } .tlNode .dot { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; box-shadow:0 0 0 3px var(--s); } .tlMeta { padding-top:1px; } .tlMeta .hd { display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .tlMeta .hd b { font:600 12.5px var(--sans); color:var(--t); } .tlMeta .sub { font:400 11px var(--mono); color:var(--t3); display:block; margin-top:3px; word-break:break-word; } .kindChip { font:600 9px var(--mono); letter-spacing:.06em; padding:1px 6px; border-radius: 4px; } .okPill { font:600 9.5px var(--mono); letter-spacing:.04em; padding:1px 6px; border-radius: 4px; background:var(--ok-bg); color:#107A4D; } .failPill { font:600 9.5px var(--mono); letter-spacing:.04em; padding:1px 6px; border-radius: 4px; background:var(--err-bg); color:#B0282B; margin-left:auto; } .skipPill { font:600 9.5px var(--mono); letter-spacing:.04em; padding:1px 6px; border-radius: 4px; background:var(--sh); color:#888780; margin-left:auto; } .tlStep.failStep { background:var(--err-bg); border:1px solid var(--beige-b); border-radius:8px; padding:11px 13px; margin-bottom:13px; } .tlStep.failStep::before { display:none; } .failSub { display:flex; flex-direction:column; gap:5px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--beige-b); } .atRow { display:grid; grid-template-columns: 80px 1fr 60px; gap:8px; align-items:center; font:500 11px var(--mono); } .atRow span { color:var(--t3); } .atRow code { color:#B0282B; font-weight:600; } .atRow em { font-style:normal; color:var(--t4); text-align:right; } .atRow.last code { color:var(--t2); } .tlStep.skip { opacity:.65; } .tlStep.skip .tlNode .dot { color:#fff; font-weight:700; } .tlStep.skip:not(.last)::before { background:var(--beige-rule); } /* Right detail column */ .runDt { display:flex; flex-direction:column; gap:13px; } .dtCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .dtCard h4 { font:600 13px var(--sans); color:var(--t); margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--beige-rule); } /* Slack output preview */ .slackPreview { border:1px solid var(--beige-rule); border-radius:8px; overflow:hidden; } .slkHd { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--s); border-bottom:1px solid var(--beige-rule); } .slkAv { width:32px; height:32px; border-radius:6px; color:#fff; font:700 11px var(--serif); display:flex; align-items:center; justify-content:center; } .slkHd b { font:700 13px var(--sans); color:var(--t); } .slkHd .bot { font:600 9px var(--mono); letter-spacing:.06em; padding:1px 5px; border-radius: 4px; background:var(--beige-pg); color:var(--t3); margin-left:6px; } .slkHd .time { font:400 11px var(--sans); color:var(--t3); margin-left:8px; } .slkBody { padding:11px 14px; } .slkTitle { font:600 12.5px var(--sans); color:var(--t); margin-bottom:9px; } .slkBody ul { list-style:none; padding-left:0; display:flex; flex-direction:column; gap:6px; } .slkBody ul li { padding-left:18px; position:relative; font:400 12px/1.55 var(--sans); color:var(--t2); } .slkBody ul li::before { content:"•"; position:absolute; left:5px; top:0; color:var(--t3); } .slkBody ul li b { color:var(--t); font-weight:600; } .slkFoot { display:flex; gap:8px; padding:8px 14px; border-top:1px solid var(--beige-rule); background:var(--beige-pg); font:500 11px var(--sans); color:var(--t3); } .slkFoot .link { margin-left:auto; color:var(--brand); font-weight:600; cursor:default; } /* Inputs collected */ .inpRow { display:flex; align-items:flex-start; gap:11px; padding:7px 0; border-bottom:1px dashed var(--beige-rule); } .inpRow:last-child { border-bottom:0; } .inpRow .lbl { font:600 10.5px var(--mono); color:var(--t3); padding-top:3px; min-width:135px; flex-shrink:0; text-transform:uppercase; letter-spacing:.04em; } .inpRow code { font:500 10.5px/1.55 var(--mono); color:var(--t); background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius: 6px; padding:6px 9px; flex:1; word-break:break-word; } /* Cost breakdown */ .costGrid { display:grid; grid-template-columns: 1fr 80px 80px; gap:5px 9px; } .costGrid > div { display:contents; } .costGrid > div span { font:400 11.5px var(--sans); color:var(--t3); padding:5px 0; border-bottom:1px dashed var(--beige-rule); } .costGrid > div b { font:600 11.5px var(--mono); color:var(--t); padding:5px 0; border-bottom:1px dashed var(--beige-rule); text-align:right; } .costGrid > div em { font:600 11.5px var(--mono); color:var(--t); padding:5px 0; border-bottom:1px dashed var(--beige-rule); text-align:right; font-style:normal; } .costGrid .ttl span { color:var(--t); font-weight:600; border-bottom:0; padding-top:8px; } .costGrid .ttl b, .costGrid .ttl em { font-weight:700; border-bottom:0; padding-top:8px; color:var(--brand); } /* Failure banner (R3) */ .failBanner { display:flex; gap:13px; background:var(--err-bg); border:1px solid var(--beige-b); border-radius: 12px; padding:14px 16px; } .failIc { width:36px; height:36px; border-radius:8px; background:var(--err-bg); color:#B0282B; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .failIc svg { width:18px; height:18px; } .failMeta { flex:1; min-width:0; } .failMeta .lbl { font:700 13.5px var(--sans); color:#B0282B; margin-bottom:4px; } .failMeta .msg { font:400 12px/1.55 var(--sans); color:var(--t2); } .failMeta .msg code { font:600 11px var(--mono); background:var(--s); border:1px solid var(--beige-b); padding:1px 5px; border-radius: 4px; color:var(--t); } .failMeta .msg b { color:var(--t); font-weight:600; } .failMeta .actions { display:flex; gap:7px; margin-top:10px; } .failBtn { display:inline-flex; align-items:center; gap:6px; font:600 11px var(--sans); padding:6px 12px; border:1px solid var(--beige-b); background:var(--s); border-radius:6px; color:#B0282B; cursor:default; } .failBtn svg { width:12px; height:12px; } /* Suggested fixes (R3) */ .fixList { display:flex; flex-direction:column; gap:9px; } .fixOpt { background:var(--s); border:1px solid var(--beige-rule); border-radius:8px; padding:11px 13px; } .fixOpt.rec { background:var(--brandL); border-color:var(--brandL); } .fixOpt .fixHd { display:flex; align-items:center; gap:7px; margin-bottom:6px; } .fixOpt .fixHd b { font:600 12.5px var(--sans); color:var(--t); } .fixOpt .recBadge { font:600 9px var(--mono); letter-spacing:.06em; padding:1px 6px; border-radius: 4px; background:var(--brand); color:#fff; } .fixOpt p { font:400 11.5px/1.55 var(--sans); color:var(--t2); margin-bottom:8px; } .fixOpt .fixCode { font:500 11px var(--mono); color:var(--t); background:var(--s); border:1px solid var(--beige-rule); border-radius: 6px; padding:6px 9px; margin-bottom:9px; } .fixOpt .fixCode .t { color:var(--brand); font-weight:600; } .fixOpt .btn { font:600 11px var(--sans); padding:5px 11px; } /* Notifications + similar lists */ .ntfList { display:flex; flex-direction:column; gap:9px; } .ntf { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed var(--beige-rule); } .ntf:last-child { border-bottom:0; } .ntfIc { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; font:700 12px var(--serif); flex-shrink:0; } .ntf b { font:600 12px var(--sans); color:var(--t); display:block; } .ntf span { font:400 11.5px/1.5 var(--sans); color:var(--t3); display:block; margin-top:2px; } .simList { list-style:none; padding:0; display:flex; flex-direction:column; gap:5px; } .simList li { display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1px dashed var(--beige-rule); font:400 11.5px var(--sans); color:var(--t2); } .simList li:last-child { border-bottom:0; } .simList li b { font-weight:600; color:var(--t); white-space:nowrap; } .simList li span { color:var(--t3); flex:1; } .simHint { margin-top:9px; padding:8px 11px; background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:6px; font:500 11.5px/1.5 var(--sans); color:var(--t2); } /* ============================================================ Builder badge on list rows (small chip in name column) ============================================================ */ .ag-meta .builderRow { display:inline-flex; align-items:center; gap:5px; font:500 9.5px var(--mono); letter-spacing:.04em; color:var(--t3); margin-top:4px; text-transform:uppercase; } .ag-meta .builderRow .swatch { width:7px; height:7px; border-radius: 4px; } .ag-meta .builderRow b { font-weight:600; color:var(--t2); letter-spacing:.04em; } /* ============================================================ AGENTS V1 — supporting classes from studio-chrome.css / deployments-art.css / evaluations-art.css. Inlined here to avoid colliding with the platform's existing studio.css. Only the classes referenced by agents-list.jsx and agents-detail-*.jsx land here. ============================================================ */ /* ── Buttons (page header + empty state CTAs) ── */ .ag-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius: 8px; font:500 12.5px var(--sans); cursor:pointer; line-height:1; border:1px solid var(--beige-b); background:var(--s); color:var(--t2); } .ag-btn svg { width:12px; height:12px; } .ag-btn.primary { background:var(--brand); color:#fff; border-color:var(--brand); } /* Dark mode: match the .r-btn.brand / .btn.pri treatment (GPU "Allocate", AI Gateway "Configure Key") — brand-blue in light, low-key dark surface in dark instead of a bright brand button. Light mode is untouched. */ .R.dark .ag-btn.primary { background:var(--s); border-color:var(--b); } .R.dark .ag-btn.primary:hover { background:var(--sh); border-color:var(--bd); } .ag-btn.big { padding:11px 18px; font:600 13.5px var(--sans); border-radius:8px; gap:7px; } .ag-btn.big svg { width:14px; height:14px; } .ag-btn:disabled { cursor:not-allowed; } .ag-btn.deferred { opacity:.7; } /* ── Page header (title + sub + actions) ── */ .ag-page-head { padding:16px 28px 14px; display:flex; align-items:flex-start; gap:18px; border-bottom:1px solid var(--beige-rule); background:var(--s); flex-shrink:0; } .ag-page-head .crumb { font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--t4); margin-bottom:4px; } .ag-page-head h1 { font:600 24px/1.1 var(--serif); letter-spacing:-.012em; color:var(--t); } .ag-page-head .sub { font:400 12.5px/1.55 var(--sans); color:var(--t3); margin-top:6px; max-width:760px; } .ag-page-head .acts { display:flex; gap:8px; align-items:center; margin-left:auto; flex-shrink:0; } /* ── KPI row ── */ .ag-kpiRow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:14px 28px; flex-shrink:0; } .ag-kpi { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:13px 14px; } .ag-kpi .lbl { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--t4); margin-bottom:5px; } .ag-kpi .v { font:700 22px var(--sans); color:var(--t); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; } .ag-kpi .v.green { color:#107A4D; } .ag-kpi .v.red { color:#A23E2E; } .ag-kpi .v.amber { color:#A6601C; } .ag-kpi .v small { font-size:13px; color:var(--t3); font-weight:500; margin-left:3px; } .ag-kpi .delta { font:500 10px var(--mono); margin-top:5px; display:inline-flex; align-items:center; gap:3px; color:var(--t3); } .ag-kpi .delta.up { color:#107A4D; } .ag-kpi .delta.dn { color:#A23E2E; } /* ── Filter bar ── */ .ag-fbar { padding:9px 28px 12px; display:flex; align-items:center; gap:7px; background:var(--s); border-bottom:1px solid var(--beige-rule); flex-shrink:0; } .ag-fbar .gap { flex:1; } .ag-seg { display:inline-flex; background:var(--beige); border:1px solid var(--beige-b); border-radius: 8px; padding:2px; } .ag-seg b { background:none; border:0; padding:5px 10px; font:500 11.5px var(--sans); color:var(--t3); border-radius: 6px; line-height:1; display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .ag-seg b.on { background:var(--s); color:var(--t); box-shadow:0 1px 2px rgba(20,20,30,.06); font-weight:600; } .ag-seg b .n { font:500 9.5px var(--mono); color:var(--t4); } .ag-seg b.on .n { color:var(--brand); } /* Controls-row height normalisation. CR-389 tried to fix the height mismatch between the search input and the Owner/Sort dropdowns using padding tweaks, but elements have a UA-stylesheet minimum intrinsic height (~21px in Chrome/Safari) that padding:0 / line-height:1 alone cannot override — the wrapper flexes open to accommodate it. The only reliable fix is an explicit height on every control so the browser cannot stretch any of them. All three control types (.ag-search, .ag-sel, and the Range picker label .ag-filterSel) are pinned to 28px with box-sizing:border-box. The inner gets height:100% so it fills — but never exceeds — its 28px container. */ .ag-search, .ag-sel, .ag-fbar label.ag-filterSel { height:28px; box-sizing:border-box; } /* CR-479: flex:1 so the search bar stretches to fill all available space between the segment tabs and the right-side controls (Range/Owner/Sort). Previously it was a fixed min-width:230px box with a flex:1 gap span after it, leaving a large empty middle zone and the search appearing as a disconnected narrow box. min-width reduced to 160px so it still has a usable minimum on narrow viewports. */ .ag-search { display:inline-flex; align-items:center; gap:7px; padding:0 9px; margin:0; border:1px solid var(--beige-b); background:var(--s); border-radius: 8px; font:400 11.5px var(--sans); color:var(--t3); flex:1; min-width:160px; } .ag-search input { border:0; outline:0; background:transparent; flex:1; font:400 11.5px var(--sans); color:var(--t); min-width:0; padding:0; height:100%; line-height:1; } /* Single focus indicator: the wrapper shows the ring on focus-within and the inner input shows none — previously the input's own focus ring stacked on top of the wrapper border, giving a double highlight. */ .ag-search input:focus, .ag-search input:focus-visible { outline:none; box-shadow:none; } .ag-search:focus-within { border-color:var(--brand); box-shadow:var(--shadow-focus); } .ag-search svg { width:13px; height:13px; color:var(--t4); flex-shrink:0; } .ag-sel { display:inline-flex; align-items:center; gap:5px; padding:0 9px; border:1px solid var(--beige-b); background:var(--s); border-radius: 8px; font:500 11.5px var(--sans); color:var(--t2); cursor:pointer; } .ag-sel svg { width:11px; height:11px; color:var(--t4); } /* ── Empty state hero ── */ .ag-emWrap { padding:18px 28px 28px; flex:1; overflow:auto; } .ag-emHero { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:36px 36px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; } .ag-emHero::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 600px 200px at 50% -50px, var(--brandL) 0%, transparent 60%); pointer-events:none; } .ag-emHero-ic { position:relative; width:64px; height:64px; flex:0 0 64px; border-radius:16px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 8px 24px -8px var(--brand); } .ag-emHero-ic svg { width:28px; height:28px; } .ag-emHero h2 { font:600 26px/1.15 var(--serif); color:var(--t); letter-spacing:-.015em; margin-bottom:10px; position:relative; } .ag-emHero p { font:400 14px/1.55 var(--sans); color:var(--t2); max-width:520px; margin-bottom:22px; position:relative; } .ag-emHero-cta { display:flex; gap:10px; position:relative; } .ag-emHero-sub { margin-top:18px; font:400 11.5px var(--sans); color:var(--t4); position:relative; } /* ── Empty state requirements ── */ .ag-emReq { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:16px 20px; margin-top:18px; } .ag-emReq .lbl { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--t4); margin-bottom:11px; } .ag-emReq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .ag-reqItem { display:flex; align-items:center; gap:11px; padding:9px 11px; background:var(--beige-pg); border-radius: 8px; } .ag-reqIc { width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--s); border:1.5px solid var(--beige-b); color:var(--t4); display:flex; align-items:center; justify-content:center; } .ag-reqIc svg { width:13px; height:13px; } .ag-reqIc.done { background:var(--ok-bg); border-color:#107A4D; color:#107A4D; } .ag-reqBody { flex:1; min-width:0; } .ag-reqBody b { font:600 12px var(--sans); color:var(--t); display:block; } .ag-reqBody span { font:400 11px var(--mono); color:var(--t3); } .ag-reqAct { font:600 11px var(--sans); color:var(--brand); cursor:pointer; flex-shrink:0; } /* ── Status pill (namespaced .ag-pill to avoid collision with any future .pill definition elsewhere in the platform) ── */ .ag-pill { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius: 12px; font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.05em; } .ag-pill .dot { width:5px; height:5px; border-radius:50%; } .ag-pill.live { background:var(--ok-bg); color:#107A4D; } .ag-pill.live .dot{ background:#107A4D; } .ag-pill.canary { background:var(--brandL); color:var(--brand); } .ag-pill.canary .dot{ background:var(--brand); } .ag-pill.draft { background:var(--sh); color:var(--t3); } .ag-pill.draft .dot{ background:var(--t4); } .ag-pill.review { background:var(--warn-bg); color:#A6601C; } .ag-pill.review .dot{ background:#A6601C; } .ag-pill.archived{ background:var(--beige); color:var(--t4); opacity:.85; } .ag-pill.archived .dot{ background:var(--t4); } .ag-pill.paused { background:var(--sh); color:var(--t3); } .ag-pill.paused .dot{ background:var(--t4); } /* Counter pills (used in TraceDetail header pillRow) — colored by what they count, not by status. These mirror the design's .pill.tool / kb / mcp definitions but live under our .ag-pill namespace. */ .ag-pill.tool { background:var(--info-bg); color:#1F58B5; } .ag-pill.kb { background:var(--ok-bg); color:#2E7039; } .ag-pill.mcp { background:var(--brandL); color:#6B36B5; } .ag-pill.ok { background:var(--ok-bg); color:#107A4D; } .ag-pill.ok .dot { background:#107A4D; } /* ── Builder row inside agent name cell ── */ .ag-meta .builderRow { display:inline-flex; align-items:center; gap:6px; margin-top:5px; font:500 10.5px var(--mono); color:var(--t3); } .ag-meta .builderRow .swatch { width:8px; height:8px; border-radius: 4px; flex-shrink:0; } /* ── Scaffold banner (removed once Section 1 ships final) ── */ .ag-scaffold-banner { background:var(--brandL); color:var(--brand); border-bottom:1px solid var(--beige-rule); padding:8px 28px; font:500 11.5px var(--mono); letter-spacing:.02em; display:flex; align-items:center; gap:10px; flex-shrink:0; } .ag-scaffold-banner b { font-weight:700; } .ag-scaffold-banner span { color:var(--t3); } /* ============================================================ AGENTS V1 SECTION 2 — detail header + tabs + KPI strip + grid. Extracted from design's deployments-art.css since the agents-detail artboards reuse the shared deployment chrome. Inlined here instead of importing the whole deployments-art.css to avoid dragging in unrelated deployment-specific blocks. ============================================================ */ /* Detail header (shared by all detail tabs) */ .dtlHead { background:var(--s); border-bottom:1px solid var(--beige-rule); padding:18px 28px 0; flex-shrink:0; } .dtlCrumb { font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--t4); margin-bottom:8px; } .dtlCrumb b { color:var(--t2); font-weight:500; } .dtlTitleRow { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; } .dtlIcon { width:42px; height:42px; border-radius: 12px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font:700 17px var(--serif); flex-shrink:0; } .dtlTitleBlock { flex:1; min-width:0; } .dtlTitleBlock h1 { font:600 22px/1.15 var(--serif); letter-spacing:-.012em; color:var(--t); display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .dtlVer { font:600 10.5px var(--mono); padding:2px 7px; background:var(--beige); border-radius: 6px; color:var(--t3); letter-spacing:.04em; } .dtlSub { font:400 12px var(--sans); color:var(--t3); margin-top:7px; display:flex; align-items:center; flex-wrap:wrap; gap:5px; } .dtlActs { display:flex; gap:6px; } .dtlTabs { display:flex; gap:0; } .dtlTab { padding:9px 14px; font:500 12px var(--sans); color:var(--t3); border-bottom:2px solid transparent; margin-bottom:-1px; line-height:1; cursor:pointer; background:none; border-left:0; border-right:0; border-top:0; } .dtlTab.on { color:var(--t); font-weight:600; border-bottom-color:var(--brand); } .dtlTab.deferred { opacity:.7; } .dtlTab .deferred-badge { margin-left:6px; padding:1px 5px; border-radius: 4px; background:var(--beige); color:var(--t4); font:500 9.5px var(--mono); } /* Detail KPI strip (5 columns - Overview only) */ .dtlKpiRow { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; padding:14px 28px; background:var(--beige-pg); border-bottom:1px solid var(--beige-rule); flex-shrink:0; } .dtlKpi { background:var(--s); border:1px solid var(--beige-rule); border-radius: 8px; padding:11px 13px; } .dtlKpi .lbl { font:600 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t4); margin-bottom:5px; } .dtlKpi .v { font:700 19px var(--sans); color:var(--t); font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.01em; } .dtlKpi .v small { font:500 11px var(--mono); color:var(--t3); margin-left:2px; } .dtlKpi .sub { font:500 10px var(--mono); color:var(--t4); margin-top:5px; } .dtlKpi.up .sub { color:#107A4D; } .dtlKpi.dn .sub { color:#A23E2E; } .dtlGrid { display:grid; grid-template-columns: 1fr 320px; gap:14px; padding:14px 28px; flex:1; overflow:auto; } .dtlCard { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:14px 16px; } .dtlCard .cardLgH { font:600 12.5px var(--sans); color:var(--t); margin-bottom:10px; display:flex; align-items:center; gap:7px; } .dtlCard .cardLgH svg { width:14px; height:14px; color:var(--t3); } /* Inline middle dot separator used in detail header sub-line */ .dot-sep { width:3px; height:3px; border-radius:50%; background:var(--t4); display:inline-block; margin:0 4px; vertical-align:3px; } /* ============================================================ AGENTS V1 SECTION 3 — modal scrim + card chrome. Extracted from design's deployments-art.css since the agents modals (Promote dialog, Archive confirm) reuse the shared deployment-style modal. Inlined here to avoid pulling in unrelated deployment styles. ============================================================ */ /* CR-281 — three problems with the pre-CR-281 shape, all fixed below: (1) `position: absolute` only covers the modal's containing block (the page area inside
), so the sidebar + topbar stayed un-dimmed and un-blurred — users saw "some parts dark, some clear" instead of a uniform overlay. Switched to `position: fixed` so the scrim covers the whole viewport. (2) `align-items: flex-start` + `padding: 50px 24px 24px` pinned the card to the top of the scrim. Flipped to `align-items: center` + uniform `padding: 24px` so the card vertically centers. (3) `z-index: 5` placed the scrim *below* the sidebar (`z-index: 9999`). With `position: fixed` the scrim is now viewport-level and needs to sit above the sidebar — bumped to `100000` (one step above the toast layer at 99999, matching the CR-274 portaled-confirm-overlay z-index for consistency). (4) `backdrop-filter: blur(2px)` was barely visible. Raised to `blur(6px)` for a clearly-blurred background. Added the -webkit- prefix for Safari coverage. */ .modalScrim { position:fixed; inset:0; background:rgba(20,20,30,.42); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100000; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .modalCard { background:var(--s); border-radius: 12px; box-shadow:0 24px 64px -16px rgba(20,20,30,.4), 0 0 0 1px var(--beige-rule); width:680px; max-height:calc(100vh - 48px); overflow:auto; display:flex; flex-direction:column; } .modalCard.sm { width:520px; } .modalHd { display:grid; grid-template-columns:44px 1fr 28px; gap:14px; padding:18px 22px 14px; border-bottom:1px solid var(--beige-rule); align-items:flex-start; } .modalIc { width:44px; height:44px; border-radius: 12px; background:var(--brandL); color:var(--brand); display:flex; align-items:center; justify-content:center; } .modalIc svg { width:20px; height:20px; } .modalIc.warn { background:var(--err-bg); color:#A23E2E; } .modalHd h2 { font:600 17px/1.25 var(--serif); color:var(--t); letter-spacing:-.01em; margin-bottom:5px; } .modalHd p { font:400 12.5px/1.5 var(--sans); color:var(--t3); } .modalClose { width:28px; height:28px; border:0; background:transparent; color:var(--t3); display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; } .modalClose svg { width:14px; height:14px; } .modalBody { padding:14px 22px; display:flex; flex-direction:column; gap:14px; } .modalFoot { padding:14px 22px; border-top:1px solid var(--beige-rule); background:var(--beige-pg); display:flex; align-items:center; gap:8px; border-radius:0 0 14px 14px; } /* Destructive action button used in Archive dialog footer. */ .ag-btn.danger { background:#A23E2E; color:#fff; border-color:#A23E2E; } .ag-btn.danger:hover { background:#8B331E; border-color:#8B331E; } /* Disabled danger: grey out so the red doesn't bleed through opacity. */ .ag-btn.danger:disabled { background:var(--beige); color:var(--t4); border-color:var(--beige-rule); cursor:not-allowed; } .ag-btn.danger:disabled:hover { background:var(--beige); border-color:var(--beige-rule); } /* Ghost / tertiary button — neutral, low-emphasis (e.g. Cancel in the editor / import / delete-confirm footers). Borderless until hovered. */ .ag-btn.ghost { background:transparent; border-color:transparent; color:var(--t3); } .ag-btn.ghost:hover { background:var(--sh); color:var(--t2); } .ag-btn.ghost:disabled { background:transparent; color:var(--t4); cursor:not-allowed; } /* Impact row .ic.fail variant — red error glyph. Used when an action would cause an outright failure (vs warn = caution). */ .archImpact .row .ic.fail { background:var(--err-bg); color:#A23E2E; } /* ============================================================ AGENTS V1 SECTION 4 — wizard chrome (head, step rail, body grid, side panel). Extracted from design's deployments-art.css since the new-agent wizard reuses the deployment-style 4-step shell. Inlined here to avoid pulling in unrelated deployment styles. ============================================================ */ /* Wizard header */ .wizHead { background:var(--s); border-bottom:1px solid var(--beige-rule); padding:18px 28px 14px; display:flex; align-items:flex-end; gap:18px; flex-shrink:0; } .wizHead > div:first-child { flex:1; min-width:0; } .wizHead .crumb { font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--t4); margin-bottom:5px; } .wizHead .crumb b { color:var(--t2); font-weight:500; } .wizHead h1 { font:600 22px/1.1 var(--serif); letter-spacing:-.012em; color:var(--t); } /* Step rail */ .wizSteps { display:flex; align-items:center; gap:10px; padding:14px 28px; background:var(--s); border-bottom:1px solid var(--beige-rule); flex-shrink:0; flex:none; min-height:0; overflow:visible; } .wizStep { display:flex; align-items:center; gap:8px; padding:5px 11px 5px 7px; border-radius: 16px; background:var(--beige-pg); border:1px solid var(--beige-rule); } .wizStep .circ { width:22px; height:22px; border-radius:50%; background:var(--s); border:1px solid var(--beige-b); color:var(--t3); display:flex; align-items:center; justify-content:center; font:700 11px var(--mono); flex-shrink:0; } .wizStep span { font:500 12px var(--sans); color:var(--t3); white-space:nowrap; } .wizStep.on { background:var(--brandL); border-color:var(--brand); } .wizStep.on .circ { background:var(--brand); color:#fff; border-color:var(--brand); } .wizStep.on span { color:var(--brand); font-weight:600; } .wizStep.done { background:var(--ok-bg); border-color:var(--beige-b); } .wizStep.done .circ { background:#107A4D; color:#fff; border-color:#107A4D; } .wizStep.done .circ svg { width:11px; height:11px; } .wizStep.done span { color:#0E6B43; font-weight:500; } .wizConn { flex:1; height:1px; background:var(--beige-rule); min-width:18px; } .wizConn.done { background:#B7DEC5; } /* Body grid */ .wizBody { padding:18px 28px; flex:1; min-height:0; overflow:auto; background:var(--beige-pg); } .wizGrid { display:grid; grid-template-columns: 1fr 320px; gap:18px; align-items:flex-start; } .wizMain { display:flex; flex-direction:column; gap:12px; min-width:0; } /* Side panel (right rail) */ .wizSide { display:flex; flex-direction:column; gap:11px; position:sticky; top:0; } .sideLbl { font:600 9.5px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t4); padding:0 2px; } .sideHero { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:12px 13px; display:flex; align-items:center; gap:11px; } .sideAv { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font:700 12px var(--mono); flex-shrink:0; } .sideHero b { font:600 13px var(--sans); color:var(--t); display:block; line-height:1.25; word-break:break-word; } .sideHero span { font:400 11px var(--mono); color:var(--t3); display:block; margin-top:2px; } .sideStats { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:4px 13px; display:flex; flex-direction:column; } .sideStats > div { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--beige-rule); } .sideStats > div:last-child { border-bottom:0; } .sideStats span { font:500 11px var(--sans); color:var(--t3); } .sideStats b { font:600 11.5px var(--mono); color:var(--t); font-variant-numeric:tabular-nums; } .sideRecBox { background:var(--brandL); border:1px solid var(--brandL); border-radius: 12px; padding:13px 14px; } .sideRecBox .recHead { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--brand); } .sideRecBox .recHead b { font:600 12px var(--sans); color:var(--brand); letter-spacing:-.005em; } .sideRecBox .recHead svg { width:13px; height:13px; } .sideRisk { background:var(--s); border:1px solid var(--beige-rule); border-radius: 12px; padding:11px 13px; display:flex; gap:10px; align-items:flex-start; } .sideRisk svg { width:15px; height:15px; color:#107A4D; flex-shrink:0; margin-top:1px; } .sideRisk b { font:600 12px var(--sans); color:var(--t); display:block; margin-bottom:2px; } .sideRisk span { font:400 11px/1.45 var(--sans); color:var(--t3); display:block; } .sideFoot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:4px; } .sideFoot .ag-btn { padding:9px 14px; font-size:12.5px; } /* Pattern card disabled state for v1.1-deferred patterns */ .patCard.disabled { opacity:.55; cursor:not-allowed; } .patCard.disabled .v11Badge { position:absolute; top:10px; right:11px; padding:1px 7px; border-radius:4px; background:var(--beige); color:var(--t4); font:600 9.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; } /* ===================== skills.css ===================== */ /* ============================================================ Phase 5.3 — Skills management module Class prefix: .sk-* (matches the agents .ag-* convention). Tokens come from agents-art.css; no new tokens introduced. Pages covered: - SkillsLibraryPage (catalog grid) - SkillDetailPage (read view + sidebar) - SkillEditorPage (form + body editor with preview tab) - SkillImportPage (drop zone + per-file list + result view) ============================================================ */ /* ─── Shared bits ──────────────────────────────────────────────── */ .sk-count { font: 500 12px var(--mono); color: var(--t3); padding: 4px 9px; background: var(--beige); border: 1px solid var(--beige-rule); border-radius: 9999px; } .sk-error { margin: 14px 28px; padding: 12px 14px; background: rgba(164, 40, 42, 0.06); border: 1px solid rgba(164, 40, 42, 0.20); border-radius: 8px; color: var(--err, #A4282A); font: 500 13px var(--sans); } .sk-error.sk-error-soft { background: rgba(200, 148, 31, 0.06); border-color: rgba(200, 148, 31, 0.20); color: #8A6300; } .sk-detail-skel, .sk-detail-error { padding: 32px 36px; } .sk-detail-error h2 { font: 600 18px var(--sans); color: var(--t); margin-bottom: 16px; } .sk-skel-line { height: 14px; background: linear-gradient( 90deg, var(--beige) 0%, var(--bl2) 50%, var(--beige) 100% ); background-size: 200% 100%; border-radius: 4px; animation: sk-skel-shimmer 1.2s ease-in-out infinite; } @keyframes sk-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Pills (used everywhere) */ .sk-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; } .sk-pill.platform { background: var(--beige); color: var(--t3); border: 1px solid var(--beige-b); } .sk-pill.org { background: var(--brandL, #F4EFFF); color: var(--brand); } .sk-pill.vertical { background: rgba(46, 112, 57, 0.08); color: var(--ok, #2E7039); } .sk-tag { display: inline-block; padding: 1px 7px; background: var(--beige-pg); border: 1px solid var(--bl2); border-radius: 4px; font: 500 10.5px var(--mono); color: var(--t3); margin-right: 4px; } .sk-tag-more { font: 500 10.5px var(--mono); color: var(--t4); margin-left: 2px; } /* ─── Library page ─────────────────────────────────────────────── */ .sk-filterbar { display: flex; align-items: center; gap: 10px; padding: 14px 28px; border-bottom: 1px solid var(--beige-rule); background: var(--s); flex-shrink: 0; } .sk-search { flex: 1; position: relative; max-width: 480px; } .sk-search svg { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 14px; height: 14px; color: var(--t4); pointer-events: none; } .sk-search input { width: 100%; padding: 8px 10px 8px 34px; background: var(--beige-pg); border: 1px solid var(--bd); border-radius: 6px; font: 400 13px var(--sans); color: var(--t); outline: none; } .sk-search input:focus { border-color: var(--brand); background: var(--s); box-shadow: 0 0 0 3px var(--brandGhost); } .sk-select { padding: 7px 26px 7px 11px; background: var(--s) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 9px center; border: 1px solid var(--bd); border-radius: 6px; font: 500 12.5px var(--sans); color: var(--t2); cursor: pointer; appearance: none; } .sk-clear { background: none; border: none; color: var(--brand); font: 500 12px var(--sans); cursor: pointer; padding: 7px 10px; } .sk-clear:hover { text-decoration: underline; } .sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; padding: 22px 28px 60px; overflow-y: auto; flex: 1; } .sk-card { display: flex; flex-direction: column; background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: inherit; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease; } .sk-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); transform: translateY(-1px); } .sk-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .sk-card-ic { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--brand) 0%, #7B52FF 100%); color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px var(--serif); flex-shrink: 0; } .sk-card-meta { flex: 1; min-width: 0; } .sk-card-meta h3 { font: 600 14px var(--sans); color: var(--t); margin: 0 0 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-card-ver { font: 500 10.5px var(--mono); color: var(--t3); } .sk-card-pills { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-end; } .sk-card-desc { font: 400 12.5px/1.5 var(--sans); color: var(--t2); margin: 0 0 12px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sk-card-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bl2); display: flex; align-items: center; gap: 10px; } .sk-card-foot-stat { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: hidden; } .sk-card-role { font: 500 11px var(--mono); color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; } .sk-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .sk-card-time { font: 400 11px var(--sans); color: var(--t4); flex-shrink: 0; } .sk-card-skel { pointer-events: none; } /* Empty state */ .sk-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 28px; } .sk-empty-hero { max-width: 540px; text-align: center; } .sk-empty-ic { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 12px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; } .sk-empty-ic svg { width: 28px; height: 28px; } .sk-empty-hero h2 { font: 600 22px var(--sans); color: var(--t); margin-bottom: 10px; } .sk-empty-hero p { font: 400 14px/1.6 var(--sans); color: var(--t3); margin-bottom: 22px; } .sk-empty-cta { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; } .sk-empty-sub { font: 400 12px var(--sans); color: var(--t4); } .sk-empty-sub code { background: var(--beige-pg); border: 1px solid var(--bl2); padding: 1px 5px; border-radius: 4px; font-size: 11px; } /* ─── Detail page ──────────────────────────────────────────────── */ .sk-detail-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 500 12.5px var(--sans); color: var(--t3); } .sk-detail-name { font: 500 12.5px var(--mono); color: var(--t2); background: var(--beige-pg); border: 1px solid var(--bl2); padding: 1px 7px; border-radius: 4px; } .sk-detail-divider { color: var(--t4); } .sk-detail-roPill { margin-left: 6px; } /* CR-391: the two-pane independent-scroll layout (article + sticky sidebar) needs `min-height: 0` at both the flex-child (.sk-detail-body) AND the grid-item levels to actually engage the `overflow-y: auto` rules on .sk-detail-main / .sk-detail-side. Without these, flex / grid default `min-height: auto` lets the body and its cells expand to their natural content height — at which point the inner overflow-y: auto rules have nothing to clip and the page becomes unscrollable for long skill content. Mirrors the established pattern at agents-art.css:216-217 (`.pgGrid > * { min-height: 0 }`). */ .sk-detail-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 320px; gap: 0; overflow: hidden; } .sk-detail-body > * { min-height: 0; } @media (max-width: 980px) { .sk-detail-body { grid-template-columns: 1fr; } } .sk-detail-main { overflow-y: auto; padding: 28px 36px 60px; } .sk-detail-side { border-left: 1px solid var(--beige-rule); background: var(--s); padding: 22px 22px 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .sk-side-card { background: var(--beige-pg); border: 1px solid var(--bl2); border-radius: 12px; padding: 14px 16px; } .sk-side-card h3 { font: 600 11px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px 0; } .sk-side-muted { font: 400 12px var(--sans); color: var(--t3); line-height: 1.5; margin: 0; } /* Versions list */ .sk-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sk-versions li button { width: 100%; background: none; border: none; border-radius: 6px; padding: 7px 9px; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; font: inherit; } .sk-versions li button:hover:not(:disabled) { background: var(--s); } .sk-versions li.on button { background: var(--brandL); cursor: default; } .sk-versions-ver { font: 600 12.5px var(--mono); color: var(--t); } .sk-versions li.on .sk-versions-ver { color: var(--brand); } .sk-versions-meta { font: 400 11px var(--sans); color: var(--t3); margin-left: auto; } /* Usage list */ .sk-usage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sk-usage-link { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; text-decoration: none; color: inherit; } .sk-usage-link:hover { background: var(--s); } .sk-usage-name { font: 500 12.5px var(--sans); color: var(--t); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-usage-meta { display: flex; gap: 4px; flex-shrink: 0; } .sk-usage-pub, .sk-usage-draft, .sk-usage-pin { font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 4px; } .sk-usage-pub { background: rgba(46, 112, 57, 0.10); color: var(--ok, #2E7039); } .sk-usage-draft { background: var(--beige); color: var(--t3); } .sk-usage-pin { background: var(--brandL); color: var(--brand); } .sk-usage-more { padding: 6px 9px; font: 500 11.5px var(--sans); color: var(--t4); } /* Frontmatter sidebar */ .sk-fm { display: grid; grid-template-columns: 80px 1fr; gap: 6px 12px; margin: 0; font: 400 12px var(--sans); } .sk-fm dt { color: var(--t3); font-weight: 500; } .sk-fm dt::after { content: ""; } .sk-fm dd { color: var(--t); word-break: break-word; } .sk-fm dd code { font: 500 11.5px var(--mono); background: var(--s); border: 1px solid var(--bl2); padding: 1px 5px; border-radius: 4px; } .sk-fm-tags { display: flex; flex-wrap: wrap; gap: 3px; } /* Markdown render */ .sk-md { font: 400 14.5px/1.65 var(--sans); color: var(--t); max-width: 720px; } .sk-md h1 { font: 600 24px/1.25 var(--serif); letter-spacing: -0.012em; margin: 0 0 16px 0; } .sk-md h2 { font: 600 18px/1.3 var(--sans); margin: 28px 0 10px 0; color: var(--t); } .sk-md h3 { font: 600 15px/1.3 var(--sans); margin: 22px 0 8px 0; color: var(--t); } .sk-md h4 { font: 600 13px/1.3 var(--sans); margin: 16px 0 6px 0; color: var(--t2); text-transform: uppercase; letter-spacing: 0.04em; } .sk-md p { margin: 0 0 14px 0; } .sk-md ul, .sk-md ol { margin: 0 0 16px 0; padding-left: 24px; } .sk-md ul li, .sk-md ol li { margin-bottom: 6px; } .sk-md code { font: 500 12.5px var(--mono); background: var(--beige-pg); border: 1px solid var(--bl2); padding: 1px 5px; border-radius: 4px; color: var(--brand); } .sk-md pre.sk-md-code { background: var(--beige-pg); border: 1px solid var(--bl2); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font: 400 12.5px/1.55 var(--mono); color: var(--t2); margin: 0 0 16px 0; } .sk-md pre.sk-md-code code { background: none; border: none; padding: 0; color: inherit; } .sk-md a { color: var(--brand); text-decoration: none; } .sk-md a:hover { text-decoration: underline; } .sk-md strong { font-weight: 600; color: var(--t); } .sk-md blockquote { border-left: 3px solid var(--bl2); padding: 6px 0 6px 14px; color: var(--t2); font-style: italic; margin: 0 0 16px 0; } .sk-md hr { border: none; border-top: 1px solid var(--bl2); margin: 22px 0; } /* ─── Editor page ──────────────────────────────────────────────── */ .sk-edit-body { flex: 1; display: grid; grid-template-columns: 320px 1fr; gap: 0; overflow: hidden; } @media (max-width: 980px) { .sk-edit-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } .sk-edit-fm { border-right: 1px solid var(--beige-rule); background: var(--s); padding: 22px; overflow-y: auto; } .sk-edit-fm h3 { font: 600 11px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px 0; } .sk-fld { margin-bottom: 14px; } .sk-fld label { display: block; font: 600 10.5px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; } .sk-fld input { width: 100%; padding: 7px 10px; background: var(--beige-pg); border: 1px solid var(--bd); border-radius: 6px; font: 400 12.5px var(--sans); color: var(--t); outline: none; } .sk-fld input.mono { font-family: var(--mono); font-size: 12px; } .sk-fld input:focus { border-color: var(--brand); background: var(--s); box-shadow: 0 0 0 3px var(--brandGhost); } .sk-fld input:disabled { background: var(--beige); color: var(--t3); cursor: not-allowed; } .sk-fld-help { font: 400 11px/1.45 var(--sans); color: var(--t3); margin-top: 4px; } .sk-fld-suggest { background: none; border: none; color: var(--brand); font: 500 11px var(--sans); cursor: pointer; margin-top: 4px; padding: 0; text-decoration: underline; } .sk-edit-body-main { display: flex; flex-direction: column; overflow: hidden; background: var(--beige-pg); } .sk-edit-body-head { display: flex; align-items: center; padding: 14px 22px; background: var(--s); border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; } .sk-edit-body-head h3 { flex: 1; font: 600 11px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .sk-edit-tabs { display: flex; border: 1px solid var(--bd); border-radius: 6px; overflow: hidden; } .sk-edit-tab { padding: 5px 12px; background: var(--s); border: none; border-right: 1px solid var(--bd); font: 500 12px var(--sans); color: var(--t3); cursor: pointer; } .sk-edit-tab:last-child { border-right: none; } .sk-edit-tab.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .sk-edit-textarea { flex: 1; width: 100%; border: none; background: var(--s); padding: 22px 26px; font: 400 13.5px/1.65 var(--mono); color: var(--t); resize: none; outline: none; } .sk-edit-preview { flex: 1; overflow-y: auto; background: var(--s); padding: 22px 26px; } .sk-edit-preview-pre { font: 400 13.5px/1.65 var(--mono); color: var(--t2); white-space: pre-wrap; word-wrap: break-word; } /* ─── Importer page ────────────────────────────────────────────── */ .sk-import-body { flex: 1; overflow-y: auto; padding: 24px 36px 60px; display: flex; flex-direction: column; gap: 20px; } .sk-import-drop { border: 2px dashed var(--bd); border-radius: 12px; padding: 40px 28px; text-align: center; cursor: pointer; transition: all 0.15s ease; background: var(--s); color: var(--t3); } .sk-import-drop:hover, .sk-import-drop:focus-visible { border-color: var(--brand); background: var(--brandL); color: var(--brand); outline: none; } .sk-import-drop.on { border-color: var(--brand); background: var(--brandL); color: var(--brand); transform: scale(1.005); } .sk-import-drop svg { width: 44px; height: 44px; margin-bottom: 14px; color: var(--t3); } .sk-import-drop:hover svg, .sk-import-drop.on svg { color: var(--brand); } .sk-import-drop h3 { font: 600 16px var(--sans); color: var(--t); margin: 0 0 6px 0; } .sk-import-drop p { font: 400 12.5px/1.55 var(--sans); color: var(--t3); margin: 0; max-width: 420px; margin-left: auto; margin-right: auto; } .sk-import-options { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; background: var(--beige-pg); border: 1px solid var(--bl2); border-radius: 12px; padding: 16px 18px; } .sk-import-opt label { display: block; font: 600 10.5px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .sk-import-opt input[type="text"] { width: 100%; padding: 6px 9px; background: var(--s); border: 1px solid var(--bd); border-radius: 6px; font: 400 12.5px var(--sans); color: var(--t); outline: none; } .sk-import-opt input[type="text"]:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandGhost); } .sk-import-opt small { display: block; font: 400 11px/1.45 var(--sans); color: var(--t3); margin-top: 4px; } .sk-import-radios { display: flex; gap: 6px; } .sk-import-radio { flex: 1; cursor: pointer; background: var(--s); border: 1px solid var(--bd); border-radius: 6px; padding: 6px 8px; text-align: center; transition: all 0.12s ease; } .sk-import-radio:has(input:checked) { border-color: var(--brand); background: var(--brandL); } .sk-import-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .sk-import-radio span { display: block; font: 600 12px var(--sans); color: var(--t2); } .sk-import-radio:has(input:checked) span { color: var(--brand); } .sk-import-radio small { display: block; font: 400 10px var(--sans); color: var(--t4); margin-top: 1px; } .sk-import-list { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; overflow: hidden; } .sk-import-list-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--beige-rule); background: var(--beige-pg); } .sk-import-list-head h3 { flex: 1; font: 600 12px var(--sans); color: var(--t2); text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .sk-import-list ul { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; } .sk-import-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--beige-rule); font: 400 12.5px var(--sans); } .sk-import-row:last-child { border-bottom: none; } .sk-import-row.ok .sk-import-row-stat { color: var(--ok, #2E7039); } .sk-import-row.err .sk-import-row-stat { color: var(--err, #A4282A); } .sk-import-row.err { background: rgba(164, 40, 42, 0.04); } .sk-import-row-stat { font: 700 14px var(--sans); width: 14px; flex-shrink: 0; text-align: center; } .sk-import-row-path { flex: 1; font: 500 12px var(--mono); color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-import-row-meta { color: var(--t3); font-size: 11.5px; } .sk-import-row-meta code { font: 600 11px var(--mono); color: var(--t); background: var(--beige-pg); border: 1px solid var(--bl2); padding: 1px 5px; border-radius: 4px; margin-right: 4px; } .sk-import-row-warn { color: var(--warn, #B58300); margin-left: 6px; cursor: help; } .sk-import-row-err { color: var(--err, #A4282A); font-size: 11.5px; flex: 1; } .sk-import-row-rm { background: none; border: none; color: var(--t4); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .sk-import-row-rm:hover { color: var(--err, #A4282A); background: var(--beige); } .sk-import-actions { display: flex; justify-content: flex-end; padding-top: 4px; } /* Result view */ .sk-import-summary { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .sk-import-summary span { font: 500 13px var(--sans); color: var(--t3); } .sk-import-summary strong { color: var(--t); font-weight: 600; } .sk-import-summary .err strong { color: var(--err, #A4282A); } .sk-import-results { list-style: none; margin: 0; padding: 0 36px 60px; overflow-y: auto; } .sk-import-result { display: grid; grid-template-columns: 28px 1fr 100px auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--beige-rule); font: 400 12.5px var(--sans); } .sk-import-result.created .sk-import-result-stat, .sk-import-result.bumped .sk-import-result-stat { color: var(--ok, #2E7039); } .sk-import-result.skipped .sk-import-result-stat { color: var(--t4); } .sk-import-result.error .sk-import-result-stat { color: var(--err, #A4282A); } .sk-import-result-stat { font: 700 16px var(--sans); text-align: center; } .sk-import-result-name { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .sk-import-result-name code { font: 600 12px var(--mono); color: var(--t); } .sk-import-result-name small { font: 400 11px var(--mono); color: var(--t4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sk-import-result-stat-lbl { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--t3); } .sk-import-result.error .sk-import-result-stat-lbl { color: var(--err, #A4282A); } .sk-import-result-err { color: var(--err, #A4282A); font: 400 11.5px var(--sans); grid-column: 1 / -1; padding-left: 40px; } /* ===================== agent-journey.css ===================== */ /* ============================================================ agent-journey.css — New-agent creation journey (Screens 1-2) Covers .acj-* classes used by: - Screen1TypePicker.jsx (type picker) - Screen2TemplatePicker.jsx (template gallery) - Screen2BYOAImport.jsx (bring-your-own-agent import) - DraftPreviewPane.jsx (side-rail draft preview) Tokens: inherits from global.css / colors_and_type.css (:root vars). ============================================================ */ /* ── Page container ───────────────────────────────────────────── */ /* CR-453 — restore vertical scroll on the BYOA import screen (and any other journey screen using .acj-page). Bug: after uploading a zip + clicking "Upload & analyse", the dynamically loaded "Auto-detected" + "How should Studio run it?" cards expanded the .acj-wiz-main column past the viewport, but neither the internal grid scroll nor the page scroll engaged — the bottom cards were clipped + inaccessible. Root cause: the height chain breaks at .page-enter. Studio routes mount inside `
` (a definite-height flex column — App.jsx:540). PageShell wraps page content in `
`, which ships with only an opacity animation (global.css:1537) — no `display: flex`, no `flex`, no `height` — so as a flex child of the studio shell it takes its intrinsic auto height instead of stretching to fill. .acj-page's `flex: 1; min-height: 0; overflow: auto` then has no definite parent height to resolve against; its overflow trigger never fires; the grid (inside it) inherits the same broken sizing; content past the studio shell's `overflow: hidden` clip boundary becomes inaccessible. Fix: scope .page-enter to participate in flex column layout WHEN it contains .acj-page. The `:has()` selector keeps the fix surgical — other PageShell consumers (Profiler / Skills / Resources / Tools / WorkroomConfig / ResourceImages / etc.) are untouched and continue to use whatever internal scroll layout they already have (typically `.page-scroll` or a `height: 100vh` self-override like `.ws-page`). */ .page-enter:has(> .acj-page) { display: flex; flex-direction: column; flex: 1; min-height: 0; } .acj-page { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; } .acj-screen { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; } /* ── Screen header (title + cancel) ──────────────────────────── */ .acj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 28px 14px; background: #fff; border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; } .acj-head > div:first-child { flex: 1; min-width: 0; } .acj-head h1 { font: 600 22px/1.1 var(--serif); letter-spacing: -0.012em; color: var(--t); margin: 0; } .acj-sub { font: 400 13px/1.55 var(--sans); color: var(--t3); margin-top: 6px; max-width: 620px; } /* ── Step rail (3-step breadcrumb) ───────────────────────────── */ .acj-step-rail { display: flex; align-items: center; gap: 10px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--beige-rule); flex-shrink: 0; flex: none; min-height: 0; overflow: visible; } .acj-step { display: flex; align-items: center; gap: 8px; padding: 5px 11px 5px 7px; border-radius: 16px; background: var(--beige-pg); border: 1px solid var(--beige-rule); white-space: nowrap; } .acj-step-circ { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--beige-b); color: var(--t3); display: flex; align-items: center; justify-content: center; font: 700 11px var(--mono); flex-shrink: 0; } .acj-step-circ svg { width: 11px; height: 11px; } .acj-step-lbl { font: 500 12px var(--sans); color: var(--t3); } /* Active step */ .acj-step.on { background: var(--brandL); border-color: var(--brand); } .acj-step.on .acj-step-circ { background: var(--brand); color: #fff; border-color: var(--brand); } .acj-step.on .acj-step-lbl { color: var(--brand); font-weight: 600; } /* Done step */ .acj-step.done { background: #E6F4EC; border-color: #B7DEC5; } .acj-step.done .acj-step-circ { background: #107A4D; color: #fff; border-color: #107A4D; } .acj-step.done .acj-step-lbl { color: #0E6B43; font-weight: 500; } /* Connector line between steps */ .acj-step-conn { flex: 1; height: 1px; background: var(--beige-rule); min-width: 18px; } .acj-step-conn.done { background: #B7DEC5; } /* ── Type-picker grid (Screen 1, 8 cards) ────────────────────── */ .acj-grid { padding: 18px 28px; background: var(--beige-pg); flex: 1; min-height: 0; overflow: auto; } .acj-grid-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; } /* Make the type card interactive (patCard base comes from agents-art.css) */ .acj-type-card { cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; } /* Builder badge sits in normal flow inside .patHd (flex space-between), icon on left, badge on right — no absolute positioning needed. Must override studio.css `.builder` which sets display:flex, height:100%, overflow:hidden, margin:-24px -28px (intended for the full-page builder layout container, not this badge). */ .acj-type-card .builder { position: static; align-self: flex-start; display: inline-flex; align-items: center; height: auto; overflow: visible; margin: 0; } .acj-type-card .patHd { justify-content: space-between; align-items: flex-start; } /* Blue border already signals selection — suppress the "SELECTED" text ribbon so it doesn't clash with the visible builder badge. */ .acj-type-card.sel::after { display: none; } .acj-type-card:hover { border-color: var(--beige-b); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .acj-type-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Wizard grid (Screen 2) — main + sidebar ─────────────────── */ /* CR-478: removed flex:1 / min-height:0 / overflow:auto — those turned the grid into a nested scroll container that trapped all content inside itself. .acj-page (overflow:auto) is the sole scroll container; the grid must grow freely so the outer page can scroll when the AGENT DRAFT panel expands. */ .acj-wiz-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; padding: 18px 28px; background: var(--beige-pg); align-items: flex-start; } /* CR-478: allow Screen 2 to grow beyond .acj-page's flex-allocated height so .acj-page (overflow:auto) scrolls when the right-hand draft panel or template grid exceeds the viewport. flex-shrink:0 + flex-basis:auto means the screen never shrinks below its content, while flex-grow:1 (inherited from .acj-screen { flex: 1 }) still fills the viewport when content is short. The sticky .acj-foot stays glued to the bottom of the viewport. */ .acj-screen-2 { flex-shrink: 0; flex-basis: auto; } .acj-wiz-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* ── Draft preview side pane ─────────────────────────────────── */ .acj-side { display: flex; flex-direction: column; gap: 11px; position: sticky; top: 0; } .acj-side-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 20px; background: #fff; border: 1px dashed var(--beige-b); border-radius: 12px; min-height: 200px; } .acj-side-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--t4); font: 400 12px/1.55 var(--sans); } .acj-side-placeholder-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--beige-pg); border: 1px solid var(--beige-rule); display: flex; align-items: center; justify-content: center; color: var(--t4); } .acj-side-placeholder-ic svg { width: 22px; height: 22px; } /* ── Footer (back / continue row) ────────────────────────────── */ .acj-foot { padding: 14px 28px; border-top: 1px solid var(--beige-rule); background: #fff; flex-shrink: 0; /* Pin the foot to the bottom of the scrollable viewport so the "Continue to build →" CTA stays reachable even when the right-hand AGENT DRAFT panel grows after a template is selected. Without this, the foot pushes below the fold and users think the button vanished. z-index keeps it above the scrolled grid content; the box-shadow hints "more content above" when there's a scroll. */ position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -4px 12px -8px rgba(20, 14, 6, 0.12); } .acj-foot-row { display: flex; align-items: center; gap: 10px; } .acj-foot .btn { padding: 9px 14px; font-size: 12.5px; } /* ── Link-style button ───────────────────────────────────────── */ .acj-link-btn { background: none; border: none; padding: 8px 0; font: 500 12.5px var(--sans); color: var(--brand); cursor: pointer; } .acj-link-btn:hover { text-decoration: underline; } /* ── Skip / blank-start button ───────────────────────────────── */ .acj-skip-btn { background: var(--brandL); color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: 8px; padding: 8px 16px; font: 500 13px var(--sans); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .acj-skip-btn:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 50%, transparent); } .acj-skip-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Empty filter state ──────────────────────────────────────── */ .acj-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--t3); font: 400 13px/1.55 var(--sans); background: #fff; border: 1px dashed var(--beige-b); border-radius: 12px; } /* ── Error banner ────────────────────────────────────────────── */ .acj-err { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FBE6DF; border: 1px solid #E6C9C0; border-radius: 8px; font: 500 12.5px var(--sans); color: #A23E2E; } .acj-err svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── Skeleton loading cards ──────────────────────────────────── */ .acj-tpl-loading { opacity: 0.6; } .acj-tpl-skel { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px !important; } .acj-skel-row { height: 12px; border-radius: 4px; background: var(--beige-rule); animation: acj-pulse 1.3s ease-in-out infinite; } @keyframes acj-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── BYOA detect animation ───────────────────────────────────── */ .acj-detect-pulse { animation: acj-detect-glow 1.6s ease-in-out infinite; } @keyframes acj-detect-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 15%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent); } } .acj-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: acj-pulse 1s ease-in-out infinite; } /* ── .btn.primary alias (Screen2 uses "primary", global.css has "pri") ── */ .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); } .btn.primary:hover { filter: brightness(1.1); } .btn.primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; } /* ============================================================ Responsive breakpoints ============================================================ */ /* Tablets / narrow desktops: 2-column type grid, side panel below */ @media (max-width: 1099px) { .acj-grid-types { grid-template-columns: repeat(2, 1fr); } .acj-wiz-grid { grid-template-columns: 1fr; } .acj-side { position: static; } } /* Mobile: single-column everything */ @media (max-width: 699px) { .acj-grid-types { grid-template-columns: 1fr; } .acj-head { padding: 14px 18px 10px; flex-direction: column; gap: 10px; } .acj-head h1 { font-size: 18px; } .acj-step-rail { padding: 12px 18px; gap: 6px; overflow-x: auto; } .acj-grid { padding: 16px 18px; } .acj-wiz-grid { padding: 16px 18px; gap: 14px; } .acj-foot { padding: 12px 18px; } } /* CR-411: type-picker card background-pattern overlays — REMOVED (again). * * Originally added as "FIX 4: Subtle background patterns per builder * type", removed in CR-486 because opacity 0.07 reads as ~0.15-0.20 on * typical monitors and 3-of-8 partial coverage looks broken rather than * themed. The May-22 v1-patched zip handoff (anuja's CR-406) reintroduced * the block from an older snapshot — its marker-based KEEP-REPO vs * APPLY-ZIP audit didn't have a marker for the CR-486 deletion, so the * zip's older CSS won. CR-411 re-deletes the block (same content, same * intent) so the type picker reverts to the uniform .patCard rendering * CR-486 established. The per-builder visual signal is still carried by * the bottom-right "opens in " chip, which is explicit and * accessible — making the background pattern redundant decoration. * * If a future designer-led refresh wants to reintroduce per-builder * theming, do it across ALL builders (including Wizard, the default for * 5 of 8 cards) so the grid stays uniform, and pick an opacity tested * against real laptop monitors (≤0.025 was the alternative considered * in CR-486; the bug-fix scope of these two CRs doesn't extend that * far). Don't reintroduce a 3-of-8 partial coverage. */ /* ===================== page-personalities.css ===================== */ /* ── Page Personalities ──────────────────────────────────────── Each major page gets a subtle visual signature so users know where they are by the layout alone, not just the title. Imported once in the app entry point. */ /* AGENTS: warmer, more visual, people-forward */ .ag-page { --page-accent: #0F6E56; --page-accent-light: #E1F5EE; } .ag-page .ag-title { font-family: var(--serif, Georgia) !important; font-size: 26px !important; font-weight: 600 !important; color: var(--t) !important; letter-spacing: -0.01em; } .ag-page .ag-subtitle { font-family: var(--serif, Georgia); font-style: italic; color: var(--t4); font-size: 14px; margin-bottom: 24px; } /* Larger agent avatars in the grid */ .ag-page .ag-card-av { width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 16px !important; } /* ARTIFACTS: document-forward, serif accents, beige warmth */ .art-page { --page-accent: #854F0B; --page-accent-light: #FAEEDA; } .art-page h1 { font-family: var(--serif, Georgia) !important; font-size: 26px !important; font-weight: 600 !important; } /* CONVERSATIONS: compact, scannable, conversation-forward */ .conv-page { --page-accent: #534AB7; --page-accent-light: #EEEDFE; } /* SHARED: warm, collaborative, people-forward */ .shared-page { --page-accent: #534AB7; --page-accent-light: #EEEDFE; } /* RUNS: data-dense, technical, status-forward */ .runs-page { --page-accent: #185FA5; --page-accent-light: #E6F1FB; } .runs-page h1 { font-family: var(--serif, Georgia) !important; font-size: 24px !important; font-weight: 600 !important; } /* KPI cards: unified treatment across pages */ .kpi-card { background: var(--page-accent-light, var(--beige-pill, #FAF8F4)); border: 1px solid color-mix(in srgb, var(--page-accent, var(--brand)) 12%, transparent); border-radius: 12px; padding: 14px 16px; } .kpi-card .kpi-value { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--t); letter-spacing: -0.02em; } .kpi-card .kpi-label { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5); margin-bottom: 4px; } .kpi-card .kpi-foot { font-family: var(--sans); font-size: 11px; color: var(--t4); margin-top: 4px; } /* Page title shared pattern */ .page-title-serif { font-family: var(--serif, Georgia); font-size: 26px; font-weight: 600; color: var(--t); letter-spacing: -0.01em; } /* Page subtitle */ .page-subtitle-serif { font-family: var(--serif, Georgia); font-style: italic; font-size: 14px; color: var(--t4); margin-top: 2px; } /* ===================== page-personality.css ===================== */ /** * Page personality system — spatial hierarchy + visual signatures. * * Three density tiers: * .pg-spacious — Home: generous whitespace, centered, breathing room * .pg-browse — List pages: medium density, scannable rows/cards * .pg-immersive — Chat: minimal chrome, content fills the viewport * * Page signatures (subtle visual identity per page): * .pg-conversations — timeline accent (left border on date groups) * .pg-agents — warmer cards, larger avatars, personality * .pg-artifacts — document-forward, serif headers, preview-heavy * .pg-runs — data-table feel, mono headers, status-forward * .pg-shared — inbox feel, avatar-forward, permission badges * * Usage: *
* ...page content... *
*/ /* ── Density tiers ─────────────────────────────────────────── */ .pg-spacious { padding: 32px 24px 24px; max-width: 820px; margin: 0 auto; } .pg-browse { padding: 20px 24px; max-width: 960px; margin: 0 auto; } .pg-immersive { padding: 0; max-width: none; } /* ── Page title treatments ─────────────────────────────────── */ .pg-title { font-family: var(--serif, Georgia); font-size: 22px; font-weight: 600; color: var(--t, #171716); margin: 0 0 4px; } .pg-subtitle { font-family: var(--mono, "JetBrains Mono"); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5, #C4BFB6); margin: 0 0 16px; } /* ── Conversations: timeline feel ──────────────────────────── */ .pg-conversations .date-group-label { position: relative; padding-left: 16px; font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5); } .pg-conversations .date-group-label::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--brand, #5C31FF); transform: translateY(-50%); } .pg-conversations .convo-row { border-left: 2px solid var(--beige-rule, #F2EFE9); margin-left: 2px; padding-left: 14px; transition: border-color 0.15s; } .pg-conversations .convo-row:hover { border-left-color: var(--brand, #5C31FF); } /* ── Agents: warm personality ──────────────────────────────── */ .pg-agents .agent-card { border-radius: 12px; transition: transform 0.15s, box-shadow 0.15s; } .pg-agents .agent-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 8%, transparent); } .pg-agents .agent-avatar-lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; font-weight: 700; } /* ── Artifacts: document-forward ───────────────────────────── */ .pg-artifacts .artifact-card { border-radius: 12px; border-left: 3px solid var(--beige-b, #EAE3D4); transition: border-left-color 0.15s; } .pg-artifacts .artifact-card:hover { border-left-color: var(--brand, #5C31FF); } .pg-artifacts .artifact-preview { font-family: var(--serif, Georgia); font-size: 12px; line-height: 1.5; color: var(--t4, #A09B91); } /* ── Runs: data-table feel ─────────────────────────────────── */ .pg-runs .run-header { font-family: var(--mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--t5); } .pg-runs .run-row { border-bottom: 1px solid var(--beige-rule, #F2EFE9); transition: background 0.1s; } .pg-runs .run-row:hover { background: var(--beige-pill, #FAF8F4); } .pg-runs .run-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ── Shared: inbox feel ────────────────────────────────────── */ .pg-shared .shared-row { border-bottom: 1px solid var(--beige-rule, #F2EFE9); padding: 10px 0; transition: background 0.1s; } .pg-shared .shared-row:hover { background: var(--beige-pill, #FAF8F4); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 8px; } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 768px) { .pg-spacious { padding: 20px 16px; } .pg-browse { padding: 16px 12px; } .pg-title { font-size: 18px; } } /* ===================== control-room-users.css ===================== */ /* ============================================================ Control Room · Users & Teams — design-system styles From handoff bundle .claude/_design_handoff_2026-05-25 Scoped to .cr-users so it doesn't bleed into the wider app. ============================================================ */ .cr-users { /* Page chrome */ background: var(--beige-pg, #FCFBF8); color: var(--t, #1B1814); font-family: var(--sans, "DM Sans", system-ui, sans-serif); font-size: 13px; min-height: 100%; padding: 28px 36px 48px; } .cr-users .page-inner { max-width: 1280px; margin: 0 auto; } /* ── Header ───────────────────────────────────────────────── */ .cr-users .pgh { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; } .cr-users .pgh-l h1 { font:600 38px/1.05 var(--serif); letter-spacing:-.02em; color:var(--t); margin:0; } .cr-users .pgh-l .sub { font:400 13px var(--sans); color:var(--t3); margin-top:8px; max-width:640px; } .cr-users .pgh-r { display:flex; gap:8px; flex-shrink:0; padding-top:6px; } /* ── Buttons ──────────────────────────────────────────────── */ .cr-users .ru-btn { display:inline-flex; align-items:center; gap:6px; font:500 13px var(--sans); color:var(--t2); background:#fff; border:1px solid var(--beige-b); padding:7px 14px; border-radius:8px; line-height:1; transition:all .12s; white-space:nowrap; cursor:pointer; } .cr-users .ru-btn:hover { background:var(--beige); border-color:#D9CFB7; } .cr-users .ru-btn:active { transform:scale(.97); } .cr-users .ru-btn:disabled { opacity:.5; cursor:not-allowed; } .cr-users .ru-btn.brand { background:var(--brand); color:#fff; border-color:var(--brand); } .cr-users .ru-btn.brand:hover { filter:brightness(1.08); background:var(--brand); } .cr-users .ru-btn.sm { padding:5px 10px; font-size:12px; border-radius:6px; gap:5px; } .cr-users .ru-btn.danger { color:var(--err); } .cr-users .ru-btn.danger:hover { background:var(--err-bg, #FBE6DF); border-color:#E8C9BD; } .cr-users .ru-btn-soft { display:inline-flex; align-items:center; gap:6px; font:500 13px var(--sans); color:var(--info, #2D6DB8); background:var(--info-bg, #E0ECF7); border:1px solid transparent; padding:6px 12px; border-radius: 12px; line-height:1; cursor:pointer; } .cr-users .ru-btn-soft:hover { filter:brightness(.96); } .cr-users .ru-btn-ghost { display:inline-flex; align-items:center; gap:6px; font:500 13px var(--sans); color:var(--t2); background:transparent; border:none; padding:7px 10px; border-radius:8px; cursor:pointer; } .cr-users .ru-btn-ghost:hover { background:var(--beige); color:var(--t); } .cr-users .ru-btn-link-danger { display:inline-flex; align-items:center; gap:5px; font:500 13px var(--sans); color:var(--err, #B3422E); background:transparent; border:none; padding:7px 10px; border-radius:8px; cursor:pointer; } .cr-users .ru-btn-link-danger:hover { background:var(--err-bg, #FBE6DF); } /* ── KPI strip ────────────────────────────────────────────── */ .cr-users .ru-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; } .cr-users .ru-kpi { background:var(--beige-card, #FFFEFC); border:1px solid var(--beige-b); border-radius:12px; padding:16px 18px; } .cr-users .ru-kpi-l { font:500 11px var(--sans); color:var(--t3); margin-bottom:8px; } .cr-users .ru-kpi-v { font:600 32px/1 var(--serif); letter-spacing:-.02em; color:var(--t); font-variant-numeric:tabular-nums; } .cr-users .ru-kpi-s { font:400 12px var(--sans); color:var(--t3); margin-top:8px; } .cr-users .ru-kpi-spark { margin-top:8px; height:24px; width:100%; display:block; } .cr-users .ru-kpi-spark path.line { fill:none; stroke:var(--t3); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; } .cr-users .ru-kpi-spark path.area { fill:var(--beige-rule, #ECE6D8); opacity:.55; } /* ── Role ladder ──────────────────────────────────────────── */ .cr-users .ru-ladder { display:flex; align-items:flex-end; gap:6px; margin-top:8px; height:70px; } .cr-users .ru-ladder-col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; text-align:center; min-width:0; } .cr-users .ru-ladder-n { font:600 14px var(--serif); color:var(--t); margin-bottom:4px; font-variant-numeric:tabular-nums; } .cr-users .ru-ladder-bar { border-radius:4px; transition:height .3s; } .cr-users .ru-ladder-lbl { font:500 10px var(--mono); color:var(--t3); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── Tabs ─────────────────────────────────────────────────── */ .cr-users .ru-tabs { display:flex; gap:2px; border-bottom:1px solid var(--beige-b); margin-bottom:20px; } .cr-users .ru-tab { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; font:500 13px var(--sans); color:var(--t3); border:none; border-bottom:2px solid transparent; background:none; margin-bottom:-1px; cursor:pointer; } .cr-users .ru-tab:hover { color:var(--t2); } .cr-users .ru-tab.on { color:var(--t); border-bottom-color:var(--brand); font-weight:600; } .cr-users .ru-tab .ct { font:500 11px var(--mono); background:var(--beige); padding:1.5px 7px; border-radius: 12px; color:var(--t3); letter-spacing:.02em; } .cr-users .ru-tab.on .ct { background:var(--brandL); color:var(--brand); } /* ── Toolbar / inputs ─────────────────────────────────────── */ .cr-users .ru-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; } .cr-users .ru-toolbar-spacer { flex:1; } .cr-users .ru-select, .cr-users .ru-input { font:400 13px var(--sans); color:var(--t); background:#fff; border:1px solid var(--beige-b); padding:6px 11px; border-radius:8px; line-height:1.3; min-width:140px; } .cr-users .ru-select:focus, .cr-users .ru-input:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); } .cr-users .ru-search { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--beige-b); padding:6px 11px; border-radius:8px; min-width:260px; } .cr-users .ru-search input { flex:1; border:none; outline:none; font:400 13px var(--sans); background:none; color:var(--t); } /* ── Card + table ─────────────────────────────────────────── */ .cr-users .ru-card { background:var(--beige-card); border:1px solid var(--beige-b); border-radius:12px; overflow:hidden; } .cr-users .ru-tbl { width:100%; border-collapse:separate; border-spacing:0; } .cr-users .ru-tbl thead th { font:600 11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); padding:11px 14px; text-align:left; background:var(--beige); border-bottom:1px solid var(--beige-b); white-space:nowrap; } .cr-users .ru-tbl tbody td { padding:13px 14px; font:400 13px var(--sans); color:var(--t2); border-bottom:1px solid var(--beige-rule); vertical-align:middle; } .cr-users .ru-tbl tbody tr:last-child td { border-bottom:none; } .cr-users .ru-tbl tbody tr:hover { background:rgba(248,244,237,.55); } .cr-users .ru-tbl .t-name { font-weight:600; color:var(--t); } .cr-users .ru-tbl .t-mono { font-family:var(--mono); font-size:12px; color:var(--t2); font-variant-numeric:tabular-nums; } .cr-users .ru-tbl .t-mono.uri { font-size:12px; color:var(--t3); } /* ── Pills ────────────────────────────────────────────────── */ .cr-users .ru-pill { display:inline-flex; align-items:center; gap:5px; font:500 11px var(--mono); letter-spacing:.02em; color:var(--t3); background:var(--beige); padding:2.5px 9px; border-radius:12px; border:1px solid var(--beige-b); } .cr-users .ru-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; } .cr-users .ru-pill.ok { color:var(--ok, #2F9163); background:var(--ok-bg, #E6F4EC); border-color:transparent; } .cr-users .ru-pill.warn { color:var(--warn, #B8761F); background:var(--warn-bg, #FBEDD9); border-color:transparent; } .cr-users .ru-pill.err { color:var(--err, #B3422E); background:var(--err-bg, #FBE6DF); border-color:transparent; } .cr-users .ru-pill.info { color:var(--info, #2D6DB8); background:var(--info-bg, #E0ECF7); border-color:transparent; } .cr-users .ru-pill.brand { color:var(--brand); background:var(--brandL); border-color:transparent; } .cr-users .ru-tag { display:inline-flex; align-items:center; font:500 11px var(--sans); padding:2px 7px; border-radius: 6px; background:var(--beige); color:var(--t2); border:1px solid var(--beige-b); font-weight:600; letter-spacing:.04em; text-transform:uppercase; } /* ── Card grid for Teams ──────────────────────────────────── */ .cr-users .ru-tcgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; } .cr-users .ru-tcard { background:var(--beige-card); border:1px solid var(--beige-b); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:14px; transition:border-color .15s, box-shadow .15s; cursor:pointer; color:inherit; } .cr-users .ru-tcard:hover { border-color:#D9CFB7; box-shadow:var(--sh-1), 0 4px 14px rgba(20,20,30,.06); } /* ── Empty state ──────────────────────────────────────────── */ .cr-users .ru-empty { padding:56px 28px; text-align:center; background:var(--beige-card); border:1px solid var(--beige-b); border-radius:12px; } .cr-users .ru-empty-ic { display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; background:var(--brandL); color:var(--brand); border-radius: 12px; margin-bottom:16px; } /* ── Detail page sub-bits ─────────────────────────────────── */ .cr-users .ru-crumb { display:flex; align-items:center; gap:8px; font:500 12px var(--mono); color:var(--t3); margin-bottom:8px; letter-spacing:.02em; } .cr-users .ru-crumb a { color:var(--t3); display:inline-flex; align-items:center; gap:4px; } .cr-users .ru-kv { display:flex; flex-direction:column; gap:10px; } .cr-users .ru-kv .kvrow { display:flex; justify-content:space-between; align-items:baseline; font:400 13px var(--sans); } .cr-users .ru-kv .kvrow > :first-child { color:var(--t3); } .cr-users .ru-kv .kvrow > :last-child { color:var(--t2); text-align:right; } .cr-users .ru-section-l { font:500 11px var(--sans); color:var(--t3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--beige-rule); } /* ── Toggle (Access tab) ──────────────────────────────────── */ .cr-users .ru-toggle { width:34px; height:20px; border-radius: 12px; padding:2px; flex-shrink:0; background:var(--beige-rule); position:relative; transition:background .15s; border:none; cursor:pointer; margin-top:1px; } .cr-users .ru-toggle.on { background:var(--brand); } .cr-users .ru-toggle::after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#fff; transform:translateX(0); transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.15); } .cr-users .ru-toggle.on::after { transform:translateX(14px); } /* ── Modal overlay (lightweight, reuses common Modal where possible) ── */ .cr-users-modal-back { position:fixed; inset:0; background:rgba(20,20,25,.42); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; } .cr-users-modal { background:var(--beige-card); border:1px solid var(--beige-b); border-radius: 12px; box-shadow:0 24px 64px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.06); width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; font-family:var(--sans); color:var(--t); } .cr-users-modal.md { max-width:560px; } .cr-users-modal.lg { max-width:720px; } .cr-users-modal-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 22px 14px; border-bottom:1px solid var(--beige-rule); } .cr-users-modal-title { font:600 18px var(--serif); color:var(--t); letter-spacing:-.01em; } .cr-users-modal-sub { font:400 13px var(--sans); color:var(--t3); margin-top:3px; line-height:1.4; } .cr-users-modal-bd { padding:20px 22px; overflow:auto; flex:1; } .cr-users-modal-ft { display:flex; align-items:center; gap:8px; padding:14px 22px; border-top:1px solid var(--beige-rule); background:var(--beige); border-radius:0 0 14px 14px; } .cr-users-modal-ft-spacer { flex:1; } .cr-users-modal-x { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--t3); flex-shrink:0; border:none; background:none; cursor:pointer; } .cr-users-modal-x:hover { background:var(--beige); color:var(--t); } .cr-users .ru-form-input { width:100%; font:400 13px var(--sans); color:var(--t); background:#fff; border:1px solid var(--beige-b); padding:8px 11px; border-radius:8px; outline:none; transition:border-color .12s, box-shadow .12s; } .cr-users .ru-form-input:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brandL); } .cr-users-modal .ru-form-input { width:100%; font:400 13px var(--sans); color:var(--t); background:#fff; border:1px solid var(--beige-b); padding:8px 11px; border-radius:8px; outline:none; } .cr-users-modal .ru-form-input:focus { border-color:var(--brand); box-shadow:0 0 0 2px var(--brandL); } .cr-users-modal textarea.ru-form-input { resize:vertical; min-height:64px; line-height:1.5; font-family:var(--mono); font-size:13px; } /* ============================================================ CR-perf · Extracted from Users.jsx inline-style hot spots. Each class below replaces a pattern that appeared 2-3 times in the audit (May 2026). Single-use bespoke styles remain inline because extracting them adds maintenance overhead without bundle-size or render-perf payoff. ============================================================ */ .cr-users .u-link-brand { color: var(--brand); font-weight: 600; text-decoration: none; font-size: 12.5px; } .cr-users .u-chip-text { padding: 1.5px 8px; font-family: var(--sans); font-size: 11px; text-transform: none; letter-spacing: 0; } .cr-users .u-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; } .cr-users .u-meta-11 { font: 400 11px var(--sans); color: var(--t4); } .cr-users .u-empty-copy { font: 400 13px var(--sans); color: var(--t3); max-width: 480px; margin: 0 auto 16px; } .cr-users .u-bl2 { color: var(--bl2); } .cr-users .u-minw-280 { min-width: 280px; } .cr-users .u-ic-13-muted { width: 13px; height: 13px; display: inline-flex; color: var(--t4); } .cr-users .u-card-bare { padding: 0; overflow: hidden; } .cr-users .u-f-115 { font-size: 11.5px; } .cr-users .u-section-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; } .cr-users .u-split-18 { display: flex; gap: 18px; align-items: flex-start; } .cr-users .u-block-13 { width: 13px; height: 13px; display: inline-block; } .cr-users .u-baseline-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cr-users .u-h1-serif { font: 600 32px/1.05 var(--serif); letter-spacing: -.02em; color: var(--t); margin: 0; } .cr-users .u-pgh-actions { display: flex; gap: 8px; padding-top: 14px; flex-shrink: 0; align-items: center; } .cr-users .u-vsep { width: 1px; height: 22px; background: var(--beige-b); margin: 0 2px; } .cr-users .u-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--beige); border: 1px solid var(--beige-b); border-radius: 8px; } .cr-users .u-ic-tile-30 { width: 30px; height: 30px; border-radius: 8px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; font: 600 13px var(--sans); } .cr-users .u-mono-t { font-family: var(--mono); color: var(--t); } .cr-users .u-note-italic { font: 400 12.5px var(--sans); color: var(--t4); font-style: italic; padding: 12px 14px; background: var(--beige); border-radius: 8px; } .cr-users .u-input-text { flex: 1; font: 500 12.5px var(--sans); color: var(--t); } .cr-users .u-meta-mono { font: 400 11px var(--mono); color: var(--t4); } .cr-users .u-fieldL { font: 500 12px var(--sans); color: var(--t2); display: block; margin-bottom: 5px; } /* ===================== control-room-agents.css ===================== */ /* ============================================================ Control Room · Agents page — page-specific styles CR-perf (May 2026): extracted from Agents.jsx inline-style hot spots. Multi-occurrence patterns (2-3×) moved here. Prefix: `.ag-` to avoid collisions. ============================================================ */ /* Subtle inline action button (smaller than btn-link, used in table rows next to entity names) */ .ag-row-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t2); cursor: pointer; } /* Tiny muted caption (mono+upper "label" cap above values) */ .ag-meta-11 { font-size: 11px; color: var(--t4); } .ag-section-label { font: 500 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; } /* Two-up grid used in detail panels */ .ag-grid-2col-12mt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } /* Hint strip below tabs / above content */ .ag-hint-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-top: 16px; background: var(--beige); border: 0.5px solid var(--beige-b); border-radius: 8px; font-size: 12.5px; color: var(--t3); } /* Muted body-2 (var(--bl2)) — used inline frequently */ .ag-c-bl2 { color: var(--bl2); } /* ===================== control-room-audit-log.css ===================== */ /* ============================================================ Control Room · Audit Log page — page-specific styles CR-perf (May 2026): extracted from AuditLog.jsx inline-style hot spots. Prefix: `.al-`. ============================================================ */ /* Mono inline value (timestamps, IDs in row chips) */ .al-mono-115 { font-family: var(--mono); font-size: 11.5px; } /* Row with small gap (used in filter chips, status indicators) */ .al-row-6 { display: flex; gap: 6px; align-items: center; } /* Section heading row (with icon) */ .al-section-h { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } /* Caption: small uppercase label */ .al-cap-upper { font: 500 11px var(--sans); color: var(--t3); text-transform: uppercase; letter-spacing: .06em; } /* Bulleted body list (used in "what we audit" panels) */ .al-bullet-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font: 400 12.5px var(--sans); color: var(--t2); line-height: 1.6; } /* Error row spanning the grid */ .al-err-span { color: var(--err); grid-column: 1/-1; } /* Mono accent (count badges next to filter labels) */ .al-mono-accent { margin-left: 4px; font-family: var(--mono); font-weight: 700; } /* Compact meta caption */ .al-meta-11 { font-size: 11px; color: var(--t4); white-space: nowrap; } /* Date-range input (compact) */ .al-date-input { width: 185px; font-size: 12px; } /* Body-2 color */ .al-c-bl2 { color: var(--bl2); } /* ===================== control-room-guardrails.css ===================== */ /* ============================================================ Control Room · Guardrails page — page-specific styles CR-perf (May 2026): extracted from Guardrails.jsx inline-style hot spots. Prefix: `.gr-`. ============================================================ */ /* Small caption under labels (rail descriptions, hint text) */ .gr-hint-115 { font-size: 11.5px; color: var(--t3); margin-top: 2px; } /* Inline group + checkbox row */ .gr-inline-row { display: inline-flex; align-items: center; gap: 8px; } .gr-cb-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; cursor: pointer; } /* Checkbox itself (brand-accent, fixed size) */ .gr-cb-13 { width: 13px; height: 13px; accent-color: var(--brand); } /* Chip group (e.g., entity-type or content-category chips) */ .gr-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } /* ===================== control-room-settings.css ===================== */ /* ============================================================ Control Room · Settings page — page-specific styles CR-perf (May 2026): extracted from Settings.jsx inline-style hot spots. Multi-occurrence patterns (2-4×) moved here; bespoke single-use styles remain inline. Prefix: `.set-` to avoid collisions. ============================================================ */ /* Inline-icon helper (used inside components — sits next to text and aligns to the baseline naturally). */ .set-inline-ic { display: inline; vertical-align: middle; } /* Paragraph / copy width limit */ .set-maxw-500 { max-width: 500px; } /* Typography */ .set-row-label { font-size: 13px; font-weight: 500; color: var(--t); } .set-panel-h { font-size: 15px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .set-panel-sub { font-size: 13px; color: var(--t3); margin-bottom: 16px; } .set-meta-mono { font-size: 13px; font-weight: 700; color: var(--brand); font-family: var(--mono); } .set-meta-small { display: flex; justify-content: space-between; font-size: 11px; color: var(--t4); } /* Icon tile (used at the start of each settings row) */ .set-ic-36 { width: 36px; height: 36px; flex-shrink: 0; } /* Margins */ .set-mb-24 { margin-bottom: 24px; } /* Divider line */ .set-divider { height: 1px; background: var(--bl2); margin: 0 0 24px; } /* Row layouts */ .set-row-12 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .set-split-6 { display: flex; justify-content: space-between; margin-bottom: 6px; } /* Status pill: ok tint */ .set-pill-ok { background: #E6F4EC; color: var(--ok); } /* Mono / muted color */ .set-c-bl2 { color: var(--bl2); } /* Soft cream background block */ .set-bg-cream { background: #FBF9F4; } /* ===================== control-room-tool-policies.css ===================== */ /* ============================================================ Control Room · Tool Policies page — page-specific styles CR-perf (May 2026): extracted from ToolPoliciesPage.jsx inline-style hot spots. Prefix: `.tpp-`. ============================================================ */ /* Compact mono header used on tool-policy detail cards */ .tpp-mono-header { font: 600 11px var(--mono); color: var(--t); text-transform: uppercase; letter-spacing: 0.6px; } /* Layout */ .tpp-right { display: flex; justify-content: flex-end; } .tpp-fill-col { padding: 0; display: flex; flex-direction: column; height: 100%; } .tpp-field-col { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; } /* Typography */ .tpp-body-12 { font: 500 12px var(--sans); color: var(--t); } .tpp-err-mono { font: 500 11px var(--mono); color: var(--err); } .tpp-mono-stack { display: flex; flex-direction: column; gap: 4px; font: 500 12px var(--mono); color: var(--t); } /* Card surface (used for inline tip/help boxes) */ .tpp-tipcard { padding: 12px 14px; border: 1px solid var(--beige-rule); border-radius: 6px; background: #FFFCF6; display: flex; flex-direction: column; gap: 10px; } /* Filter input (compact, used in toolbar) */ .tpp-input { padding: 6px 10px; border: 1px solid var(--beige-b); border-radius: 4px; font: 500 12px var(--sans); color: var(--t); background: #fff; outline: none; } /* Compact mono action (used in chip-action pills) */ .tpp-chip-action { font: 600 11px var(--mono); padding: 4px 10px; color: var(--t3); cursor: pointer; } /* ===================== warm-dark-mode.css ===================== */ /* ── Warm Dark Mode ────────────────────────────────────────────── Replaces the default cold-gray dark mode with a warm palette that preserves the product's beige identity. The light mode feels like a warm reading room. The dark mode should feel like the same room with the lights dimmed, not a different room entirely. Warm dark = near-black with brown undertone, cream text, amber-tinged borders. The purple brand stays but lifts slightly for contrast on dark backgrounds. Import AFTER global.css so these values override .R.dark. ─────────────────────────────────────────────────────────── */ .R.dark { /* ── Brand ── */ --brand: #7B5AFF; --brandL: #1F1A2E; --brandBg: #1E1B18; --brandGhost: #7B5AFF14; --brand-hover: #6E4FEE; --brand-tint: #1F1A2E; --brand-tint-border: #342A52; /* ── Attention ── */ --accent: #FBBF24; --accentBg: #1F1C14; /* ── Surfaces (warm browns, not cold grays) ── */ --bg: #1C1A17; --s: #242119; --sh: #2C2924; --sa: #353230; --surface-input: #242119; /* ── Text (warm cream, not stark white) ── */ --t: #E8E4DC; --t2: #C8C3B8; --t3: #9C9790; /* CR-dark-wcag-audit (May 2026): lightened --t4 from #6A6560 to #898886. * The previous value measured 2.14:1 on --bg and 2.03:1 on --s — well * below WCAG AA's 4.5:1 for normal text. #898886 measures 4.55:1 on * --bg and 4.69:1 on --s, passing AA on every dark surface. */ --t4: #898886; --t5: #4A4641; /* ── Borders (warm brown tints) ── */ --b: #3A352F; --bd: #453F38; --bl2: #2E2A25; --b-faint: #272420; /* ── Beige tokens (warm dark equivalents) ── */ --beige: #1E1B18; --beige-card: #242119; --beige-pill: #2C2924; --beige-b: #3A352F; --beige-b2: #2E2A25; --beige-rule: #272420; /* CR-dark-wcag-audit (May 2026): --beige-pg added. Without a dark * mode override, components using `background: var(--beige-pg)` * fell back to the light value #FCFBF8 (a near-white beige), which * on top of dark mode's light text rendered as unreadable. Now a * dark warm surface slightly darker than --bg, consistent with how * the light theme makes --beige-pg slightly lighter than --bg. */ --beige-pg: #16140F; /* ── Code ── */ --code-bg: #1A1815; --code-b: #2E2A25; /* ── Nav ── */ --nav-active-bg: #2C2924; --nav-active-shadow: 0 1px 2px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.2); /* ── Avatar ── */ --avatar-bg: #353230; --avatar-text: #C8C3B8; /* ── Status (slightly warmer tints) ── */ --ok: #22C55E; --ok-light: rgba(34, 197, 94, 0.10); --ok-border: rgba(34, 197, 94, 0.20); --warn: #FBBF24; --warn-light: rgba(251, 191, 36, 0.10); --warn-border: rgba(251, 191, 36, 0.20); --err: #F87171; --err-light: rgba(248, 113, 113, 0.10); --err-border: rgba(248, 113, 113, 0.20); --info: #60A5FA; --info-light: rgba(96, 165, 250, 0.10); /* CR-dark-wcag-audit (May 2026): status -bg variants added. * Without dark mode overrides, components using `background: * var(--ok-bg)` fell back to the light values (pale cream-greens * etc.), which on top of dark mode's saturated text colors rendered * at 2.0-2.3:1 — well below AA. Mapping to the same translucent * tints as -light keeps the -bg/-light split visually distinct * elsewhere while preventing the cross-theme contrast failure. */ --ok-bg: rgba(34, 197, 94, 0.10); --warn-bg: rgba(251, 191, 36, 0.10); --err-bg: rgba(248, 113, 113, 0.10); --info-bg: rgba(96, 165, 250, 0.10); /* ── Decorative ── */ --purple: #C4B5FD; --cyan: #22D3EE; --rose: #FDA4AF; --orange: #FDBA74; /* ── Tailwind @theme overrides ── */ --color-brand: #7B5AFF; --color-brand-light: #1F1A2E; --color-brand-bg: #1E1B18; --color-text: #E8E4DC; --color-text-2: #C8C3B8; --color-text-3: #9C9790; --color-text-4: #6A6560; --color-surface: #242119; --color-surface-hover: #2C2924; --color-border: #3A352F; --color-border-2: #453F38; --color-bg: #1C1A17; } /* ── Workroom-specific warm dark overrides ─────────────────── */ /* Page background — warm instead of cold */ .R.dark .flex-1, .R.dark [class*="overflow-y-auto"] { color-scheme: dark; } /* Sidebar — warm dark surface */ .R.dark .S-brand-name { color: var(--t2); } /* Chat messages — warm card backgrounds */ .R.dark [class*="msg-bubble"] { background: var(--s); } /* Working session document pane */ .R.dark [class*="bg-[var(--bg-sidebar"]], .R.dark [data-testid="working-session-doc"] { background: var(--bg) !important; } /* A2UI cards */ .R.dark .a2ui-card { background: var(--s); border-color: var(--b); } .R.dark .a2ui-card-header { background: var(--sh); border-color: var(--b); } .R.dark .a2ui-kv-row { border-color: var(--sh); } .R.dark .a2ui-badge-ok { background: #0A2614; color: #4ade80; } .R.dark .a2ui-badge-err { background: #2A0F0F; color: #f87171; } .R.dark .a2ui-badge-info { background: #0F1A2E; color: #60a5fa; } .R.dark .a2ui-cta { background: var(--sh); } .R.dark .a2ui-cta:hover { background: var(--sa); } .R.dark .a2ui-delta-up { background: #0A2614; color: #4ade80; } /* Citation markers — slightly lighter on dark */ .R.dark .citation-marker { background: var(--brand) !important; box-shadow: 0 1px 3px rgba(123, 90, 255, 0.35) !important; ring: none; } /* KPI cards with page accent */ .R.dark .kpi-card { background: var(--sh); border-color: var(--b); } /* Source evidence card */ .R.dark [class*="SourceEvidence"], .R.dark [style*="beige-card"] { background: var(--s) !important; border-color: var(--b) !important; } /* Empty state hint cards */ .R.dark [style*="beige-pill"] { background: var(--sh) !important; border-color: var(--b) !important; } /* Filter chips */ .R.dark .filter-chip { background: var(--s); border-color: var(--b); color: var(--t3); } .R.dark .filter-chip:hover, .R.dark .filter-chip.active { background: var(--sh); border-color: var(--bd); } /* Scrollbar warm tint */ .R.dark ::-webkit-scrollbar-thumb { background: var(--b); border-radius: 4px; } .R.dark ::-webkit-scrollbar-track { background: transparent; } /* Input fields */ .R.dark input, .R.dark textarea, .R.dark select { background: var(--surface-input); color: var(--t); border-color: var(--b); } .R.dark input::placeholder, .R.dark textarea::placeholder { color: var(--t4); } /* Buttons */ .R.dark button[class*="border-border"] { border-color: var(--b); } .R.dark button[class*="bg-surface"] { background: var(--s); } /* ============ WORKROOM (features/workroom/styles) ============ */ /* --- workroom.css --- */ /* CR-413 follow-up (wiring spec Change 1): warm-beige page background. The workroom content area (.M class) defaults to browser-white without this rule; setting it to var(--bg) gives every page the warm-beige surface so white cards "float" on top with visual depth. */ .M { background: var(--bg); min-height: 0; } /* ═══════════════════════════════════════════════════════════════ ACE (Employee Workspace) - App-Specific Styles Extracted from employee-workspace/src/styles/global.css and employee-workspace/src/styles/a2ui-styles.css NOTE: Base layout (.R, .S, .M, .TB), CSS variables, reset, scrollbar, dropdown (.DD), avatar (.av), and notification dot (.TB-notif-dot) are already in global.css -- not duplicated here. ═══════════════════════════════════════════════════════════════ */ /* ── Z-Index Scale ─────────────────────────────────────────── */ :root { --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-nested-dd: 500; --z-overlay: 900; --z-context-menu: 1000; --z-modal: 1100; --z-topbar: 1200; } /* ── ACE Sidebar Extensions (CR-531 — DEAD CSS REMOVED) ──────────── The block below previously defined `.S-top`, `.S-brand`, `.S-brand-mark`, `.S-brand-name` for an earlier iteration of the workroom sidebar. WorkroomSidebar.jsx has since been refactored and no longer uses any of those classes — but because workroom.css loads after global.css globally (not scoped to workroom routes), the `.S-brand-mark { background: white }` rule was overriding global.css's `.S-brand-mark { background: var(--brand) }`. The Studio sidebar (Sidebar.jsx:159) renders the Katonic logo via `` inside `.S-brand-mark` expecting a purple background — white background made the white logo invisible on apollo. CR-531 removes the dead rules entirely; global.css's purple `.S-brand-mark` definition is now the only one and Studio's logo renders correctly. If a future workroom redesign needs different sidebar-mark styling, it should use a workroom-scoped class (e.g. `.wr-brand-mark`) and JSX markup, not re-add a class collision with Studio. ─────────────────────────────────────────────────────────────── */ .S-tog, .S-new { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--t3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; } .S-tog:hover, .S-new:hover { background: var(--brandL); } .S-new { background: var(--brandL); color: var(--brand); } /* Sidebar Tabs */ .S-tabs { display: flex; padding: 0 10px; gap: 2px; margin-bottom: 6px; } .S-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0; border-radius: 8px; border: none; background: none; font-size: 12px; font-weight: 500; color: var(--t3); transition: all .15s; } .S-tab.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .S-tab:hover:not(.on) { background: var(--sh); } /* Sidebar List */ .S-list { flex: 1; overflow-y: auto; padding: 0 6px; } .S-lbl { padding: 10px 8px 4px; font-size: 10px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .5px; } .S-it-t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .S-it-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--brandL); color: var(--brand); } .S-it-dot { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: 700; flex-shrink: 0; } /* ── Sidebar Chat Item Enhancements ─────────────────────────── */ /* Three-dot menu trigger — always in DOM, shown via opacity */ .S-it-dots { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: var(--t3); cursor: pointer; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity .12s, background .12s, color .12s; z-index: 2; } /* Show on hover of parent row */ .S-it:hover .S-it-dots, /* Show on active (currently open) chat */ .S-it.on .S-it-dots, /* Show when menu is open */ .S-it.menu-open .S-it-dots, /* Show when explicitly marked visible */ .S-it-dots.visible { opacity: 1; pointer-events: auto; } .S-it-dots:hover { background: var(--sh); color: var(--t); } /* Gradient fade on the text side to keep dots readable */ .S-it::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48px; background: linear-gradient(to right, transparent, var(--brandBg)); border-radius: 0 8px 8px 0; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 1; } .S-it:hover::after, .S-it.on::after, .S-it.menu-open::after { opacity: 1; } /* Active chat uses brandL background so the gradient should match */ .S-it.on::after { background: linear-gradient(to right, transparent, var(--brandL)); } /* ── Context Menu (three-dot popover) ──────────────────────── */ .S-ctx { position: fixed; z-index: var(--z-context-menu); min-width: 172px; padding: 5px; background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .10), 0 0 0 1px rgba(0, 0, 0, .03); animation: S-ctxIn .14s cubic-bezier(.16, 1, .3, 1); } @keyframes S-ctxIn { from { opacity: 0; transform: scale(.92) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } .S-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: none; border-radius: 8px; background: none; color: var(--t2); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .1s, color .1s; text-align: left; line-height: 1; } .S-ctx-item:hover { background: var(--sh); color: var(--t); } .S-ctx-item svg { color: var(--t3); flex-shrink: 0; transition: color .1s; } .S-ctx-item:hover svg { color: var(--t2); } /* Starred icon in context menu */ .S-ctx-icon--starred { display: flex; align-items: center; color: #e8a308; flex-shrink: 0; } .S-ctx-item:hover .S-ctx-icon--starred { color: #d49a07; } /* Danger action (Delete) */ .S-ctx-item--danger { color: var(--err); } .S-ctx-item--danger svg { color: var(--err); opacity: .85; } .S-ctx-item--danger:hover { background: color-mix(in srgb, var(--err) 8%, transparent); color: var(--err); } .S-ctx-item--danger:hover svg { color: var(--err); opacity: 1; } .S-ctx-sep { height: 1px; margin: 4px 8px; background: var(--bl2); } /* ── Modal (shared overlay + shell) ────────────────────────── */ .S-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; animation: S-overlayIn .15s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } @keyframes S-overlayIn { from { opacity: 0; } to { opacity: 1; } } .S-modal { width: 420px; max-width: calc(100vw - 32px); padding: 28px; background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, .04), 0 20px 50px rgba(0, 0, 0, .16); animation: S-modalIn .2s cubic-bezier(.16, 1, .3, 1); } @keyframes S-modalIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Icon badge at top of modal */ .S-modal-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .S-modal-icon--rename { background: var(--brandL); color: var(--brand); } .S-modal-icon--delete { background: color-mix(in srgb, var(--err) 12%, transparent); color: var(--err); } .S-modal-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--t); line-height: 1.3; } .S-modal-desc { margin: 0 0 20px; font-size: 14px; color: var(--t3); line-height: 1.55; } .S-modal-desc strong { color: var(--t2); font-weight: 600; } /* Modal text input (rename) */ .S-modal-input { display: block; width: 100%; padding: 10px 12px; border: 1.5px solid var(--bl2); border-radius: 12px; background: var(--s); color: var(--t); font-family: var(--sans); font-size: 14px; font-weight: 500; outline: none; margin-bottom: 20px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; } .S-modal-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); } .S-modal-input::placeholder { color: var(--t4); } /* Action buttons row */ .S-modal-actions { display: flex; justify-content: flex-end; gap: 8px; } .S-modal-btn { padding: 9px 20px; border-radius: 12px; border: 1px solid var(--bl2); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s; line-height: 1; } .S-modal-btn:disabled { opacity: .45; cursor: not-allowed; } .S-modal-btn--cancel { background: var(--s); color: var(--t2); } .S-modal-btn--cancel:hover { background: var(--sh); color: var(--t); } .S-modal-btn--primary { background: var(--brand); color: white; border-color: var(--brand); } .S-modal-btn--primary:hover:not(:disabled) { filter: brightness(1.08); } .S-modal-btn--delete { background: var(--err); color: white; border-color: var(--err); } .S-modal-btn--delete:hover { filter: brightness(1.08); } /* ── ACE Topbar Extensions ────────────────────────────────────── */ .TB-l { display: flex; align-items: center; gap: 8px; } .TB-r { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* doubled class beats any single-class rule that sets bg/color on the button */ .TB-btn-active.TB-btn-active { background: var(--sh); color: var(--brand); } /* Model Selector (topbar) */ .MS { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); font-size: 13px; font-weight: 500; color: var(--t); transition: border-color .12s; } .MS:hover { border-color: var(--brand); } .dot { border-radius: 50%; flex-shrink: 0; } /* Notification Dropdown */ .notif-wrap { position: relative; } .notif-badge { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--err); border: 2px solid var(--s); } .notif-dd { position: absolute; top: 44px; right: -8px; width: 340px; background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 200; overflow: hidden; } .notif-dd-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bl2); } .notif-dd-t { font-size: 14px; font-weight: 600; color: var(--t); } .notif-dd-clear { font-size: 11px; color: var(--brand); background: none; border: none; font-weight: 500; cursor: pointer; } .notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bl2); } .notif-item:last-child { border-bottom: none; } .notif-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .notif-item-body { flex: 1; } .notif-item-t { font-size: 13px; color: var(--t2); line-height: 1.5; } .notif-item-time { font-size: 11px; color: var(--t4); margin-top: 2px; } /* ── Zone Switcher Dropdown ──────────────────────────────────── */ .DD-a { top: 44px; right: 0; min-width: 220px; white-space: nowrap; } .DD-opt-n { font-size: 13px; font-weight: 500; color: var(--t); } /* ── Welcome Page ─────────────────────────────────────────────── */ .W { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; overflow-y: auto; gap: 24px; } .W-top { text-align: center; } .W-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .W-greet { font-size: 26px; font-weight: 600; color: var(--t); margin-bottom: 6px; } .W-greet-sub { font-size: 14px; color: var(--t3); line-height: 1.6; } .W-section { width: 100%; max-width: 640px; } .W-section-label { font-size: 11px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } .W-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .W-s { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); text-align: left; font-size: 13px; color: var(--t2); transition: all .15s; cursor: pointer; line-height: 1.4; } .W-s:hover { border-color: var(--brand); background: var(--brandL); color: var(--brand); } .W-s-i { width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .W-agent-av { width: 32px; height: 32px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* Capabilities grid */ .W-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .W-cap { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--bl2, #e2e8f0); background: var(--s, #fff); text-align: left; cursor: default; transition: all .15s; display: flex; align-items: flex-start; gap: 12px; } .W-cap:hover { border-color: var(--t4, #94a3b8); transform: translateY(-1px); box-shadow: var(--shadow-xs); } .W-cap:active { transform: translateY(0); box-shadow: none; } .W-cap-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: var(--brandL, #ede9fe); color: var(--brand, #5c31ff); } .W-cap-t { font-size: 13px; font-weight: 600; color: var(--t, #1e293b); margin-bottom: 2px; } .W-cap-d { font-size: 12px; color: var(--t3, #64748b); line-height: 1.45; } /* Entrance animations */ .w-anim { animation: wFadeUp .4s ease both; } .w-anim-mark { animation: wFadeUp .3s ease both; } .w-anim-d1 { animation: wFadeUp .4s ease .05s both; } .w-anim-d2 { animation: wFadeUp .4s ease .1s both; } .w-anim-d4 { animation: wFadeUp .4s ease .2s both; } .w-anim-card { animation: wFadeUp .4s ease both; } .w-anim-c1 { animation-delay: .12s; } .w-anim-c2 { animation-delay: .16s; } .w-anim-c3 { animation-delay: .2s; } .w-anim-c4 { animation-delay: .24s; } .w-anim-c5 { animation-delay: .28s; } .w-anim-c6 { animation-delay: .32s; } .w-anim-c7 { animation-delay: .36s; } @keyframes wFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ── Input Bar ────────────────────────────────────────────────── */ .IW { padding: 0 32px 20px; max-width: 740px; width: 100%; margin: 0 auto; overflow: visible; } .IB { border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); padding: 12px 14px 8px; transition: border-color .15s; box-shadow: var(--shadow-xs); overflow: visible; position: relative; } .IB:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandL); } .IB.drag-over { border-color: var(--brand); background: var(--brandL); } .IB textarea { width: 100%; border: none; outline: none; resize: none; background: none; font-family: var(--sans); font-size: 14px; color: var(--t); line-height: 1.5; min-height: 24px; max-height: 200px; } .IB textarea::placeholder { color: var(--t4); } /* CR-454 (Katonic 7 design — composer card): horizontal divider between the textarea and the bottom toolbar row, matching the target System Pass screenshot. Pre-CR the toolbar floated under the textarea with no visual separation; the design has a thin beige rule under the textarea. */ .IB-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--beige-rule, #F2EFE9); /* CR-466: allow the row to wrap when the composer's container is narrower than the chips + right-side controls (e.g. the welcome page composer constrained by .IW max-width). Without wrap, the chips overflow horizontally; with wrap on each individual chip (flex-wrap on .IB-caps), only the chips wrap but the right-side picker still hugs the first row. Cleanest behavior is to wrap the whole IB-bot so chips stay on row 1 and the model picker drops to row 2 when needed. */ flex-wrap: wrap; } .IB-bot > .IB-caps { flex: 1 1 auto; min-width: 0; } .IB-bot > .IB-right { flex: 0 0 auto; } .IB-caps { display: flex; gap: 4px; flex-wrap: wrap; } .IB-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .cap { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--bl2); background: none; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .12s; } .cap:hover { border-color: var(--brand); color: var(--brand); } .cap.on { background: var(--brandL); border-color: var(--brand); color: var(--brand); font-weight: 600; } .cap.res.on { background: #FEF3C7; border-color: #F59E0B; color: #D97706; } .cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .IB-btns { display: flex; gap: 2px; } .ib { width: 32px; height: 32px; border-radius: 8px; border: none; background: none; color: var(--t3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; } .ib:hover { background: var(--sh); color: var(--t); } .ib-s { background: var(--brand); color: white; border-radius: 50%; width: 28px; height: 28px; } .ib-s:hover { background: var(--brandL); color: var(--brand); } .ib-s.ib-stop { background: var(--t3); } .ib-s.ib-stop:hover { background: var(--t2); } /* File attachments */ .IB-files { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .IB-file { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; border-radius: 8px; background: var(--sh); border: 1px solid var(--bl2); } .IB-file-ic { font-size: 16px; } .IB-file-info { min-width: 0; } .IB-file-name { font-size: 11px; font-weight: 500; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } .IB-file-size { font-size: 10px; color: var(--t4); } .IB-file-x { border: none; background: none; color: var(--t4); cursor: pointer; padding: 0; display: flex; } /* ── Model Selector in InputBar (Claude-style) ────────────────── */ .IB-model-wrap { position: relative; z-index: 100; } .IB-model-btn { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 8px; border: 1px solid var(--bl2); background: var(--s); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .12s; white-space: nowrap; } .IB-model-btn:hover { border-color: var(--brand); color: var(--t); background: var(--sh); } .IB-model-btn.open { border-color: var(--brand); color: var(--brand); background: var(--brandL); } .IB-model-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; } /* Dropdown (opens upward from input bar) — single panel, inline expansion */ .IB-model-dd { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: var(--z-context-menu); max-width: calc(100vw - 24px); /* Cap the popup's vertical extent so it never clips above the viewport. 12px breathing room from the top of the window — the inner panel's max-height (below) handles the actual scrolling. */ max-height: calc(100vh - 100px); } .IB-model-dd-primary { width: max-content; min-width: 380px; max-width: min(480px, calc(100vw - 24px)); background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; box-shadow: var(--shadow-md); padding: 4px; /* Leave headroom above (popup top) AND below (input bar) so the first model in the list is always fully visible even with 14+ entries. */ max-height: calc(100vh - 160px); display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; } .IB-model-dd-primary > *:not(.IB-model-dd-head):not(.IB-model-dd-all-list) { flex-shrink: 0; } .IB-model-dd-more { justify-content: space-between; } /* Head row: back button + search, shown when "All models" view is active */ .IB-model-dd-head { display: flex; align-items: center; gap: 6px; padding: 4px 4px 2px; flex-shrink: 0; } .IB-model-dd-back { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bl2); border-radius: 8px; background: var(--s); color: var(--t3); cursor: pointer; transition: background .1s, color .1s; } .IB-model-dd-back:hover { background: var(--sh); color: var(--t); } .IB-model-dd-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--bl2); border-radius: 8px; background: var(--s); } .IB-model-dd-search svg { width: 14px; height: 14px; color: var(--t4); flex-shrink: 0; } .IB-model-dd-search input { flex: 1; border: none; outline: none; background: none; font-family: var(--sans); font-size: 13px; color: var(--t); min-width: 0; } .IB-model-dd-search input::placeholder { color: var(--t4); } .IB-model-dd-all-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--bl2) transparent; } .IB-model-dd-all-list::-webkit-scrollbar, .IB-model-dd-primary::-webkit-scrollbar { width: 5px; } .IB-model-dd-all-list::-webkit-scrollbar-track, .IB-model-dd-primary::-webkit-scrollbar-track { background: transparent; } .IB-model-dd-all-list::-webkit-scrollbar-thumb, .IB-model-dd-primary::-webkit-scrollbar-thumb { background: var(--bl2); border-radius: 4px; } .IB-model-dd-all-list::-webkit-scrollbar-thumb:hover, .IB-model-dd-primary::-webkit-scrollbar-thumb:hover { background: var(--t4); } .IB-model-dd-empty { padding: 20px 12px; text-align: center; font-size: 12px; color: var(--t4); } .IB-model-dd-lbl { font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px 4px; user-select: none; } .IB-model-dd-opt { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-family: var(--sans); transition: background .1s; } .IB-model-dd-opt > svg, .IB-model-dd-opt > .ti { margin-top: 2px; flex-shrink: 0; } .IB-model-dd-opt:hover { background: var(--sh); } .IB-model-dd-opt.sel { background: var(--brandL); } .IB-model-dd-opt-n { font-size: 13px; font-weight: 500; color: var(--t); } .IB-model-dd-opt-d { font-size: 11px; color: var(--t4); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Option C: model name wraps to next line on long names instead of truncating. */ .IB-model-dd-opt .IB-model-dd-opt-name { font-size: 13px; font-weight: 500; color: var(--t); white-space: normal; word-break: break-word; overflow-wrap: anywhere; line-height: 1.4; } .IB-model-dd-hr { height: 1px; background: var(--bl2); margin: 4px 8px; } /* Deep Research indicator */ .IB-dr-indicator { display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 8px; background: #FEF3C7; border: 1px solid #F59E0B; font-size: 13px; font-weight: 600; color: #D97706; white-space: nowrap; } .IB-dr-indicator .cdot { width: 6px; height: 6px; border-radius: 50%; background: #117A45; } /* Mention dropdown */ .mention-dd { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px; background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; box-shadow: var(--shadow-md); z-index: 100; overflow: hidden; } /* ── Chat Page ────────────────────────────────────────────────── */ .chat-scroll { flex: 1; overflow-y: auto; padding: 20px 32px; } .chat-inner { max-width: 740px; margin: 0 auto; } /* Messages */ .msg { display: flex; gap: 12px; margin-bottom: 20px; } .msg-av { width: 28px; height: 28px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .msg-av.user { background: var(--brand); color: white; font-size: 10px; font-weight: 700; } .msg-av.bot { background: var(--brandL); color: var(--brand); } .msg-body { flex: 1; min-width: 0; } .msg-name { font-size: 12px; font-weight: 600; color: var(--t); margin-bottom: 3px; } .msg-text { font-family: var(--serif); font-size: 15px; color: var(--t2); line-height: 1.75; } .msg-text p { margin-bottom: 8px; } .msg-text strong { font-weight: 600; color: var(--t); } .msg-text a { color: var(--brand); } /* Markdown rendered content */ .ec-h1 { font-size: 20px; font-weight: 600; color: var(--t); margin: 16px 0 8px; } .ec-h2 { font-size: 17px; font-weight: 600; color: var(--t); margin: 14px 0 6px; } .ec-h3 { font-size: 15px; font-weight: 600; color: var(--t); margin: 12px 0 4px; } .ec-h4 { font-size: 14px; font-weight: 600; color: var(--t); margin: 10px 0 4px; } .ec-code { background: var(--code-bg); border-radius: 12px; padding: 14px 16px; overflow-x: auto; margin: 8px 0; } .ec-code code { font-family: var(--mono); font-size: 12px; color: #E7E5E4; line-height: 1.7; } .ec-inline-code { font-family: var(--mono); font-size: 12px; background: var(--sh); padding: 1px 5px; border-radius: 4px; color: var(--brand); } .ec-ul, .ec-ol { padding-left: 20px; margin: 6px 0; } .ec-ul li, .ec-ol li { margin-bottom: 4px; line-height: 1.6; } .ec-link { color: var(--brand); text-decoration: underline; } .ec-hr { border: none; border-top: 1px solid var(--bl2); margin: 12px 0; } .ec-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; } .ec-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--bl2); font-weight: 600; color: var(--t); background: var(--sh); } .ec-table td { padding: 6px 12px; border-bottom: 1px solid var(--bl2); color: var(--t2); line-height: 1.5; } .ec-table tbody tr:hover { background: var(--sh); } .ec-table tbody tr:last-child td { border-bottom: none; } .ec-markdown p { margin-bottom: 8px; color: var(--t2); } .ec-markdown strong { font-weight: 600; color: var(--t); } /* Defensive: ensure the markdown artifact viewer always inherits the theme. Inline-style fix exists in ArtifactPanel.jsx but a stale .bg-white class was bleeding through during build; doubled class specificity [0,2,0] beats Tailwind's single-class .bg-white [0,1,0]. */ .ec-markdown.ec-markdown { background: var(--s); color: var(--t); } .ec-markdown li { color: var(--t2); } .ec-markdown blockquote { color: var(--t3); border-left: 3px solid var(--bl2); padding-left: 12px; } /* Citation tag */ .cite-tag { font-size: 10px; color: var(--brand); cursor: pointer; } /* RAG step indicators */ .rag-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 10px 14px; background: var(--sh); border-radius: 12px; } .rag-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); } .rag-step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: ragPulse 1s ease infinite; } .rag-step.done .rag-step-dot { background: var(--ok); animation: none; } @keyframes ragPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } /* RAG sources */ .rag-sources { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .cite-src { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--bl2); background: var(--s); font-size: 12px; color: var(--t2); cursor: pointer; transition: all .12s; } .cite-src:hover { border-color: var(--brand); color: var(--brand); } /* Streaming cursor */ .stream-cursor { display: inline-block; width: 2px; height: 16px; background: var(--brand); animation: blink .8s step-end infinite; vertical-align: middle; margin-left: 2px; } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } /* Tool calls */ .tool-call { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--sh); margin: 6px 0; font-size: 12px; color: var(--t3); font-family: var(--mono); } .tool-call-spin { width: 14px; height: 14px; border: 2px solid var(--bl2); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Message actions */ .ma-acts { display: flex; align-items: center; gap: 2px; margin-top: 8px; opacity: 0; transition: opacity .15s; } .msg:hover .ma-acts { opacity: 1; } .mact { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--t4); display: flex; align-items: center; justify-content: center; transition: all .1s; } .mact:hover { background: var(--sh); color: var(--t2); } .mact.voted { color: var(--brand); } .mact-label { width: auto; gap: 4px; padding: 0 8px; font-size: 11px; } .mact-label.brand { color: var(--brand); text-decoration: none; } .ma-cap { font-size: 10px; color: var(--t4); padding: 2px 8px; background: var(--sh); border-radius: 4px; margin-left: 8px; } /* ── Thread / Chat Container ──────────────────────────────────── */ .TH { flex: 1; overflow-y: auto; width: 100%; } .TH-inner { max-width: 800px; margin: 0 auto; padding: 20px 32px; } /* ── Message Variants ─────────────────────────────────────────── */ .msg.mu { justify-content: flex-end; } .mu-t { background: color-mix(in srgb, var(--brand) 10%, var(--sa, #f5f5f5)); color: var(--t); padding: 10px 16px; border-radius: 16px 18px 4px 18px; font-size: 14px; line-height: 1.6; max-width: 600px; border: 1px solid color-mix(in srgb, var(--brand) 15%, transparent); } .msg.ma { flex-direction: column; gap: 4px; } .ma-n { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t); margin-bottom: 2px; } /* CR-465 (Katonic 7 design — ScrollToBottom pill): floating "New message ↓" pill positioned at the bottom-right of the chat container. Pre-CR-465 the `.scroll-bottom-fab` and `.scroll-bottom-pill` classes had no CSS at all — the pill fell back to inline document flow and rendered at the TOP of the chat content area as a plain button, breaking the layout. Position is `fixed` because the chat scroll container handles its own overflow; `bottom: 100px` keeps the pill above the input composer; `right: 32px` aligns with the chat content padding. z-index sits above the composer (50) so the pill is always reachable. */ .scroll-bottom-fab { /* Centered horizontally above the composer (was anchored to the right edge, which collided with the composer's right-side attach / mic controls and read as an unrelated floating chip). left:50% + translateX(-50%) keeps it perfectly centered on any viewport width. */ position: fixed; bottom: 120px; left: 50%; transform: translateX(-50%); z-index: 60; pointer-events: none; /* scope clicks to the pill itself */ } .scroll-bottom-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9999px; background: var(--surface, #fff); color: var(--t, #171716); border: 1px solid var(--beige-b, #EAE3D4); font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 12px rgba(20, 20, 30, 0.08), 0 1px 3px rgba(20, 20, 30, 0.04); transition: transform .12s, box-shadow .12s; } .scroll-bottom-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20, 20, 30, 0.12), 0 2px 4px rgba(20, 20, 30, 0.06); } .scroll-bottom-pill svg { width: 12px; height: 12px; color: var(--t3, #76726B); } .ma-body { font-family: var(--serif); font-size: 15px; color: var(--t2); line-height: 1.75; } .ma-body p { margin-bottom: 8px; } .ma-body strong { font-weight: 600; color: var(--t); } .ma-body a { color: var(--brand); } /* Serif font for AI response text (StreamingMarkdown path) */ .msg.ma .streaming-markdown { font-family: var(--serif); font-size: 15px; color: var(--t2); line-height: 1.75; } .msg.ma .streaming-markdown p { font-family: var(--serif); font-size: 15px; line-height: 1.75; margin-bottom: 8px; } .msg.ma .streaming-markdown strong { font-weight: 600; color: var(--t); } .msg.ma .streaming-markdown a { color: var(--brand); } /* ── Agent Header (in-chat) ───────────────────────────────────── */ .AH { display: flex; align-items: center; gap: 10px; padding: 12px 0 16px; border-bottom: 1px solid var(--bl2); margin-bottom: 16px; } .AH-av { width: 36px; height: 36px; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .AH-name { font-size: 15px; font-weight: 600; color: var(--t); } .AH-role { font-size: 12px; color: var(--t3); } /* ── Agent Routing Status ─────────────────────────────────────── */ .agent-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t3); padding: 8px 0; } .agent-status-spinner { width: 14px; height: 14px; border: 2px solid var(--bl2); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; } .agent-route-in { color: var(--t3); } .agent-switch-av { flex-shrink: 0; } /* ── Citation Sources ─────────────────────────────────────────── */ .cite-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .cite-num { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } /* ── Streaming Indicator ──────────────────────────────────────── */ .msg.stream { font-size: 12px; color: var(--t4); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .stream-dots { display: flex; gap: 3px; } .stream-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t4); animation: streamDot 1.2s ease infinite; } .stream-dot:nth-child(2) { animation-delay: .2s; } .stream-dot:nth-child(3) { animation-delay: .4s; } @keyframes streamDot { 0%,80%,100%{opacity:.3} 40%{opacity:1} } /* ── RAG Progress (rp) ────────────────────────────────────────── */ .rp { padding: 12px 16px; background: var(--sh); border-radius: 12px; margin-bottom: 10px; } .rp-t { font-size: 13px; font-weight: 600; color: var(--t); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .rp-steps { display: flex; flex-direction: column; gap: 6px; } .rp-step { display: flex; align-items: center; gap: 8px; font-size: 12px; } .rp-dot { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rp-dot.active { background: var(--brandL); color: var(--brand); animation: ragPulse 1s ease infinite; } .rp-dot.done { background: #DCFCE7; color: #16A34A; } .rp-dot.pending { background: var(--sa); color: var(--t4); } .rp-label { color: var(--t3); } .rp-label.active { color: var(--t); font-weight: 500; } .rp-label.done { color: var(--t3); } .rp-label.pending { color: var(--t4); } .rp-conns { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; } .rp-conn { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--t4); padding: 2px 6px; border-radius: 4px; background: var(--s); } .rp-conn-logo { width: 14px; height: 14px; border-radius: 4px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 700; flex-shrink: 0; } /* ── Reasoning Engine (re) ────────────────────────────────────── */ .re-container { margin-bottom: 8px; } .re-container.re-done { margin-bottom: 6px; } .re-summary { border-radius: 12px; } .re-summary-bar { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--t3); padding: 6px 0; list-style: none; } .re-summary-bar::-webkit-details-marker { display: none; } .re-summary-icon { color: #16A34A; display: flex; } .re-summary-text { display: flex; align-items: center; gap: 4px; } .re-summary-names { font-size: 11px; color: var(--t4); margin-left: 2px; } .re-summary-chevron { margin-left: auto; color: var(--t4); transition: transform .15s; } details[open] .re-summary-chevron { transform: rotate(180deg); } .re-detail-list { padding: 4px 0 4px 22px; display: flex; flex-direction: column; gap: 6px; } .re-detail-step { font-size: 12px; } .re-detail-head { display: flex; align-items: center; gap: 5px; color: var(--t3); } .re-detail-check { color: #16A34A; display: flex; } .re-detail-name { font-weight: 500; color: var(--t2); } .re-detail-data { font-family: var(--mono); font-size: 10px; color: var(--t4); background: var(--sh); padding: 4px 8px; border-radius: 6px; margin-top: 3px; overflow: hidden; white-space: pre-wrap; word-break: break-all; } .re-live { padding: 10px 14px; background: var(--sh); border-radius: 12px; } .re-live-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .re-live-orb { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: ragPulse 1s ease infinite; } .re-live-label { font-size: 12px; font-weight: 600; color: var(--t); } .re-live-count { font-size: 11px; color: var(--t4); margin-left: auto; } .re-live-steps { display: flex; flex-direction: column; gap: 4px; } .re-step { display: flex; align-items: center; gap: 6px; font-size: 12px; } .re-step-indicator { width: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .re-step-spinner { width: 12px; height: 12px; border: 2px solid var(--bl2); border-top-color: var(--brand); border-radius: 50%; animation: spin .6s linear infinite; } .re-step-done { color: #16A34A; display: flex; } .re-step-text { color: var(--t3); display: flex; align-items: center; gap: 3px; } .re-step-action { font-weight: 500; color: var(--t2); } .re-step-name { font-weight: 500; color: var(--brand); } .re-step-result-label { font-weight: 400; color: var(--t4); } /* ── Code Block ───────────────────────────────────────────────── */ .code-blk { border-radius: 12px; overflow: hidden; margin: 8px 0; border: 1px solid var(--bl2); } .code-blk-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--sh); } .code-blk-lang { font-size: 11px; font-weight: 500; color: var(--t3); font-family: var(--mono); } .code-blk-copy { display: flex; align-items: center; gap: 4px; border: none; background: none; font-size: 11px; font-family: var(--sans); color: var(--t4); cursor: pointer; } .code-blk-copy:hover { color: var(--t2); } .code-blk-body { background: var(--code-bg); padding: 14px 16px; overflow-x: auto; } .code-blk-body pre { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #E7E5E4; margin: 0; } /* ── Right Panel ──────────────────────────────────────────────── */ .RP { border-left: 1px solid var(--bl2); background: var(--s); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; position: relative; transition: width .25s cubic-bezier(.4, 0, .2, 1); } .RP.RP-dragging { transition: none; } .RP-closed { border-left-color: transparent; } .RP-inner { display: flex; flex-direction: column; height: 100%; min-width: 0; flex-shrink: 0; } .RP-drag { position: absolute; top: 0; left: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; } .RP-drag.on { background: var(--brand); opacity: .3; } .RP-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bl2); } .RP-t { font-size: 14px; font-weight: 600; color: var(--t); } .RP-x { width: 28px; height: 28px; border-radius: 8px; border: none; background: none; color: var(--t3); display: flex; align-items: center; justify-content: center; } .RP-x:hover { background: var(--sh); } .RP-body { flex: 1; overflow-y: auto; padding: 16px; } /* ── Artifact List Sidebar ────────────────────────────────────── */ .artlist { display: flex; flex-direction: column; height: 100%; } .artlist-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bl2); flex-shrink: 0; } .artlist-title { font-size: 14px; font-weight: 600; color: var(--t); } .artlist-body { flex: 1; overflow-y: auto; padding: 8px; } .artlist-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: none; background: none; cursor: pointer; text-align: left; font-family: var(--sans); transition: background .12s; color: var(--t3); } .artlist-item:hover { background: var(--sh); } .artlist-item.active { background: var(--brandL); } .artlist-item-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--sh); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .artlist-item-info { flex: 1; min-width: 0; } .artlist-item-name { font-size: 13px; font-weight: 500; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .artlist-item-type { font-size: 11px; color: var(--t4); margin-top: 2px; } .artlist-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px; text-align: center; } /* ── Floating Artifact Button ─────────────────────────────────── */ .art-fab-wrap { position: sticky; top: 0; z-index: 10; display: flex; justify-content: flex-end; padding: 8px 16px 0; pointer-events: none; } .art-fab { pointer-events: auto; display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); color: var(--t3); font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; box-shadow: var(--shadow-xs); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .art-fab:hover { background: var(--sh); color: var(--t); border-color: var(--sa); } .art-fab.active { background: var(--brandL); color: var(--brand); border-color: var(--brand); } .art-fab-count { display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 12px; background: var(--brand); color: #fff; font-size: 10px; font-weight: 600; } /* ── Artifact Card (Claude-style) ─────────────────────────────── */ .art { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 8px 0; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); transition: border-color .15s, box-shadow .15s; width: 100%; } .art:hover { border-color: var(--brand); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 8%, transparent); } .art-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .art-info { flex: 1; min-width: 0; } .art-name { font-size: 14px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .art-meta { font-size: 12px; color: var(--t4); margin-top: 2px; } .art-ver { font-size: 10px; font-weight: 600; color: var(--brand); background: var(--brandL); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .art-chevron { color: var(--t4); flex-shrink: 0; display: flex; } .art:hover .art-chevron { color: var(--brand); } .art-dl { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--bl2); background: var(--s); color: var(--t3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; cursor: pointer; } .art-dl:hover { color: var(--brand); border-color: var(--brand); background: var(--brandL); } .art-actions { display: flex; gap: 2px; } .art-btn { border: none; background: none; color: var(--t4); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; } .art-btn:hover { color: var(--t2); background: var(--sh); } /* Save-to dropdown (artifact panel) */ .save-dd { position: absolute; right: 0; top: 100%; margin-top: 4px; width: 260px; background: var(--s, #fff); border: 1px solid var(--bl2, #e2e8f0); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 100; animation: dd .12s ease; } .save-dd-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--t4, #94a3b8); padding: 6px 8px 4px; } .save-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .08s; border: none; background: none; width: 100%; font-family: var(--sans); text-align: left; } .save-dd-item:hover { background: var(--sh, #f1f5f9); } .save-dd-item-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: white; flex-shrink: 0; } .save-dd-item-info { flex: 1; min-width: 0; } .save-dd-item-name { font-size: 13px; font-weight: 500; color: var(--t, #1e293b); } .save-dd-item-desc { font-size: 11px; color: var(--t4, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .save-dd-item-check { color: var(--brand, #5c31ff); flex-shrink: 0; opacity: 0; } .save-dd-item.saved .save-dd-item-check { opacity: 1; } /* ── Share Dialog (ACE polish) ──────────────────────────────── */ .share-body { padding: 16px 20px; max-height: 400px; overflow-y: auto; } .share-add-form { padding: 12px 14px; background: var(--sh, #f8fafc); border-radius: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; } .share-tabs { display: flex; gap: 6px; } .share-tab { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--bl2, #e2e8f0); background: transparent; color: inherit; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: all .12s; } .share-tab.on { background: var(--brand, #5C31FF); color: #fff; border-color: var(--brand, #5C31FF); } .share-input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--bl2, #e2e8f0); font-size: 13px; outline: none; width: 100%; background: var(--s, #fff); font-family: var(--sans); transition: border-color .12s; } .share-input:focus { border-color: var(--brand, #5C31FF); } .share-input::placeholder { color: var(--t4, #94a3b8); } .share-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--bl2, #e2e8f0); font-size: 13px; background: var(--s, #fff); font-family: var(--sans); } .share-actions { display: flex; gap: 6px; align-items: center; } .share-cancel { padding: 5px 10px; font-size: 13px; cursor: pointer; background: none; border: none; color: var(--t3, #94a3b8); font-family: var(--sans); transition: color .12s; } .share-cancel:hover { color: var(--t, #1e293b); } .share-submit { padding: 5px 14px; border-radius: 6px; background: var(--brand, #5C31FF); color: #fff; border: none; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: opacity .12s; } .share-submit:hover { opacity: .9; } .share-submit:disabled { opacity: .5; cursor: wait; } .share-error { font-size: 12px; color: #ef4444; } .share-add-btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--bl2, #e2e8f0); background: transparent; cursor: pointer; width: 100%; font-size: 13px; color: var(--brand, #5C31FF); margin-bottom: 14px; font-family: var(--sans); transition: all .12s; } .share-add-btn:hover { border-color: var(--brand, #5C31FF); background: var(--brandL, #ede9fe); } .share-empty { padding: 20px; text-align: center; color: var(--t4, #94a3b8); font-size: 13px; } .share-list { display: flex; flex-direction: column; gap: 2px; } .share-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; transition: background .1s; } .share-row:hover { background: var(--sh, #f8fafc); } .share-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; } .share-av--org { background: #10b981; } .share-av--team { background: #f59e0b; } .share-av--user { background: #6366f1; } .share-info { flex: 1; min-width: 0; } .share-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-meta { font-size: 11px; color: var(--t4, #94a3b8); } .share-revoke { padding: 4px; background: none; border: none; cursor: pointer; color: var(--t4, #94a3b8); border-radius: 4px; transition: all .12s; display: flex; align-items: center; justify-content: center; } .share-revoke:hover { background: #fee2e2; color: #ef4444; } .share-foot { padding: 10px 20px; } .share-count { font-size: 11px; color: var(--t4, #94a3b8); } .share-done { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--bl2, #e2e8f0); background: var(--s, #fff); cursor: pointer; font-size: 13px; font-family: var(--sans); transition: all .12s; } .share-done:hover { border-color: var(--t4); background: var(--sh, #f8fafc); } /* Inline charts */ .chi { border: 1px solid var(--bl2); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .12s; margin: 8px 0; } .chi:hover { border-color: var(--brand); } .chi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .chi-t { font-size: 13px; font-weight: 600; color: var(--t); } .bars { display: flex; align-items: flex-end; gap: 8px; } .bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height .3s ease; } .bval { font-size: 10px; font-weight: 600; color: var(--t2); } .blbl { font-size: 10px; color: var(--t4); white-space: nowrap; } /* Inline tables (ACE-specific wrapper) */ .tbl-ace { border: 1px solid var(--bl2); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .12s; margin: 8px 0; } .tbl-ace:hover { border-color: var(--brand); } .tbl-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--sh); } .tbl-t { font-size: 13px; font-weight: 600; color: var(--t); } /* SQL Display */ .sql { border: 1px solid var(--bl2); border-radius: 12px; overflow: hidden; } .sql-h { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--sh); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--t3); } .sql-body { padding: 12px 14px; background: var(--code-bg); } .sql-body pre { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #E7E5E4; margin: 0; } /* Suggestion Card */ .sug { border: 1px solid var(--bl2); border-radius: 12px; padding: 14px 16px; background: var(--s); } .sug-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .sug-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sug-t { font-size: 13px; font-weight: 500; color: var(--t); } .sug-btns { display: flex; gap: 8px; } .sug-pri { padding: 7px 16px; border-radius: 12px; border: none; background: var(--brand); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; cursor: pointer; transition: opacity .12s; } .sug-pri:hover { opacity: .9; } .sug-sec { padding: 7px 16px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .12s; } .sug-sec:hover { border-color: var(--t4); } /* Error Card */ .err-card { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid #FCA5A5; border-radius: 12px; background: #FEF2F2; } .err-ic { color: #EF4444; flex-shrink: 0; margin-top: 2px; } .err-t { font-size: 13px; font-weight: 600; color: #DC2626; margin-bottom: 4px; } .err-d { font-size: 12px; color: #991B1B; line-height: 1.5; } /* Auto Route Card */ .ar { display: flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); } .ar.ok { border-color: #BBF7D0; background: #F0FDF4; } .ar-ic { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Browser Automation */ .br { padding: 14px 16px; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); } .br-t { font-size: 13px; font-weight: 600; color: var(--t); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .br-url { font-family: var(--mono); font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--sh); border-radius: 8px; margin-bottom: 12px; } .br-steps { display: flex; flex-direction: column; gap: 8px; } .br-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); } .br-step-n { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--bl2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--t4); flex-shrink: 0; } .br-step-n.done { background: #DCFCE7; border-color: #BBF7D0; color: #16A34A; } /* Agent-to-UI (a2i) */ .a2i { padding: 16px; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); margin: 8px 0; } .a2i-badge { font-size: 10px; font-weight: 600; color: var(--brand); background: var(--brandL); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 10px; } .a2i-t { font-size: 15px; font-weight: 600; color: var(--t); margin-bottom: 14px; } .a2i-field { margin-bottom: 12px; } .a2i-label { font-size: 11px; font-weight: 500; color: var(--t3); margin-bottom: 4px; } .a2i-input { width: 100%; padding: 8px 12px; border: 1px solid var(--bl2); border-radius: 8px; font-family: var(--sans); font-size: 13px; color: var(--t); background: var(--bg); box-sizing: border-box; } .a2i-radio { display: flex; gap: 6px; } .a2i-radio label { padding: 6px 14px; border: 1px solid var(--bl2); border-radius: 8px; font-size: 12px; color: var(--t3); cursor: pointer; transition: all .12s; } .a2i-radio label.sel { border-color: var(--brand); background: var(--brandL); color: var(--brand); font-weight: 500; } /* Action Card */ .ac-card { padding: 16px; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); margin: 8px 0; } .ac-card-t { font-size: 14px; font-weight: 600; color: var(--t); margin-bottom: 12px; } .ac-card-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bl2); font-size: 13px; } .ac-card-l { color: var(--t3); } .ac-card-v { color: var(--t); font-weight: 500; } /* ── Agent Detail (revamped) ──────────────────────────────────── */ .ad-back-btn { display: inline-flex; align-items: center; gap: 4px; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--t3); font-family: inherit; padding: 0; margin-bottom: 20px; transition: color .15s; } .ad-back-btn:hover { color: var(--brand); } .ad-hero { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .ad-status-badge { display: inline-flex; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand); } .ad-btn-primary { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 12px; background: var(--brand); border: none; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: all .15s; font-family: inherit; } .ad-btn-primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); } .ad-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .ad-card { background: var(--s); border: 1px solid var(--bl2); border-radius: 12px; padding: 22px 24px; transition: border-color .15s, box-shadow .2s; } .ad-card-label { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .ad-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; background: var(--sh); font-size: 12px; font-weight: 500; color: var(--t2); } .ad-prompts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ad-prompt-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); cursor: pointer; transition: all .2s; font-size: 13px; color: var(--t2); font-weight: 500; line-height: 1.4; text-align: left; font-family: inherit; } .ad-prompt-card:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, var(--s)); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .ad-prompt-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; background: color-mix(in srgb, var(--brand) 8%, transparent); display: flex; align-items: center; justify-content: center; color: var(--brand); } .ad-convo-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 24px; border: none; background: none; cursor: pointer; transition: background .12s; font-size: 13px; color: var(--t2); font-weight: 500; text-align: left; font-family: inherit; } .ad-convo-row:hover { background: var(--sh); } @media (max-width: 900px) { .ad-info-grid { grid-template-columns: repeat(2, 1fr); } .ad-prompts-grid { grid-template-columns: 1fr; } } /* ── Agent Builder (ACE inline) ───────────────────────────────── */ .AB { display: flex; gap: 0; flex: 1; overflow: hidden; } .AB-main { flex: 1; overflow-y: auto; padding: 16px 24px; } .AB-test { width: 340px; border-left: 1px solid var(--bl2); display: flex; flex-direction: column; background: var(--bg); } .AB-back { display: flex; align-items: center; gap: 4px; border: none; background: none; font-size: 12px; font-weight: 500; color: var(--t3); margin-bottom: 12px; cursor: pointer; } .AB-back:hover { color: var(--brand); } .AB-title { font-size: 20px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .AB-subtitle { font-size: 13px; color: var(--t3); margin-bottom: 16px; line-height: 1.5; } .AB-steps { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; } .AB-step { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--bl2); background: none; font-size: 12px; font-weight: 500; color: var(--t3); white-space: nowrap; cursor: pointer; font-family: var(--sans); transition: all .12s; } .AB-step.on { background: var(--brandL); border-color: var(--brand); color: var(--brand); } .AB-step.done { color: var(--ok); } .AB-step-num { width: 18px; height: 18px; border-radius: 50%; background: var(--sh); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .AB-step.on .AB-step-num { background: var(--brand); color: white; } .AB-step.done .AB-step-num { background: var(--ok); color: white; } .AB-label { font-size: 12px; font-weight: 600; color: var(--t); margin: 12px 0 6px; } .AB-input { width: 100%; padding: 9px 12px; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); font-size: 13px; color: var(--t); outline: none; transition: border-color .12s; } .AB-input:focus { border-color: var(--brand); } .AB-textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--bl2); border-radius: 12px; background: var(--s); font-size: 13px; color: var(--t); outline: none; resize: vertical; line-height: 1.6; font-family: var(--sans); } .AB-textarea:focus { border-color: var(--brand); } .AB-btn { padding: 7px 16px; border-radius: 12px; border: 1px solid var(--bl2); background: var(--s); font-size: 12px; font-weight: 500; color: var(--t2); display: flex; align-items: center; gap: 5px; transition: all .12s; } .AB-btn:hover { border-color: var(--brand); color: var(--brand); } .AB-btn.primary { background: var(--brand); color: white; border-color: var(--brand); } .AB-btn.primary:hover { filter: brightness(.92); } .AB-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; } .AB-colors { display: flex; gap: 6px; flex-wrap: wrap; } .AB-color { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: all .12s; } .AB-color.on { border-color: var(--t); box-shadow: 0 0 0 2px var(--s); } .AB-templates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; } .AB-template { padding: 12px; border: 1px solid var(--bl2); border-radius: 12px; cursor: pointer; transition: all .12s; } .AB-template:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-xs); } .AB-template:active { transform: translateY(0); box-shadow: none; } .AB-template-t { font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 2px; } .AB-template-d { font-size: 11px; color: var(--t3); line-height: 1.4; } .AB-tool { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bl2); border-radius: 12px; margin-bottom: 6px; cursor: pointer; transition: all .12s; } .AB-tool:hover { border-color: var(--brand); } .AB-tool.on { background: var(--brandL); border-color: var(--brand); } .AB-tool-toggle { width: 32px; height: 18px; border-radius: 12px; background: var(--bl2); position: relative; flex-shrink: 0; transition: background .15s; } .AB-tool-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; transition: transform .15s; } .AB-tool.on .AB-tool-toggle { background: var(--brand); } .AB-tool.on .AB-tool-toggle::after { transform: translateX(14px); } .AB-src { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bl2); border-radius: 8px; margin-bottom: 4px; cursor: pointer; font-size: 13px; color: var(--t2); } .AB-src.on { background: var(--brandL); border-color: var(--brand); } .AB-src-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--bl2); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--brand); flex-shrink: 0; } .AB-src.on .AB-src-check { background: var(--brand); color: white; border-color: var(--brand); } .AB-integrations { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .AB-int { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bl2); border-radius: 8px; cursor: pointer; transition: all .12s; } .AB-int:hover { border-color: var(--brand); } .AB-int.on { background: var(--brandL); border-color: var(--brand); } .AB-preview-label { font-size: 11px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .AB-preview { border: 1px solid var(--bl2); border-radius: 12px; padding: 12px; background: var(--s); border-top: 3px solid var(--brand); } .AB-test-body { flex: 1; overflow-y: auto; padding: 12px 16px; } .AB-test-input { display: flex; align-items: center; gap: 4px; padding: 10px 14px; } .AB-test-input input { flex: 1; border: 1px solid var(--bl2); border-radius: 8px; padding: 7px 10px; font-size: 12px; color: var(--t); outline: none; background: var(--s); } .AB-test-input input:focus { border-color: var(--brand); } .AB-test-input button { width: 32px; height: 32px; border-radius: 8px; border: none; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; } .AB-test-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; } .AB-test-msg.user { background: var(--brand); color: white; border-bottom-right-radius: 4px; } .AB-test-msg.bot { background: var(--s); border: 1px solid var(--bl2); color: var(--t2); border-bottom-left-radius: 4px; } /* Typing dots */ .typing-dots span { animation: tdot 1.2s infinite; } .typing-dots span:nth-child(2) { animation-delay: .2s; } .typing-dots span:nth-child(3) { animation-delay: .4s; } @keyframes tdot { 0%,60%,100% { opacity: .2; } 30% { opacity: 1; } } /* Test chat input bar */ .AB-test-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; } .AB-test-input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--bl2); border-radius: 16px; background: var(--s); font-family: var(--sans); font-size: 13px; color: var(--t); outline: none; transition: border-color .12s; } .AB-test-input:focus { border-color: var(--brand); } .AB-test-input::placeholder { color: var(--t4); } .AB-test-send { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: opacity .12s; } .AB-test-send:hover { opacity: .85; } .AB-test-send:disabled { opacity: .4; cursor: not-allowed; } .AB-test-send svg { width: 14px; height: 14px; } /* ── Settings ─────────────────────────────────────────────────── */ .SET { padding: 20px 32px; max-width: 740px; flex: 1; overflow-y: auto; } .SET-h { font-size: 22px; font-weight: 600; color: var(--t); margin-bottom: 16px; } .SET-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--bl2); padding-bottom: 8px; } .SET-tab { padding: 6px 14px; border-radius: 8px; border: none; background: none; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .12s; } .SET-tab.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .SET-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bl2); border-radius: 12px; margin-bottom: 6px; background: var(--s); } .SET-card-t { font-size: 13px; color: var(--t2); line-height: 1.5; } .SET-card-d { font-size: 11px; color: var(--t4); margin-top: 2px; } .SET-card-cat { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--sh); color: var(--t3); flex-shrink: 0; } .SET-card-btn { border: none; background: none; color: var(--t4); cursor: pointer; padding: 4px; border-radius: 6px; display: flex; transition: all .1s; } .SET-card-btn:hover { background: #FEE2E2; color: var(--err); } .SET-src { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bl2); border-radius: 12px; margin-bottom: 6px; background: var(--s); } .SET-src-ic { font-size: 20px; flex-shrink: 0; } .SET-src-info { flex: 1; } .SET-src-name { font-size: 13px; font-weight: 500; color: var(--t); } .SET-src-type { font-size: 11px; color: var(--t3); } .SET-src-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px; } .SET-src-status.active { background: #DCFCE7; color: #16A34A; } .SET-src-status.pending { background: #FEF3C7; color: #D97706; } .SET-style { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 20px; } .SET-style-opt { border: 1px solid var(--bl2); border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; transition: all .12s; } .SET-style-opt:hover { border-color: var(--brand); } .SET-style-opt.on { background: var(--brandL); border-color: var(--brand); } .SET-style-t { font-size: 13px; font-weight: 600; color: var(--t); } .SET-style-d { font-size: 11px; color: var(--t3); margin-top: 2px; } /* ── Saved Artifacts ──────────────────────────────────────────── */ .SAL { flex: 1; overflow-y: auto; padding: 24px 32px; max-width: 800px; margin: 0 auto; width: 100%; } .SAL-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .SAL-title { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--t); } .SAL-count { font-size: 13px; color: var(--t3); } .SAL-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .SAL-filter { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--bl2); background: none; font-size: 12px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .12s; } .SAL-filter:hover { border-color: var(--t4); color: var(--t2); } .SAL-filter.on { background: var(--brandL); border-color: var(--brand); color: var(--brand); } .SAL-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .SAL-card { border: 1px solid var(--bl2); border-radius: 12px; padding: 14px 16px; background: var(--s); cursor: pointer; transition: all .15s; position: relative; } .SAL-card:hover { border-color: var(--t4); box-shadow: var(--shadow-sm); } .SAL-card-pin { position: absolute; top: 10px; right: 10px; color: var(--brand); opacity: .7; } .SAL-card-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .SAL-card-ic { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .SAL-card-info { flex: 1; min-width: 0; } .SAL-card-name { font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .SAL-card-meta { font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 6px; } .SAL-card-from { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); padding: 8px 0; border-top: 1px solid var(--bl2); margin-bottom: 8px; } .SAL-card-foot { display: flex; align-items: center; gap: 6px; } .SAL-card-dest { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--t2); } .SAL-card-dest-ic { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: white; flex-shrink: 0; } /* ── CmdK Modal ───────────────────────────────────────────────── */ .cmdk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; z-index: var(--z-overlay); } .cmdk { width: 520px; background: var(--s); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden; border: 1px solid var(--bl2); } .cmdk-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bl2); } .cmdk-input input { flex: 1; border: none; outline: none; background: none; font-size: 15px; color: var(--t); } .cmdk-input input::placeholder { color: var(--t4); } .cmdk-results { max-height: 340px; overflow-y: auto; padding: 6px; } .cmdk-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background .1s; border: none; background: none; width: 100%; text-align: left; font-family: inherit; font-size: 13px; color: var(--t); } .cmdk-item:hover { background: var(--sh); } .cmdk-item-t { font-size: 13px; font-weight: 500; color: var(--t); } .cmdk-item-d { font-size: 11px; color: var(--t3); } .cmdk-box { background: var(--s); border-radius: 12px; border: 1px solid var(--bl2); width: 560px; max-height: 480px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.15); } .cmdk-list { max-height: 360px; overflow-y: auto; padding: 4px; } .cmdk-section { font-size: 10px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .04em; padding: 10px 10px 4px; } /* ── Footer ───────────────────────────────────────────────────── */ .K-footer { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px; font-size: 10px; color: var(--t4); border-top: 1px solid var(--bl2); background: var(--bg); flex-shrink: 0; } .K-footer-l { display: flex; align-items: center; gap: 4px; } .K-footer-r { display: flex; gap: 8px; } .K-footer-r a { color: var(--t4); } .K-footer-r span { opacity: .4; } /* ── Toast ────────────────────────────────────────────────────── */ .ace-toast { position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); background: var(--t); color: var(--bg); padding: 10px 20px; border-radius: 12px; font-size: 13px; font-weight: 500; z-index: var(--z-context-menu); animation: aceToastIn .3s ease; } @keyframes aceToastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } } /* ── Agent Cards (shared with Studio) ─────────────────────────── */ .ag-page { padding: 20px 32px; flex: 1; overflow-y: auto; } .ag-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ag-hdr-left { display: flex; align-items: center; gap: 10px; } .ag-title { font-size: 24px; font-weight: 700; color: var(--t); letter-spacing: -.02em; } .ag-count-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 9999px; background: var(--brandL); color: var(--brand); } .ag-subtitle { font-size: 13px; color: var(--t3); margin-bottom: 20px; } .ag-create-btn { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 12px; border: none; background: var(--brand); font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: all .15s; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); } .ag-create-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .ag-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; border-radius: 12px; background: var(--s); border: 1.5px solid var(--b); transition: all .2s; margin-bottom: 16px; } .ag-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brandL); } .ag-search-icon { color: var(--t4); display: flex; flex-shrink: 0; } .ag-search input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 14px; color: var(--t); } .ag-search input::placeholder { color: var(--t4); } .ag-search-clear { display: flex; border: none; background: none; color: var(--t4); cursor: pointer; padding: 2px; border-radius: 4px; } .ag-search-clear:hover { color: var(--t2); background: var(--sh); } .ag-search-kbd { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; color: var(--t4); background: var(--sh); border: 1px solid var(--b); } .ag-cats { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--b); } .ag-cat { display: flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 9999px; border: 1.5px solid var(--b); background: none; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t3); cursor: pointer; transition: all .15s; } .ag-cat:hover { border-color: var(--brand); color: var(--brand); } .ag-cat.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; } .ag-cat-n { font-size: 10px; font-weight: 700; opacity: .7; } .ag-cat.on .ag-cat-n { opacity: .85; } .ag-results-count { font-size: 12px; color: var(--t4); margin-bottom: 12px; text-align: right; } .ag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .ag-card { position: relative; padding: 18px 18px 18px 22px; background: var(--s); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03); border: 1px solid var(--b); cursor: pointer; overflow: hidden; transition: all .2s cubic-bezier(.4,0,.2,1); animation: agCardIn .4s cubic-bezier(.4,0,.2,1) both; } .ag-card:hover { border-color: color-mix(in srgb, var(--ag-c) 30%, var(--b)); box-shadow: 0 4px 16px color-mix(in srgb, var(--ag-c) 10%, transparent), 0 1px 3px rgba(0,0,0,.06); transform: translateY(-2px); } .ag-card-accent { position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--ag-c), var(--ag-c2)); transition: width .2s, opacity .2s; opacity: .7; } .ag-card:hover .ag-card-accent { width: 4px; opacity: 1; } .ag-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .ag-card-av { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--ag-c), var(--ag-c2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 1px 1px rgba(255,255,255,.2); } .ag-card-identity { flex: 1; min-width: 0; } .ag-card-name { font-size: 14px; font-weight: 600; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-card-role { font-size: 12px; color: var(--t3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-card-pin { color: var(--t4); flex-shrink: 0; display: flex; transition: color .15s; } .ag-card:hover .ag-card-pin { color: var(--brand); } .ag-card-desc { font-size: 13px; color: var(--t2); line-height: 1.55; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ag-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ag-card-cat { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--sh); color: var(--t3); letter-spacing: .01em; } .ag-card-metric { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--t3); } .ag-card-metric-muted { color: var(--t4); } .ag-card-star { color: #F59E0B; display: flex; } .ag-card-spacer { flex: 1; } .ag-card-cta { display: flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--ag-c, var(--brand)); background: none; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--ag-c, var(--brand)); cursor: pointer; transition: all .15s; opacity: 0; transform: translateX(4px); } .ag-card:hover .ag-card-cta { opacity: 1; transform: translateX(0); } .ag-card-cta:hover { background: var(--ag-c, var(--brand)); color: #fff; } .ag-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 24px; text-align: center; } .ag-empty-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--sh); color: var(--t4); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .ag-empty-icon svg { width: 24px; height: 24px; } .ag-empty-title { font-size: 16px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .ag-empty-desc { font-size: 13px; color: var(--t3); margin-bottom: 20px; max-width: 320px; } .ag-empty-btn { padding: 8px 16px; border-radius: 8px; border: 1.5px solid var(--b); background: var(--s); font-family: inherit; font-size: 12px; font-weight: 500; color: var(--t2); cursor: pointer; transition: all .12s; } .ag-empty-btn:hover { border-color: var(--brand); color: var(--brand); } @keyframes agCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ A2UI CARD STYLES - Agent-to-UI Rich Cards All selectors prefixed with .a2ui- to avoid conflicts. ═══════════════════════════════════════════════════════════════ */ /* Card container */ .a2ui-card { background: var(--bg, #ffffff); border: 1px solid var(--bl2, #e2e8f0); border-radius: 12px; margin: 8px 0; overflow: hidden; max-width: 480px; font-family: var(--sans, system-ui, -apple-system, sans-serif); transition: border-color 0.15s ease, box-shadow 0.15s ease; animation: a2ui-fadein 0.2s ease-out; } .a2ui-card:hover { border-color: var(--bd, #cbd5e1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } /* Card header */ .a2ui-card-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--sh, #f8fafc); border-bottom: 1px solid var(--bl2, #e2e8f0); } .a2ui-card-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0.5px; } .a2ui-card-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--t, #1e293b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a2ui-card-badge { padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; flex-shrink: 0; } .a2ui-badge-ok { background: #dcfce7; color: #15803d; } .a2ui-badge-err { background: #fee2e2; color: #dc2626; } .a2ui-badge-info { background: #dbeafe; color: #2563eb; } /* Card body */ .a2ui-card-body { padding: 10px 14px; } /* Key-value rows */ .a2ui-kv-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 0; gap: 12px; border-bottom: 1px solid var(--sh, #f1f5f9); } .a2ui-kv-row:last-child { border-bottom: none; } .a2ui-kv-label { font-size: 11px; color: var(--t3, #94a3b8); text-transform: capitalize; flex-shrink: 0; min-width: 80px; } .a2ui-kv-value { font-size: 12px; color: var(--t, #1e293b); font-weight: 500; text-align: right; word-break: break-word; max-width: 240px; } /* Hero metric */ .a2ui-hero { display: flex; flex-direction: column; align-items: center; padding: 12px 0; } .a2ui-hero-value { font-size: 28px; font-weight: 700; color: var(--brand, #5C31FF); line-height: 1.2; } .a2ui-hero-label { font-size: 11px; color: var(--t3, #94a3b8); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; } /* Call-to-action */ .a2ui-cta { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px; background: var(--sh, #f8fafc); border-radius: 8px; font-size: 12px; color: var(--t2, #64748b); cursor: pointer; transition: background 0.15s; } .a2ui-cta:hover { background: var(--sa, #e2e8f0); } .a2ui-cta-icon { display: flex; align-items: center; color: var(--brand, #5C31FF); flex-shrink: 0; } .a2ui-cta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Multi-card grid */ .a2ui-blocks-grid { display: flex; flex-direction: column; gap: 8px; } @keyframes a2ui-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* A2UI Dark mode overrides */ .R.dark .a2ui-card { background: var(--bg); border-color: var(--bl2); } .R.dark .a2ui-card-header { background: var(--sh); border-color: var(--bl2); } .R.dark .a2ui-kv-row { border-color: var(--sh); } .R.dark .a2ui-badge-ok { background: #052e16; color: #4ade80; } .R.dark .a2ui-badge-err { background: #450a0a; color: #f87171; } .R.dark .a2ui-badge-info { background: #172554; color: #60a5fa; } .R.dark .a2ui-cta { background: var(--sh); } .R.dark .a2ui-cta:hover { background: var(--sa); } /* Wide card variant */ .a2ui-card-wide { max-width: 560px; } /* ── Metric Card ─────────────────────────────────────────────── */ .a2ui-metric { display: flex; flex-direction: column; align-items: center; padding: 16px 0 8px; } .a2ui-metric-value { font-size: 36px; font-weight: 800; color: var(--brand, #5C31FF); line-height: 1.1; letter-spacing: -0.5px; } .a2ui-metric-delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 3px 10px; border-radius: 16px; font-size: 13px; font-weight: 600; } .a2ui-delta-up { background: #dcfce7; color: #15803d; } .a2ui-delta-down { background: #fee2e2; color: #dc2626; } .a2ui-delta-flat { background: #dbeafe; color: #2563eb; } .a2ui-delta-arrow { font-size: 14px; } .a2ui-metric-sub { font-size: 12px; color: var(--t3, #94a3b8); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.4px; } .R.dark .a2ui-delta-up { background: #052e16; color: #4ade80; } .R.dark .a2ui-delta-down { background: #450a0a; color: #f87171; } .R.dark .a2ui-delta-flat { background: #172554; color: #60a5fa; } /* ── Bar Chart ───────────────────────────────────────────────── */ .a2ui-barchart { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .a2ui-bar-row { display: flex; align-items: center; gap: 10px; } .a2ui-bar-label { font-size: 11px; color: var(--t3, #94a3b8); min-width: 80px; text-align: right; flex-shrink: 0; } .a2ui-bar-track { flex: 1; height: 22px; background: var(--sh, #f1f5f9); border-radius: 6px; overflow: hidden; } .a2ui-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); min-width: 2px; } .a2ui-bar-val { font-size: 12px; font-weight: 600; color: var(--t, #1e293b); min-width: 56px; } .R.dark .a2ui-bar-track { background: var(--sh); } /* ── Sparkline / Line Chart ──────────────────────────────────── */ .a2ui-sparkline { width: 100%; height: auto; display: block; } /* ── Pie / Donut Chart ───────────────────────────────────────── */ .a2ui-pie-wrap { display: flex; align-items: center; gap: 16px; padding: 4px 0; } .a2ui-pie-svg { width: 120px; height: 120px; flex-shrink: 0; } .a2ui-pie-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; } .a2ui-pie-legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; } .a2ui-pie-dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; } .a2ui-pie-legend-label { flex: 1; color: var(--t2, #64748b); } .a2ui-pie-legend-val { font-weight: 600; color: var(--t, #1e293b); } /* ── Data Table ──────────────────────────────────────────────── */ .a2ui-table-wrap { overflow-x: auto; margin: -2px -4px; } .a2ui-table { width: 100%; border-collapse: collapse; font-size: 12px; } .a2ui-table th { text-align: left; padding: 8px 10px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--t3, #94a3b8); border-bottom: 2px solid var(--bl2, #e2e8f0); white-space: nowrap; } .a2ui-table td { padding: 7px 10px; color: var(--t, #1e293b); border-bottom: 1px solid var(--sh, #f1f5f9); } .a2ui-tr-even { background: var(--sh, #f8fafc); } .R.dark .a2ui-table th { border-color: var(--bl2); } .R.dark .a2ui-table td { border-color: var(--sh); } .R.dark .a2ui-tr-even { background: var(--sh); } /* ── Progress Tracker ────────────────────────────────────────── */ .a2ui-steps { display: flex; flex-direction: column; gap: 0; padding: 4px 0; } .a2ui-step { display: flex; align-items: flex-start; gap: 10px; position: relative; padding-bottom: 16px; } .a2ui-step:last-child { padding-bottom: 0; } .a2ui-step-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; z-index: 1; } .a2ui-step-done .a2ui-step-icon { background: #dcfce7; color: #15803d; } .a2ui-step-active .a2ui-step-icon { background: var(--brand, #5C31FF); color: #fff; animation: a2ui-pulse 1.5s ease-in-out infinite; } .a2ui-step-pending .a2ui-step-icon { background: var(--sh, #f1f5f9); color: var(--t3, #94a3b8); } .a2ui-step-content { flex: 1; padding-top: 3px; } .a2ui-step-label { font-size: 13px; font-weight: 500; color: var(--t, #1e293b); } .a2ui-step-detail { font-size: 11px; color: var(--t3, #94a3b8); margin-top: 2px; } .a2ui-step-line { position: absolute; left: 12px; top: 28px; bottom: 0; width: 2px; background: var(--bl2, #e2e8f0); } .a2ui-step:last-child .a2ui-step-line { display: none; } .R.dark .a2ui-step-done .a2ui-step-icon { background: #052e16; color: #4ade80; } .R.dark .a2ui-step-pending .a2ui-step-icon { background: var(--sh); } @keyframes a2ui-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 30%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 0%, transparent); } } /* ── Status Card ─────────────────────────────────────────────── */ .a2ui-status-summary { font-size: 13px; color: var(--t2, #64748b); margin-bottom: 10px; line-height: 1.5; } .a2ui-status-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--sh, #f1f5f9); font-size: 12px; } .a2ui-status-item:last-child { border-bottom: none; } .a2ui-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .a2ui-dot-ok { background: #22c55e; } .a2ui-dot-err { background: #ef4444; } .a2ui-dot-warn { background: #f59e0b; } .a2ui-status-label { flex: 1; color: var(--t, #1e293b); font-weight: 500; } .a2ui-status-val { font-weight: 600; color: var(--t, #1e293b); } .a2ui-status-detail { font-size: 11px; color: var(--t3, #94a3b8); } /* ── Approval Card ───────────────────────────────────────────── */ .a2ui-approval-desc { font-size: 13px; color: var(--t2, #64748b); line-height: 1.5; margin-bottom: 10px; } .a2ui-approval-actions { display: flex; gap: 8px; margin-top: 12px; } .a2ui-btn { padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; } .a2ui-btn-approve { background: #dcfce7; color: #15803d; } .a2ui-btn-approve:hover { background: #bbf7d0; } .a2ui-btn-reject { background: #fee2e2; color: #dc2626; } .a2ui-btn-reject:hover { background: #fecaca; } .a2ui-approval-result { padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-align: center; width: 100%; } .a2ui-result-approved { background: #dcfce7; color: #15803d; } .a2ui-result-rejected { background: #fee2e2; color: #dc2626; } .R.dark .a2ui-btn-approve { background: #052e16; color: #4ade80; } .R.dark .a2ui-btn-approve:hover { background: #064e3b; } .R.dark .a2ui-btn-reject { background: #450a0a; color: #f87171; } .R.dark .a2ui-btn-reject:hover { background: #7f1d1d; } .R.dark .a2ui-result-approved { background: #052e16; color: #4ade80; } .R.dark .a2ui-result-rejected { background: #450a0a; color: #f87171; } /* ── Code Block ──────────────────────────────────────────────── */ .a2ui-code-wrap { position: relative; background: #0f172a; border-radius: 8px; overflow: hidden; } .a2ui-code-lang { position: absolute; top: 8px; left: 12px; font-size: 10px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; } .a2ui-code-copy { position: absolute; top: 6px; right: 8px; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.08); color: #94a3b8; border: none; cursor: pointer; transition: all 0.15s; } .a2ui-code-copy:hover { background: rgba(255,255,255,0.15); color: #e2e8f0; } .a2ui-code { margin: 0; padding: 30px 14px 14px; font-size: 12px; line-height: 1.6; color: #e2e8f0; overflow-x: auto; white-space: pre; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); } /* ── Citation Card ───────────────────────────────────────────── */ .a2ui-citation { padding: 8px 0; border-bottom: 1px solid var(--sh, #f1f5f9); } .a2ui-citation:last-child { border-bottom: none; } .a2ui-citation-head { display: flex; align-items: center; gap: 8px; } .a2ui-citation-num { width: 20px; height: 20px; border-radius: 50%; background: var(--brand, #5C31FF); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .a2ui-citation-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--t, #1e293b); } .a2ui-citation-score { padding: 2px 8px; border-radius: 12px; font-size: 10px; font-weight: 600; background: #dcfce7; color: #15803d; } .a2ui-citation-snippet { font-size: 12px; color: var(--t2, #64748b); margin-top: 4px; line-height: 1.5; padding-left: 28px; } .a2ui-citation-source { font-size: 10px; color: var(--t3, #94a3b8); margin-top: 2px; padding-left: 28px; } .R.dark .a2ui-citation-score { background: #052e16; color: #4ade80; } /* ── Shared footnote ─────────────────────────────────────────── */ .a2ui-footnote { font-size: 11px; color: var(--t3, #94a3b8); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sh, #f1f5f9); } /* ═══════════════════════════════════════════════════════════════ WIDGET — Seamless Generative UI (inspired by OpenGenerativeUI) ═══════════════════════════════════════════════════════════════ */ /* Container: no boxy card — seamless inline rendering */ .widget-container { max-width: 580px; margin: 8px 0; animation: widget-reveal 0.35s ease both; } /* Subtle title row — replaces the old card header + badge */ .widget-title-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding-left: 2px; } .widget-title { font-size: 14px; font-weight: 600; color: var(--t, #1e293b); line-height: 1.3; } .widget-description { font-size: 12px; color: var(--t3, #94a3b8); line-height: 1.4; } /* Empty state */ .widget-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--t4, #cbd5e1); } /* ── Native chart container ─────────────────────────────────── */ .widget-native-chart { border: 1px solid var(--bl2, #e2e8f0); border-radius: 12px; padding: 16px; background: var(--bg, #fff); animation: widget-reveal 0.35s ease both; } .R.dark .widget-native-chart { background: var(--bg); border-color: var(--bl2); } /* ── Pie Chart ─────────────────────────────────────────────── */ .widget-pie-layout { display: flex; align-items: center; gap: 20px; } .widget-pie-svg { width: 160px; height: 160px; flex-shrink: 0; } .widget-pie-slice { animation: widget-pie-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: center; } @keyframes widget-pie-grow { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* ── Legend (shared) ────────────────────────────────────────── */ .widget-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; } .widget-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; animation: widget-fadeslide 0.3s ease both; } .widget-legend-dot { width: 10px; height: 10px; border-radius: 4px; flex-shrink: 0; } .widget-legend-label { flex: 1; color: var(--t2, #64748b); } .widget-legend-value { font-weight: 600; color: var(--t, #1e293b); font-variant-numeric: tabular-nums; } /* ── Bar Chart ─────────────────────────────────────────────── */ .widget-bars { display: flex; flex-direction: column; gap: 10px; } .widget-bar-row { display: flex; align-items: center; gap: 12px; animation: widget-fadeslide 0.3s ease both; } .widget-bar-label { font-size: 12px; color: var(--t2, #64748b); min-width: 80px; text-align: right; flex-shrink: 0; } .widget-bar-track { flex: 1; height: 26px; background: var(--sh, #f1f5f9); border-radius: 8px; overflow: hidden; } .widget-bar-fill { height: 100%; border-radius: 8px; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); min-width: 3px; } .widget-bar-value { font-size: 13px; font-weight: 600; color: var(--t, #1e293b); min-width: 48px; font-variant-numeric: tabular-nums; } .R.dark .widget-bar-track { background: var(--sh); } /* ── Line Chart ────────────────────────────────────────────── */ .widget-line-svg { width: 100%; height: auto; display: block; } .widget-line-area { animation: widget-fadein 0.5s ease both; } .widget-line-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: widget-line-draw 1s ease forwards; } @keyframes widget-line-draw { to { stroke-dashoffset: 0; } } .widget-line-point { animation: widget-fadeslide 0.3s ease both; } /* ── Loading skeleton (shimmer) ────────────────────────────── */ .widget-skeleton { padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; } .widget-skeleton-bar { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--sh,#f1f5f9) 25%, var(--sa,#e2e8f0) 50%, var(--sh,#f1f5f9) 75%); background-size: 200% 100%; animation: widget-shimmer 1.5s infinite; width: 100%; } .widget-skeleton-bar--short { width: 60%; } .widget-skeleton-bar--med { width: 80%; } .widget-skeleton-phrase { font-size: 12px; color: var(--t3, #94a3b8); text-align: center; margin-top: 4px; animation: widget-fadein 0.3s ease; } @keyframes widget-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Shared animations ─────────────────────────────────────── */ @keyframes widget-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes widget-fadeslide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes widget-fadein { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* :root prefix raises specificity to [0,2,0], removing need for !important */ :root .widget-container, :root .widget-native-chart, :root .widget-pie-slice, :root .widget-legend-item, :root .widget-bar-row, :root .widget-line-path, :root .widget-line-point, :root .widget-line-area, :root .widget-skeleton-bar { animation: none; transition: none; } :root .widget-line-path { stroke-dashoffset: 0; stroke-dasharray: none; } } /* ══════════════════════════════════════════════════════════════ P1 FIXES — Edit Messages, Citations, Skeletons, Mobile ══════════════════════════════════════════════════════════════ */ /* ── C1: Edit User Messages ──────────────────────────────────── */ /* The edit pencil used to be absolute-positioned at left:-28px on the .msg.mu row container. Because the user bubble is right- aligned (justify-content:flex-end) and the row spans the full chat width, that put the pencil at the FAR LEFT of the chat (in the AI column), making it look orphaned from the bubble it actually edits. Now it's an in-flow flex child sitting immediately to the LEFT of the bubble, vertically centered with it, so it reads as "edit this message" instead of a floating detached icon. */ .msg.mu { position: relative; align-items: center; } .mu-edit-icon { order: -1; /* render before the bubble so it appears on the bubble's left */ align-self: center; margin-right: 4px; background: none; border: none; cursor: pointer; color: var(--t4); opacity: 0; transition: opacity 0.15s; padding: 4px; display: inline-flex; align-items: center; justify-content: center; } .msg.mu:hover .mu-edit-icon { opacity: 1; } .mu-edit-icon:hover { color: var(--brand); } .mu-edit { width: 100%; max-width: 600px; padding: 10px 16px; border-radius: 16px 18px 4px 18px; font-size: 14px; line-height: 1.6; border: 1.5px solid var(--brand); background: var(--sa, #f9fafb); color: var(--t); font-family: inherit; resize: none; outline: none; } .mu-edit-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; } .mu-edit-btn { padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: all 0.15s; } .mu-edit-btn.pri { background: var(--brand); color: #fff; } .mu-edit-btn.pri:hover { filter: brightness(1.1); } .mu-edit-btn.sec { background: var(--sh); color: var(--t3); border: 1px solid var(--bl2); } .mu-edit-btn.sec:hover { background: var(--sa); } /* ── C3: Citation Hover Previews ─────────────────────────────── */ .cite-src-hover { cursor: pointer; transition: all 0.15s; position: relative; } .cite-src-hover:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.08); } .cite-src-body { flex: 1; min-width: 0; } .cite-snippet { font-size: 11px; line-height: 1.4; color: var(--t3); margin-top: 4px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease; } .cite-src-hover:hover .cite-snippet { max-height: 60px; } .cite-link { color: var(--t4); display: flex; align-items: center; flex-shrink: 0; transition: color 0.15s; padding: 2px; } .cite-link:hover { color: var(--brand); } /* ── K1: CmdK Selected Item ──────────────────────────────────── */ /* doubled class beats any library-level single-class rule */ .cmdk-item-sel.cmdk-item-sel { background: var(--sh, #f1f5f9); } /* ── X1: Loading Skeletons ───────────────────────────────────── */ .skel { border-radius: 8px; background: var(--sh, #f1f5f9); position: relative; overflow: hidden; } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); animation: skel-shimmer 1.5s infinite; } @keyframes skel-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skel-line { height: 14px; margin-bottom: 8px; } .skel-line.w-3\/4 { width: 75%; } .skel-line.w-1\/2 { width: 50%; } .skel-line.w-full { width: 100%; } .skel-card { height: 56px; margin-bottom: 6px; } .skel-avatar { width: 36px; height: 36px; border-radius: 12px; } /* ── X4: Mobile Responsive Breakpoints ───────────────────────── */ @media (max-width: 768px) { /* Sidebar: overlay on mobile */ .S { position: fixed; z-index: 200; width: 280px; } .S.shut { transform: translateX(-100%); } /* Topbar: compact */ .TB-search { display: none; } .TB-search-mobile { display: flex; } /* Content: full-width */ .max-w-\[740px\] { max-width: 100%; } .max-w-\[640px\] { max-width: 100%; } .max-w-\[800px\] { max-width: 100%; } .px-8 { padding-left: 16px; padding-right: 16px; } /* InputBar: full width, smaller padding */ .IB { border-radius: 12px; } /* Welcome page: single column on small screens */ .grid-cols-2 { grid-template-columns: 1fr; } /* Agent cards: single column */ .ag-page .ag-grid { grid-template-columns: 1fr; } /* CmdK: full-width on mobile */ .cmdk-box { width: calc(100vw - 32px); max-width: 100%; } /* Artifact panel: overlay on mobile */ .RP { position: fixed; inset: 0; width: 100%; z-index: 300; border-radius: 0; } } @media (max-width: 480px) { .grid-cols-2 { grid-template-columns: 1fr; } .grid-cols-3 { grid-template-columns: 1fr 1fr; } .grid-cols-4 { grid-template-columns: 1fr 1fr; } /* Even more compact on very small screens */ .px-8 { padding-left: 12px; padding-right: 12px; } .text-\[26px\] { font-size: 22px; } /* Model selector: narrower */ .IB-model-btn span { max-width: 80px; } } /* ── Dark mode: skeleton fix ─────────────────────────────────── */ .R.dark .skel { background: var(--sa, #1e293b); } .R.dark .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); } /* ══════════════════════════════════════════════════════════════ P2 FIXES — Timestamps, Versioning, Hints, Session Timeout ══════════════════════════════════════════════════════════════ */ /* ── C8: Message Timestamps ──────────────────────────────────── */ .msg-ts { font-size: 10px; color: var(--t4, #94a3b8); opacity: 0; transition: opacity 0.15s; white-space: nowrap; flex-shrink: 0; } .msg:hover .msg-ts, .ma-foot:hover .msg-ts { opacity: 1; } .mu-ts { text-align: right; margin-top: 2px; } .ma-foot { display: flex; align-items: center; gap: 8px; } /* ── C2: Version Navigation ──────────────────────────────────── */ .ma-versions { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--bl2, #e2e8f0); border-radius: 6px; padding: 1px 2px; margin-right: 4px; } .ma-ver-label { font-size: 11px; font-weight: 600; color: var(--t3, #64748b); padding: 0 4px; min-width: 28px; text-align: center; } .ma-versions .mact { padding: 2px; } .ma-versions .mact:disabled { opacity: 0.3; cursor: default; } /* ── F2: Contextual Hints ────────────────────────────────────── */ .ctx-hint { animation: ctxHintIn 0.3s ease; } .ctx-hint-body { display: flex; align-items: center; gap: 8px; background: var(--brand, #5C31FF); color: #fff; font-size: 12px; padding: 6px 10px 6px 12px; border-radius: 8px; box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 30%, transparent); white-space: nowrap; } .ctx-hint-close { background: rgba(255,255,255,0.2); border: none; color: #fff; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; } .ctx-hint-close:hover { background: rgba(255,255,255,0.35); } @keyframes ctxHintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── X6: Session Timeout Banner ──────────────────────────────── */ .session-timeout-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); background: #FFFBEB; border-bottom: 1px solid #FDE68A; padding: 8px 16px; animation: stBannerIn 0.3s ease; } .R.dark .session-timeout-banner { background: #451a03; border-color: #92400e; } .session-timeout-inner { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 13px; color: #92400E; max-width: 800px; margin: 0 auto; } .R.dark .session-timeout-inner { color: #FDE68A; } .session-timeout-actions { display: flex; gap: 6px; } .session-timeout-btn { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; transition: all 0.15s; } .session-timeout-btn.pri { background: #D97706; color: #fff; } .session-timeout-btn.pri:hover { background: #B45309; } .session-timeout-btn.sec { background: transparent; color: #92400E; border: 1px solid #FDE68A; } .session-timeout-btn.sec:hover { background: #FEF3C7; } @keyframes stBannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* ── T1: Read notifications dimmed ───────────────────────────── */ .notif-read .notif-item-dot { opacity: 0.25; } .notif-read .notif-item-t { color: var(--t3); } /* ══════════════════════════════════════════════════════════════ P3 FIXES — Final Polish Round ══════════════════════════════════════════════════════════════ */ /* ── S2: Inline Rename Input ─────────────────────────────────── */ /* `--sf` is not declared anywhere in the theme tokens; the fallback #fff always wins, so this input rendered as a white box in dark mode (illegible cream text on white). Swap to `--s` which IS defined for both themes (light: #FFFFFF, dark: #131316). Same pattern applied to every `var(--s, #fff)` in this file below. */ .sb-rename-input { flex: 1; min-width: 0; border: 1px solid var(--brand, #5C31FF); outline: none; background: var(--s, #fff); color: var(--t, #1e293b); font-family: inherit; font-size: 13px; padding: 2px 6px; border-radius: 6px; line-height: 1.4; } /* ── S5: Hover Preview Tooltip ───────────────────────────────── */ .sb-preview { position: absolute; left: 100%; top: 0; margin-left: 8px; z-index: var(--z-nested-dd); background: var(--s, #fff); border: 1px solid var(--bl2, #e2e8f0); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 10px 12px; min-width: 200px; max-width: 280px; pointer-events: none; animation: sbPrevIn 0.15s ease; } .sb-preview-title { font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .sb-preview-text { font-size: 12px; color: var(--t3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sb-preview-time { font-size: 10px; color: var(--t4); margin-top: 6px; } @keyframes sbPrevIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } /* ── K2: Search Highlight ────────────────────────────────────── */ .cmdk-hl { background: #FBBF24; color: #1e293b; border-radius: 4px; padding: 0 1px; font-weight: inherit; } .R.dark .cmdk-hl { background: #92400E; color: #FEF3C7; } /* CmdK footer with keyboard hints */ .cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--bl2, #e2e8f0); font-size: 11px; color: var(--t4, #94a3b8); font-family: var(--sans, 'DM Sans', sans-serif); } .cmdk-foot kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 4px; background: var(--bg, #f8fafc); border: 1px solid var(--bl2, #e2e8f0); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; color: var(--t3, #64748b); margin: 0 2px; } /* ── A1/A2/A3: Agent Card Enhancements ───────────────────────── */ .ag-card-preview { padding: 8px 10px; margin: 0 -2px; border-top: 1px solid var(--bl2, #e2e8f0); animation: ctxHintIn 0.2s ease; } .ag-card-prompt { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; margin-bottom: 3px; border: 1px solid var(--bl2, #e2e8f0); border-radius: 6px; background: var(--s, #fff); color: var(--t2); font-size: 12px; cursor: pointer; font-family: inherit; text-align: left; transition: all 0.15s; } .ag-card-prompt:hover { border-color: var(--brand); color: var(--brand); background: var(--bl, #EDE9FE); } .ag-card-try { display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bl2, #e2e8f0); background: transparent; color: var(--t3); font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; } .ag-card-try:hover { border-color: var(--brand); color: var(--brand); } .ag-card-badge-new { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #DCFCE7; color: #16A34A; letter-spacing: 0.5px; } .R.dark .ag-card-badge-new { background: #14532D; color: #4ADE80; } .ag-card-caps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; } .ag-card-cap-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); } .ag-card-dept { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--sh); color: var(--t4); } /* A2: Sort pills */ .ag-sort-sep { width: 1px; height: 20px; background: var(--bl2, #e2e8f0); margin: 0 4px; flex-shrink: 0; } .ag-sort { padding: 5px 10px; border-radius: 8px; border: none; background: transparent; color: var(--t3); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; } .ag-sort:hover { color: var(--t); background: var(--sh); } /* Active state: brand-tinted pill instead of `var(--sf-hover, #f1f5f9)` — that token isn't declared anywhere, so the fallback #f1f5f9 (near- white) always won, producing washed-out cream text on white in dark theme. Brand tint reads correctly in both themes and matches the "active" emphasis of other pill controls across the platform. */ .ag-sort.on { background: var(--brandL, color-mix(in srgb, var(--brand) 10%, transparent)); color: var(--brand); font-weight: 600; } /* ── P3: Notification Toggle Switch ──────────────────────────── */ .notif-toggle { width: 40px; height: 22px; border-radius: 12px; border: none; padding: 2px; background: var(--bl2, #e2e8f0); cursor: pointer; position: relative; transition: background 0.2s; flex-shrink: 0; } .notif-toggle.on { background: var(--brand, #5C31FF); } .notif-toggle-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .notif-toggle.on .notif-toggle-dot { transform: translateX(18px); } /* ── X7: Offline Banner ──────────────────────────────────────── */ .offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-topbar); background: #FEE2E2; border-bottom: 1px solid #FECACA; padding: 8px 16px; animation: stBannerIn 0.3s ease; } .R.dark .offline-banner { background: #450a0a; border-color: #991B1B; } .offline-inner { display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 13px; color: #991B1B; max-width: 800px; margin: 0 auto; } .R.dark .offline-inner { color: #FCA5A5; } /* ── C9: Inline Images & Files in Responses ──────────────────── */ .msg-inline-img { max-width: 400px; max-height: 300px; border-radius: 12px; border: 1px solid var(--bl2, #e2e8f0); margin: 8px 0; cursor: pointer; transition: transform 0.15s; } .msg-inline-img:hover { transform: scale(1.02); } .msg-inline-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--bl2, #e2e8f0); background: var(--s, #fff); margin: 6px 0; cursor: pointer; transition: all 0.15s; text-decoration: none; color: var(--t2); } .msg-inline-file:hover { border-color: var(--brand); background: var(--bl, #EDE9FE); } .msg-inline-file-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--bl, #EDE9FE); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .msg-inline-file-name { font-size: 13px; font-weight: 500; } .msg-inline-file-meta { font-size: 11px; color: var(--t4); } /* ── X3: Illustrated Empty States ────────────────────────────── */ .empty-state-illust { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; } .empty-state-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: var(--bl, #EDE9FE); color: var(--brand, #5C31FF); } .empty-state-icon svg { width: 28px; height: 28px; } .empty-state-title { font-size: 16px; font-weight: 600; color: var(--t); margin-bottom: 4px; } .empty-state-desc { font-size: 13px; color: var(--t3); max-width: 300px; line-height: 1.5; } .empty-state-action { margin-top: 14px; padding: 8px 18px; border-radius: 12px; background: var(--brand, #5C31FF); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; } .empty-state-action:hover { opacity: 0.9; } /* ══════════════════════════════════════════════════════════════ @AGENT MENTION + FILE ATTACHMENTS CSS ══════════════════════════════════════════════════════════════ */ /* ── InputBar: Agent mention pill ────────────────────────────── */ .ib-agent-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 8px; background: var(--bl, #EDE9FE); border: 1px solid var(--brand, #5C31FF); animation: ctxHintIn 0.2s ease; } .ib-agent-pill-av { width: 18px; height: 18px; border-radius: 6px; color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ib-agent-pill-name { font-size: 12px; font-weight: 600; color: var(--brand, #5C31FF); } .ib-agent-pill-x { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--t4); cursor: pointer; padding: 0; border-radius: 4px; transition: all 0.15s; } .ib-agent-pill-x:hover { color: var(--err, #ef4444); background: rgba(239, 68, 68, 0.1); } /* ── User Message: Agent badge ───────────────────────────────── */ .mu-agent-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 8px; background: var(--bl, #EDE9FE); margin-bottom: 4px; } .mu-agent-av { width: 16px; height: 16px; border-radius: 4px; color: #fff; font-size: 7px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mu-agent-name { font-size: 11px; font-weight: 600; color: var(--brand); } /* ── User Message: File attachments ──────────────────────────── */ .mu-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mu-file-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent); color: var(--t3); } .mu-file-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── S4: Admin section — improved 3-column layout ────────────── */ @media (min-width: 769px) { /* doubled class wins over any inline or single-class override */ .admin-grid.admin-grid { grid-template-columns: repeat(3, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ VOICE — World-class voice interaction UX ═══════════════════════════════════════════════════════════════════ */ /* ── VoiceButton Container ────────────────────────────────────────── */ .vb-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; } .vb-container { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .vb-ring-canvas { z-index: 0; } /* ── Main Button ─────────────────────────────────────────────────── */ .vb-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--s2, #f8f9fa); color: var(--text-3, #6b7280); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; outline: none; } .vb-btn:hover { background: var(--brand, #7C3AED); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12); } .vb-btn:active { transform: scale(0.95); } .vb-btn:disabled { opacity: 0.4; cursor: default; transform: none; } /* Active state — recording */ .vb-btn.active { background: var(--brand, #7C3AED); color: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); animation: vb-pulse 2s ease-in-out infinite; } @keyframes vb-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2); } 50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.08); } } /* Error state */ .vb-btn.error { background: var(--err, #ef4444); color: #fff; animation: vb-shake 0.4s ease; } @keyframes vb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* ── Processing spinner ──────────────────────────────────────────── */ .vb-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: vb-spin 0.8s linear infinite; } @keyframes vb-spin { to { transform: rotate(360deg); } } /* ── Timer ────────────────────────────────────────────────────────── */ .vb-timer { font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand, #7C3AED); background: rgba(124, 58, 237, 0.08); padding: 1px 6px; border-radius: 4px; animation: vb-fade-in 0.3s ease; } /* ── Cancel button ────────────────────────────────────────────────── */ .vb-cancel { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--s3, #e5e7eb); color: var(--text-4, #9ca3af); border: none; cursor: pointer; z-index: 2; transition: all 0.2s ease; animation: vb-fade-in 0.2s ease; } .vb-cancel:hover { background: var(--err, #ef4444); color: #fff; transform: scale(1.1); } /* ── Status label ─────────────────────────────────────────────────── */ .vb-status { font-size: 9px; color: var(--text-4, #9ca3af); animation: vb-dots 1.5s steps(4, end) infinite; } /* ── Fade in utility ──────────────────────────────────────────────── */ @keyframes vb-fade-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* ── Full-width voice overlay — when recording from InputBar ─────── */ .IB .vb-wrap { flex-direction: row; gap: 0; } .IB .vb-container { width: 36px; height: 36px; } .IB .vb-timer { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; } .IB .vb-status { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; } /* ── InputBar voice listening state — subtle glow on entire bar ──── */ .IB:has(.vb-btn.active) { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15), 0 0 20px rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.3); transition: all 0.3s ease; } /* ═══════════════════════════════════════════════════════════════════ MsgActions — Speaking state + progress ═══════════════════════════════════════════════════════════════════ */ .mact.speaking { color: var(--brand, #7C3AED); background: rgba(124, 58, 237, 0.08); position: relative; } .mact.speaking:hover { background: rgba(124, 58, 237, 0.15); } .mact-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } .mact-spinner { width: 12px; height: 12px; border: 1.5px solid rgba(124, 58, 237, 0.2); border-top-color: var(--brand, #7C3AED); border-radius: 50%; animation: vb-spin 0.7s linear infinite; } /* ═══════════════════════════════════════════════════════════════════ Settings — Voice tab ═══════════════════════════════════════════════════════════════════ */ .SET-voice-opt { padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--border-2, #e5e7eb); background: var(--surface, #fff); cursor: pointer; transition: all 0.2s ease; } .SET-voice-opt:hover { border-color: rgba(124, 58, 237, 0.3); background: rgba(124, 58, 237, 0.03); } .SET-voice-opt.on { border-color: var(--brand, #7C3AED); background: rgba(124, 58, 237, 0.06); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08); } .SET-voice-opt-name { font-size: 14px; font-weight: 600; color: var(--text, #1f2937); margin-bottom: 2px; } .SET-voice-opt.on .SET-voice-opt-name { color: var(--brand, #7C3AED); } .SET-voice-opt-desc { font-size: 11px; color: var(--text-4, #9ca3af); } /* Speed slider */ .SET-voice-slider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--border-2, #e5e7eb); outline: none; } .SET-voice-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand, #7C3AED); cursor: pointer; box-shadow: 0 1px 4px rgba(124, 58, 237, 0.3); transition: transform 0.15s ease; } .SET-voice-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .SET-voice-slider::-webkit-slider-thumb:active { transform: scale(0.95); } .SET-voice-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand, #7C3AED); border: none; cursor: pointer; } /* Keyboard shortcut badges */ .SET-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 600; font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace); background: var(--s2, #f3f4f6); border: 1px solid var(--border-2, #e5e7eb); color: var(--text-3, #6b7280); box-shadow: 0 1px 0 var(--border-2, #e5e7eb); } /* ═══════════════════════════════════════════════════════════════════ Dark mode overrides ═══════════════════════════════════════════════════════════════════ */ .dark .vb-btn { background: rgba(255, 255, 255, 0.06); color: #94a3b8; } .dark .vb-btn:hover { background: var(--brand, #7C3AED); color: #fff; } .dark .vb-cancel { background: rgba(255, 255, 255, 0.1); color: #64748b; } .dark .vb-cancel:hover { background: var(--err, #ef4444); color: #fff; } .dark .vb-timer { background: rgba(124, 58, 237, 0.15); } .dark .SET-voice-opt { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } .dark .SET-voice-opt:hover { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.2); } .dark .SET-voice-opt.on { background: rgba(124, 58, 237, 0.1); border-color: var(--brand); } .dark .SET-voice-slider { background: rgba(255, 255, 255, 0.08); } .dark .SET-kbd { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #94a3b8; box-shadow: none; } /* ════════════════════════════════════════════════════════════════════════════ VOICE — World-class mic button, waveform ring, TTS playback states ════════════════════════════════════════════════════════════════════════════ */ /* ── Voice Button Container ─────────────────────────────────────────────── */ .vb-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; } .vb-container { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .vb-btn { position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 12px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; color: var(--t3, #94a3b8); } .vb-btn:hover:not(:disabled) { background: var(--bl, #f1f5f9); color: var(--brand, #7c3aed); } /* Active / listening state */ .vb-btn.active { background: var(--brand, #7c3aed); color: #fff; border-radius: 12px; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 4px 12px rgba(124, 58, 237, 0.3); animation: vb-pulse 2s ease-in-out infinite; } @keyframes vb-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 4px 12px rgba(124, 58, 237, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.08), 0 4px 16px rgba(124, 58, 237, 0.4); } } /* Error state */ .vb-btn.error { background: var(--err, #ef4444); color: #fff; animation: vb-shake 0.4s ease-in-out; } @keyframes vb-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } .vb-btn:disabled { opacity: 0.4; cursor: default; } /* ── Spinner (processing state) ──────────────────────────────────────────── */ .vb-spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: vb-spin 0.6s linear infinite; } .vb-btn:not(.active) .vb-spinner { border-color: rgba(124, 58, 237, 0.2); border-top-color: var(--brand, #7c3aed); } @keyframes vb-spin { to { transform: rotate(360deg); } } /* ── Canvas ring — positioned behind button ──────────────────────────────── */ .vb-ring-canvas { pointer-events: none; transition: opacity 0.3s ease; } /* ── Timer badge ─────────────────────────────────────────────────────────── */ .vb-timer { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand, #7c3aed); background: var(--bl, #f1f5f9); padding: 1px 8px; border-radius: 8px; white-space: nowrap; animation: vb-fadeIn 0.2s ease; } /* ── Cancel button ───────────────────────────────────────────────────────── */ .vb-cancel { position: absolute; top: -6px; right: -6px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--surf, #fff); color: var(--t3, #94a3b8); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); transition: all 0.15s; animation: vb-fadeIn 0.2s ease; } .vb-cancel:hover { color: var(--err, #ef4444); background: #fef2f2; } @keyframes vb-fadeIn { from { opacity: 0; transform: translateX(-50%) scale(0.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } } .vb-cancel { animation: vb-fadeInPlain 0.2s ease; } @keyframes vb-fadeInPlain { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } /* ── Status label ────────────────────────────────────────────────────────── */ .vb-status { font-size: 10px; color: var(--brand, #7c3aed); font-weight: 500; animation: vb-fadeInPlain 0.2s ease; white-space: nowrap; } /* ── MsgActions speaking state ───────────────────────────────────────────── */ .mact.speaking { color: var(--brand, #7c3aed); background: rgba(124, 58, 237, 0.1); position: relative; } .mact-spinner { width: 14px; height: 14px; border: 1.5px solid rgba(124, 58, 237, 0.2); border-top-color: var(--brand, #7c3aed); border-radius: 50%; animation: vb-spin 0.6s linear infinite; } .mact-progress { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* ── InputBar: voice active overlay ──────────────────────────────────────── */ .IB:has(.vb-btn.active) { border-color: var(--brand, #7c3aed); box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.08); } /* ── Voice Settings tab ──────────────────────────────────────────────────── */ .voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .voice-opt { padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--bdr, #e2e8f0); background: var(--surf, #fff); cursor: pointer; text-align: center; transition: all 0.15s; } .voice-opt:hover { border-color: var(--brand, #7c3aed); } .voice-opt.on { border-color: var(--brand, #7c3aed); background: rgba(124, 58, 237, 0.05); box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1); } .voice-opt-name { font-size: 13px; font-weight: 600; color: var(--text, #1e293b); } .voice-opt-desc { font-size: 11px; color: var(--t3, #94a3b8); margin-top: 2px; } /* ── Dark mode overrides ─────────────────────────────────────────────────── */ .dark .vb-btn:hover:not(:disabled) { background: rgba(124, 58, 237, 0.15); } .dark .vb-timer { background: rgba(124, 58, 237, 0.15); } .dark .vb-cancel { background: var(--surf2, #1e293b); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } /* ── ACE Dark mode — missing component overrides ─────────────── */ .R.dark .err-card { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; } .R.dark .cap.res.on { background: #78350F; border-color: #92400E; color: #FCD34D; } .R.dark .share-revoke:hover { background: #450a0a; color: #f87171; } /* ── Ace Toast Tooltip (feedback / copy confirmation) ──────────────── */ .ace-toast-tip { position: fixed; top: 16px; right: 16px; z-index: 9999; padding: 8px 16px; border-radius: 8px; background: var(--s, #fff); border: 1px solid var(--bl2, #e2e8f0); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); font-size: 13px; font-weight: 500; color: var(--t, #1e293b); animation: aceToastTipIn 0.2s ease-out, aceToastTipOut 0.3s ease-in 2.2s forwards; pointer-events: none; white-space: nowrap; } @keyframes aceToastTipIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes aceToastTipOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* ── Citation markers ───────────────────────────────────────────────── * Inline [N] chips inside AI responses — make them pop in body text * without being garish. Streamed-in citations briefly "pop" so the eye * catches them, then settle. Hover/focus/ring/glow are handled by the * Tailwind utilities on the button itself (see CitationMarker.jsx); * this CSS only adds the entrance animation + reduced-motion fallback, * plus a vertical-align nudge so the slightly bigger chip doesn't * disturb line-height inside long paragraphs. */ @keyframes citationMarkerPopIn { 0% { transform: scale(0.6); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55.0%, transparent); } 35% { transform: scale(1.18); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent); } 70% { transform: scale(0.96); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); } 100% { transform: scale(1); box-shadow: 0 1px 3px color-mix(in srgb, var(--brand) 35%, transparent); } } /* doubled class raises specificity to [0,2,0] for vertical-align override */ .citation-marker.citation-marker { animation: citationMarkerPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; vertical-align: middle; position: relative; top: -0.1em; } @media (prefers-reduced-motion: reduce) { /* :root prefix raises specificity, removing need for !important */ :root .citation-marker { animation: none; transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out; } :root .citation-marker:hover { transform: none; } } /* --- ShellV2.css --- */ /* ════════════════════════════════════════════════════════════════ Workroom Shell V2 — canonical Sidebar (S-*) + Topbar (TB-*). Lifted from workroom-design/styles.css (lines 16, 48-132). Markup mirrors workroom-design/shell.jsx Sidebar + Topbar. Scope: rules apply inside [data-workroom-v2] (the workroom root div) only. Existing v1 classes (sb, topbar) continue to function alongside; v2 styling overlays via dual class names. ════════════════════════════════════════════════════════════════ */ /* ── Sidebar ─────────────────────────────────────────────────── */ [data-workroom-v2] .S { width: 248px; background: var(--beige); border-right: 1px solid var(--beige-b); display: flex; flex-direction: column; flex-shrink: 0; font-size: 13px; transition: width .2s cubic-bezier(.4, 0, .2, 1); } [data-workroom-v2] .S.collapsed { width: 56px; } /* Brand block */ [data-workroom-v2] .S-brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; cursor: default; } [data-workroom-v2] .S-brand-mark { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } [data-workroom-v2] .S-brand-name { font: 600 14px var(--sans); letter-spacing: -0.01em; color: var(--t); line-height: 1.15; } [data-workroom-v2] .S-brand-zone { font: 500 11.5px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--t3); margin-top: 4px; } /* New conversation button */ [data-workroom-v2] .S-new { margin: 4px 12px 10px; padding: 10px 12px; background: var(--brand); border: 1px solid var(--brand); border-radius: 8px; display: flex; align-items: center; gap: 9px; font: 600 12.5px var(--sans); color: #fff; cursor: pointer; box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 25%, transparent), 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent); transition: filter .12s, transform .12s; } [data-workroom-v2] .S-new:hover { filter: brightness(1.08); transform: translateY(-1px); } [data-workroom-v2] .S-new:active { transform: translateY(0); } [data-workroom-v2] .S-new svg { width: 14px; height: 14px; color: #fff; } [data-workroom-v2] .S-new kbd { margin-left: auto; font: 500 11px var(--mono); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 0 4px; background: rgba(255,255,255,.08); } /* Body scroll region */ [data-workroom-v2] .S-body { flex: 1; overflow: auto; padding: 0 10px 12px; } /* Section header */ [data-workroom-v2] .S-sec { font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); padding: 18px 10px 6px; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--beige-b); margin-top: 14px; padding-top: 14px; } /* Nav item (Home / Conversations / Agents / Apps / Runs / Artifacts / Shared) */ [data-workroom-v2] .S-it { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 6px; color: var(--t2); font: 500 12.5px var(--sans); cursor: pointer; line-height: 1.3; margin: 1px 0; transition: background .1s, color .1s; background: none; border: none; width: 100%; text-align: left; } [data-workroom-v2] .S-it:hover { background: rgba(255,255,255,.6); color: var(--t); } [data-workroom-v2] .S-it svg { width: 14px; height: 14px; color: var(--t3); flex-shrink: 0; } [data-workroom-v2] .S-it.on { background: var(--brandL); font-weight: 600; color: var(--t); } [data-workroom-v2] .S-it.on svg { color: var(--brand); } [data-workroom-v2] .S-it .ct, [data-workroom-v2] .S-it .pill { margin-left: auto; font: 500 11px var(--mono); color: var(--t4); } /* Recent conversation item */ [data-workroom-v2] .S-chat { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin: 1px 0; min-width: 0; position: relative; transition: background .1s; background: none; border: none; width: 100%; text-align: left; } [data-workroom-v2] .S-chat:hover { background: rgba(255,255,255,.6); } [data-workroom-v2] .S-chat-body { display: flex; flex-direction: column; flex: 1; min-width: 0; } [data-workroom-v2] .S-chat-title { display: flex; align-items: center; gap: 5px; font: 600 12.5px var(--sans); color: var(--t); min-width: 0; } [data-workroom-v2] .S-chat-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } [data-workroom-v2] .S-chat-title .star { color: var(--workroom-accent); font-size: 10px; flex-shrink: 0; line-height: 1; } [data-workroom-v2] .S-chat-meta { font: 400 11px var(--mono); color: var(--t4); margin-top: 2px; } [data-workroom-v2] .S-chat-meta .agent { color: var(--t4); font-weight: 500; } [data-workroom-v2] .S-chat.on { background: var(--beige-card); box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 0 0 1px rgba(20,20,30,.04); } [data-workroom-v2] .S-chat.on .S-chat-title { color: var(--t); font-weight: 600; } [data-workroom-v2] .S-chat.dragging { opacity: 0.4; } [data-workroom-v2] .S-chat.drop-target::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 2px; background: var(--brand); border-radius: 1px; } [data-workroom-v2] .S-chat-kebab { width: 18px; height: 18px; display: none; align-items: center; justify-content: center; color: var(--t4); border-radius: 4px; flex-shrink: 0; cursor: pointer; } [data-workroom-v2] .S-chat-kebab:hover { background: var(--beige-pill); color: var(--t); } [data-workroom-v2] .S-chat-kebab svg { width: 13px; height: 13px; } [data-workroom-v2] .S-chat:hover .S-chat-kebab, [data-workroom-v2] .S-chat.on .S-chat-kebab { display: flex; } [data-workroom-v2] .S-view-all { font: 500 11px var(--sans); color: var(--brand); padding: 10px 10px 4px; cursor: pointer; border-top: 1px solid var(--beige-rule); margin-top: 6px; background: none; border-left: none; border-right: none; border-bottom: none; width: 100%; text-align: left; } [data-workroom-v2] .S-view-all:hover { text-decoration: underline; } /* Footer */ [data-workroom-v2] .S-foot { padding: 14px 10px 10px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--beige-rule); } [data-workroom-v2] .S-foot-link { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 6px; font: 500 12px var(--sans); color: var(--t3); cursor: pointer; background: none; border: none; width: 100%; text-align: left; } [data-workroom-v2] .S-foot-link:hover { background: rgba(255,255,255,.6); color: var(--t); } [data-workroom-v2] .S-foot-link svg { width: 13px; height: 13px; color: var(--t4); } /* ── Main shell ──────────────────────────────────────────────── */ [data-workroom-v2] .M { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--beige-pg); } /* ── Topbar ──────────────────────────────────────────────────── */ [data-workroom-v2] .TB { height: 48px; background: #fff; border-bottom: 1px solid var(--beige-b); display: flex; align-items: center; padding: 0 14px 0 10px; gap: 12px; flex-shrink: 0; } [data-workroom-v2] .TB-icon-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--t2); background: none; border: none; transition: background .1s; } [data-workroom-v2] .TB-icon-btn:hover { background: var(--beige-pg); } [data-workroom-v2] .TB-icon-btn svg { width: 16px; height: 16px; } [data-workroom-v2] .TB-divider { width: 1px; height: 18px; background: var(--beige-b); } [data-workroom-v2] .TB-scope { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--t3); padding: 4px 2px 4px 0; } [data-workroom-v2] .TB-scope-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } [data-workroom-v2] .TB-bc { font: 500 12.5px var(--sans); color: var(--t3); display: flex; align-items: center; gap: 8px; min-width: 0; } [data-workroom-v2] .TB-bc strong { color: var(--t); font-weight: 600; } [data-workroom-v2] .TB-bc-title { color: var(--t); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } [data-workroom-v2] .TB-bc svg { width: 11px; height: 11px; color: var(--t4); flex-shrink: 0; } [data-workroom-v2] .TB-spacer { flex: 1; } [data-workroom-v2] .TB-search { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--sans); color: var(--t3); background: var(--beige); border: 1px solid var(--beige-b); padding: 5px 12px; border-radius: 8px; min-width: 260px; cursor: pointer; transition: border-color .12s, background .12s; } [data-workroom-v2] .TB-search:hover { border-color: #D6CFBE; background: #fff; } [data-workroom-v2] .TB-search svg { width: 13px; height: 13px; color: var(--t4); } [data-workroom-v2] .TB-search-text { flex: 1; } [data-workroom-v2] .TB-search kbd { font: 400 11px var(--mono); color: var(--t4); border: 1px solid var(--beige-b); border-radius: 4px; padding: 1px 5px; background: #fff; } [data-workroom-v2] .TB-link { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--t2); padding: 5px 10px; border-radius: 6px; cursor: pointer; background: none; border: none; } [data-workroom-v2] .TB-link:hover { background: var(--beige-pg); color: var(--t); } [data-workroom-v2] .TB-link svg { width: 14px; height: 14px; color: var(--t3); } [data-workroom-v2] .TB-bell { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; background: none; border: none; } [data-workroom-v2] .TB-bell:hover { background: var(--beige-pg); } [data-workroom-v2] .TB-bell svg { width: 15px; height: 15px; color: var(--t2); } [data-workroom-v2] .TB-bell-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); border: 1.5px solid #fff; } [data-workroom-v2] .TB-avatar { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px 3px 4px; border-radius: 16px; background: var(--beige); border: 1px solid var(--beige-b); transition: border-color .12s; position: relative; } [data-workroom-v2] .TB-avatar:hover { border-color: #D6CFBE; } [data-workroom-v2] .TB-avatar .av { width: 22px; height: 22px; font-size: 11px; } [data-workroom-v2] .TB-avatar svg { width: 11px; height: 11px; color: var(--t3); } /* Generic avatar (used in sidebar footer + topbar avatar) */ [data-workroom-v2] .av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); flex-shrink: 0; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 720px) { [data-workroom-v2] .S { width: 100%; max-width: 280px; } [data-workroom-v2] .TB-search { min-width: 0; max-width: 180px; } [data-workroom-v2] .TB-search-text { display: none; } } /* --- ChatV2.css --- */ /* ════════════════════════════════════════════════════════════════ Workroom Chat V2 — canonical chat design source Lifted from workroom-design/styles.css (lines 811-1000). Markup mirrors workroom-design/chat.jsx ChatPage + ChatHeader + ChatComposer + AiMessage + UserMessage + followups. These rules are *additive* on top of the existing chat structure. The existing ChatPage owns streaming, A2UI, citations, artifacts; this stylesheet only updates the visual language to match design. Scope: rules apply inside .workroom-chat-v2 root only — set on the chat surface when workroom_v2 feature is enabled. This prevents collision with v1 chat styles still used elsewhere. ════════════════════════════════════════════════════════════════ */ /* ── Page shell ──────────────────────────────────────────────── */ .workroom-chat-v2 { background: var(--beige-pg); display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ── Chat header — agent chip + actions ──────────────────────── */ .workroom-chat-v2 .chat-header { padding: 14px 32px; background: #fff; border-bottom: 1px solid var(--beige-rule); display: flex; align-items: center; gap: 14px; flex-shrink: 0; position: relative; z-index: 10; } .workroom-chat-v2 .chat-header-agent { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 8px; cursor: pointer; transition: background .12s; position: relative; background: none; border: none; font: inherit; } .workroom-chat-v2 .chat-header-agent:hover { background: var(--beige-pg); } .workroom-chat-v2 .chat-header-agent.chat-mode { cursor: default; } .workroom-chat-v2 .chat-header-agent.chat-mode:hover { background: transparent; } .workroom-chat-v2 .chat-header-agent .caret { width: 11px; height: 11px; color: var(--t4); flex-shrink: 0; } .workroom-chat-v2 .chat-header-agent.chat-mode .caret { display: none; } .workroom-chat-v2 .chat-header-glyph { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 11px var(--sans); flex-shrink: 0; background-size: cover; background-position: center; } .workroom-chat-v2 .chat-header-id { min-width: 0; text-align: left; } .workroom-chat-v2 .chat-header-name { font: 600 13.5px var(--sans); color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workroom-chat-v2 .chat-header-meta { font: 400 11px var(--mono); color: var(--t4); } .workroom-chat-v2 .chat-header-spacer { flex: 1; } .workroom-chat-v2 .chat-header-action { background: none; border: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--t3); border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; } .workroom-chat-v2 .chat-header-action:hover { background: var(--beige-pg); color: var(--t); } .workroom-chat-v2 .chat-header-action svg { width: 15px; height: 15px; } /* Header artifact pin */ .workroom-chat-v2 .chat-header-art { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: var(--brandL); border: 1px solid #D9CFFD; border-radius: 16px; font: 500 11.5px var(--sans); color: var(--brand); cursor: pointer; flex-shrink: 0; transition: background .12s; margin-left: 8px; } .workroom-chat-v2 .chat-header-art:hover { background: #E5DDFE; } .workroom-chat-v2 .chat-header-art svg { width: 11px; height: 11px; } .workroom-chat-v2 .chat-header-art .n { font: 600 11px var(--mono); padding: 0 5px; background: #fff; border-radius: 8px; } /* ── Scroll region + inner container ─────────────────────────── */ .workroom-chat-v2 .chat-scroll { flex: 1; overflow-y: auto; padding: 28px 0 32px; scroll-behavior: smooth; } .workroom-chat-v2 .chat-inner { max-width: 760px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 32px; } /* ── User message bubble ─────────────────────────────────────── */ .workroom-chat-v2 .msg-user { display: flex; justify-content: flex-end; align-items: flex-start; animation: wrChatMsgIn .25s cubic-bezier(.4, 0, .2, 1); flex-direction: column; align-items: flex-end; /* override for column layout w/ trailing meta */ } .workroom-chat-v2 .msg-user .bubble, .workroom-chat-v2 .msg-user .mu-t { background: var(--workroom-bubble-you); color: var(--t); font: 400 14.5px/1.55 var(--sans); padding: 9px 14px; border-radius: 16px; max-width: 70%; width: max-content; display: inline-block; } @keyframes wrChatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── AI message ──────────────────────────────────────────────── */ .workroom-chat-v2 .msg-ai { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; animation: wrChatMsgIn .25s cubic-bezier(.4, 0, .2, 1); } .workroom-chat-v2 .ai-head { display: flex; align-items: center; gap: 6px; } .workroom-chat-v2 .ai-head-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--ag-c, var(--brand)); border: 1px solid var(--beige-b); display: flex; align-items: center; justify-content: center; font: 600 9px var(--sans); color: #fff; flex-shrink: 0; background-size: cover; background-position: center; } .workroom-chat-v2 .ai-head-label { font: 600 12px var(--sans); color: var(--t); } .workroom-chat-v2 .ai-head-tier { font: 600 10px var(--sans); padding: 1px 6px; border-radius: 4px; background: #7C3AED15; color: #7C3AED; } .workroom-chat-v2 .ai-head-tier.balanced { background: #2563EB15; color: #2563EB; } .workroom-chat-v2 .ai-head-tier.fast { background: #16A34A15; color: #16A34A; } .workroom-chat-v2 .ai-body, .workroom-chat-v2 .msg-ai .ma-body { font: 400 14.5px/1.6 var(--sans); color: var(--t); max-width: 760px; } .workroom-chat-v2 .ai-body p + p, .workroom-chat-v2 .msg-ai .ma-body p + p { margin-top: 12px; } .workroom-chat-v2 .ai-body strong, .workroom-chat-v2 .msg-ai .ma-body strong { font-weight: 600; } .workroom-chat-v2 .ai-body code, .workroom-chat-v2 .msg-ai .ma-body code { font: 500 13px var(--mono); background: var(--beige-pill); padding: 1px 5px; border-radius: 4px; } .workroom-chat-v2 .ai-body ul, .workroom-chat-v2 .ai-body ol, .workroom-chat-v2 .msg-ai .ma-body ul, .workroom-chat-v2 .msg-ai .ma-body ol { padding-left: 22px; margin: 8px 0; } .workroom-chat-v2 .ai-body li, .workroom-chat-v2 .msg-ai .ma-body li { margin: 3px 0; } .workroom-chat-v2 .ai-body .cursor, .workroom-chat-v2 .msg-ai .ma-body .cursor { display: inline-block; width: 8px; height: 14px; background: var(--brand); margin-left: 1px; vertical-align: -2px; animation: wrCaret 1s steps(2) infinite; border-radius: 2px; } @keyframes wrCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* ── Action row (copy, regenerate, vote) ─────────────────────── */ .workroom-chat-v2 .ai-actions { display: flex; align-items: center; gap: 1px; padding-top: 4px; opacity: 0.35; transition: opacity .15s; } .workroom-chat-v2 .msg-ai:hover .ai-actions, .workroom-chat-v2 .ai-actions.always-on { opacity: 1; } .workroom-chat-v2 .ai-act { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: var(--t4); background: transparent; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; } .workroom-chat-v2 .ai-act:hover { background: var(--beige-card); color: var(--t); } .workroom-chat-v2 .ai-act svg { width: 13px; height: 13px; } .workroom-chat-v2 .ai-act.voted-up { background: #16A34A15; border-color: #16A34A40; color: #16A34A; opacity: 1; } .workroom-chat-v2 .ai-act.voted-dn { background: #DC262615; border-color: #DC262640; color: #DC2626; opacity: 1; } /* ── Thinking dots (pre-first-token) ─────────────────────────── */ .workroom-chat-v2 .ai-thinking { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; } .workroom-chat-v2 .ai-thinking .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--t4); animation: wrThinking 1.2s ease-in-out infinite; } .workroom-chat-v2 .ai-thinking .dot:nth-child(2) { animation-delay: .15s; } .workroom-chat-v2 .ai-thinking .dot:nth-child(3) { animation-delay: .30s; } @keyframes wrThinking { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } /* ── Chat composer (sticky bottom) ───────────────────────────── */ .workroom-chat-v2 .chat-composer-wrap { padding: 0 32px 28px; background: var(--beige-pg); } .workroom-chat-v2 .chat-composer { max-width: 760px; margin: 0 auto; background: #fff; border: 1.5px solid #D6CFBE; border-radius: 20px; padding: 18px 22px 14px; box-shadow: 0 1px 3px rgba(20,20,30,.08), 0 4px 12px rgba(20,20,30,.06), 0 20px 44px rgba(20,20,30,.08); transition: border-color .15s, box-shadow .15s; } .workroom-chat-v2 .chat-composer.focused { border-color: #A89A7C; box-shadow: 0 1px 3px rgba(20,20,30,.08), 0 6px 16px rgba(20,20,30,.07), 0 28px 64px color-mix(in srgb, var(--brand) 10%, transparent), 0 0 0 5px color-mix(in srgb, var(--brand) 7.0%, transparent); } .workroom-chat-v2 .chat-composer .composer-input { font: 400 16px/1.55 var(--sans); color: var(--t); min-height: 48px; padding: 4px 0 10px; border: none; outline: none; background: transparent; resize: none; width: 100%; display: block; } .workroom-chat-v2 .chat-composer .composer-input::placeholder { color: var(--t4); } .workroom-chat-v2 .chat-composer-row { display: flex; align-items: center; gap: 6px; } .workroom-chat-v2 .chat-model { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); color: var(--t2); padding: 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid var(--beige-b); background: #fff; position: relative; } .workroom-chat-v2 .chat-model:hover { border-color: #D6CFBE; } .workroom-chat-v2 .chat-model .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--workroom-accent); } .workroom-chat-v2 .chat-model svg { width: 11px; height: 11px; color: var(--t4); } .workroom-chat-v2 .chat-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--t3); background: none; border: none; transition: background .1s, color .1s; position: relative; } .workroom-chat-v2 .chat-icon-btn:hover { background: var(--beige-pg); color: var(--t); } .workroom-chat-v2 .chat-icon-btn svg { width: 15px; height: 15px; } .workroom-chat-v2 .chat-icon-btn.voice.recording { background: var(--err-bg); color: var(--err); } /* ── Follow-up suggestion chips after last AI message ────────── */ .workroom-chat-v2 .followups { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; padding-left: 14px; border-left: 2px solid var(--beige-rule); position: relative; margin-top: 6px; } .workroom-chat-v2 .followups::before { content: "Continue"; position: absolute; left: 14px; top: -12px; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t4); background: var(--beige-pg); padding: 0 6px 0 0; } .workroom-chat-v2 .followup-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--beige-b); border-radius: 16px; padding: 6px 14px; font: 500 12.5px var(--sans); color: var(--t2); cursor: pointer; transition: border-color .12s, background .12s, transform .12s, box-shadow .12s; max-width: 260px; } .workroom-chat-v2 .followup-chip:hover { border-color: #D6CFBE; background: var(--beige-pg); color: var(--t); transform: translateY(-1px); } .workroom-chat-v2 .followup-chip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--t3); } .workroom-chat-v2 .followup-chip:hover svg { color: var(--brand); } .workroom-chat-v2 .followup-chip span.label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workroom-chat-v2 .followup-chip.primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 18%, transparent); } .workroom-chat-v2 .followup-chip.primary svg { color: rgba(255,255,255,.85); } /* ── Chat empty state (welcome screen) ───────────────────────── */ .workroom-chat-v2 .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 24px 80px; max-width: 640px; margin: 0 auto; width: 100%; } .workroom-chat-v2 .chat-empty-glyph { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 22px var(--sans); background: var(--brand); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent); background-size: cover; background-position: center; } .workroom-chat-v2 .chat-empty-title { font: 600 22px var(--serif); color: var(--t); letter-spacing: -0.015em; } .workroom-chat-v2 .chat-empty-desc { font: 400 14px/1.55 var(--serif); color: var(--t3); text-align: center; max-width: 480px; } .workroom-chat-v2 .chat-empty-prompts { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; margin-top: 12px; } .workroom-chat-v2 .chat-empty-prompt { background: #fff; border: 1px solid var(--beige-b); border-radius: 10px; padding: 11px 16px; font: 400 13px var(--sans); color: var(--t2); cursor: pointer; text-align: left; transition: border-color .12s, color .12s, transform .12s; } .workroom-chat-v2 .chat-empty-prompt:hover { border-color: var(--brand); color: var(--t); transform: translateX(2px); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 720px) { .workroom-chat-v2 .chat-header { padding: 12px 16px; } .workroom-chat-v2 .chat-inner { padding: 0 16px; } .workroom-chat-v2 .chat-composer-wrap { padding: 0 16px 20px; } .workroom-chat-v2 .chat-composer { padding: 14px 16px 10px; } .workroom-chat-v2 .msg-user .bubble { max-width: 85%; } } /* ── Respect reduced-motion preference ───────────────────────── */ /* Users with vestibular conditions or motion sensitivity set this in their OS. Animations don't add information — they're polish. Default platform stylesheet has a global rule for this; these selectors are scoped to the V2 namespaces so we don't depend on load order. */ @media (prefers-reduced-motion: reduce) { .hv4-urgent-dot, .hv4-do-arrow, .hv4-recent-row, .hv4-continue-pill, .workroom-chat-v2 .msg-user, .workroom-chat-v2 .msg-ai, .workroom-chat-v2 .ai-body .cursor, .workroom-chat-v2 .ai-thinking .dot, .wr-status.live .wr-status-dot { animation: none !important; transition: none !important; } } /* --- composer-base.css --- */ /* ════════════════════════════════════════════════════════════════ Composer base — shared atoms for any chat composer surface. Class names match design's prototype (composer / composer-input / composer-row / composer-mode-inline / composer-tool / composer-send / composer-spacer / ct-badge). These started life in HomeV2.css but are used in: - HomeV2 (the hero composer in the home page) - InputBar (the chat composer) — picks up ChatV2.css overrides when in workroom-chat-v2 scope - any future composer surface Surface-specific overrides (hero / chat / direct) live in their own scoped CSS file and override these base values via increased selector specificity. Lifted verbatim from workroom-design/styles.css (lines 404-441 + composer-row + composer-mode-inline rules). ════════════════════════════════════════════════════════════════ */ /* ── Composer shell ──────────────────────────────────────────── */ .composer { background: #fff; border: 1px solid var(--beige-b); border-radius: 14px; padding: 14px 16px 12px; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 8px 22px rgba(20,20,30,.04); transition: border-color .15s, box-shadow .15s; position: relative; } .composer.focused { border-color: #C6BCA3; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 12px 28px rgba(20,20,30,.06); } /* ── Textarea ────────────────────────────────────────────────── */ .composer-input { font: 400 14.5px/1.55 var(--sans); color: var(--t); min-height: 38px; padding: 2px 0 8px; outline: none; border: none; background: transparent; resize: none; width: 100%; display: block; } .composer-input::placeholder { color: var(--t4); } /* ── Toolbar row ─────────────────────────────────────────────── */ .composer-row { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--beige-rule); flex-wrap: nowrap; } .composer-spacer { flex: 1; min-width: 0; } /* ── Mode toggle (Assistant / Chat) ──────────────────────────── */ .composer-mode-inline { display: inline-flex; align-items: center; gap: 0; background: var(--beige-pg); border: 1px solid var(--beige-b); border-radius: 6px; padding: 2px; flex-shrink: 0; position: relative; } .composer-mode-inline button { border: none; background: none; font: 600 11px var(--sans); color: var(--t3); padding: 3px 9px; border-radius: 4px; cursor: pointer; transition: background .12s, color .12s; position: relative; } .composer-mode-inline button.on { background: #fff; color: var(--t); box-shadow: 0 1px 2px rgba(20,20,30,.06); } .composer-mode-inline button .hint { display: none; } /* ── Tool buttons (knowledge / tools / attach) ───────────────── */ .composer-tool { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--sans); color: var(--t3); padding: 4px 9px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .12s, color .12s; flex-shrink: 0; } .composer-tool:hover { background: var(--beige-pg); color: var(--t); } .composer-tool svg { width: 12px; height: 12px; } .composer-tool.active { color: var(--brand); background: var(--brandL); } .composer-tool .ct-badge { background: var(--brand); color: #fff; font: 600 10px var(--mono); padding: 1px 5px; border-radius: 8px; margin-left: 2px; min-width: 14px; text-align: center; } /* ── Send button ─────────────────────────────────────────────── */ .composer-send { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: filter .12s, transform .08s; } .composer-send:hover:not(:disabled) { filter: brightness(1.08); } .composer-send:active:not(:disabled) { transform: scale(.93); } .composer-send:disabled { background: var(--t5); cursor: not-allowed; } .composer-send svg { width: 14px; height: 14px; } /* --- workroom-atoms.css --- */ /* ════════════════════════════════════════════════════════════════ Workroom V2 shared atoms. These selectors started life in ConversationsV2.css because it was built first, but they are genuinely shared across every V2 page surface (Conversations, Agents, Apps, Runs, Artifacts, Shared). Moved here so that Conversations no longer carries an implicit "design system" role. Anyone touching Conversations no longer risks breaking other surfaces. Anyone touching shared atoms now obviously affects every consumer. The class prefix stays `cv-` for backward compatibility — the classes are baked into design's pages.jsx and used across half the platform. Renaming them would be a separate, larger PR. ════════════════════════════════════════════════════════════════ */ /* ── Section group header ────────────────────────────────────── */ .cv-group-hdr { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px 6px; border-bottom: 1px solid var(--beige-rule); } .cv-group-name { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .cv-group-ct { font: 500 11px var(--mono); color: var(--t4); } /* ── Filter / status chip ────────────────────────────────────── */ .cv-chip { background: #fff; border: 1px solid var(--beige-b); border-radius: 6px; padding: 5px 11px; font: 500 12px var(--sans); color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, color .12s, border-color .12s; } .cv-chip:hover:not(.on) { border-color: #D6CFBE; color: var(--t); } .cv-chip.on { background: var(--t); color: #FAFAF7; border-color: var(--t); } .cv-chip .n { font: 500 11px var(--mono); color: var(--t4); } .cv-chip.on .n { color: rgba(255,255,255,.6); } .cv-chip.has-filter { background: var(--brandL); border-color: #D9CFFD; color: var(--brand); } .cv-chip svg { width: 12px; height: 12px; } .cv-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; color: var(--brand); margin-left: 2px; transition: background .12s; background: none; border: none; cursor: pointer; padding: 0; } .cv-chip-x:hover { background: color-mix(in srgb, var(--brand) 15%, transparent); } .cv-chip-x svg { width: 9px; height: 9px; } /* ── Search input (pill style) ───────────────────────────────── */ .cv-search { flex: 1; max-width: 260px; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--beige-b); padding: 5px 11px; border-radius: 6px; transition: border-color .12s; } .cv-search:focus-within { border-color: #C6BCA3; } .cv-search svg { width: 13px; height: 13px; color: var(--t4); } .cv-search input { border: none; outline: none; background: none; flex: 1; font: 400 13px var(--sans); color: var(--t); min-width: 0; } .cv-search input::placeholder { color: var(--t4); } /* ── Sort dropdown ───────────────────────────────────────────── */ .cv-sort { font: 500 12px var(--sans); color: var(--t3); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; cursor: pointer; position: relative; background: none; border: none; } .cv-sort:hover { background: var(--beige-pg); color: var(--t); } .cv-sort svg { width: 11px; height: 11px; } .cv-sort-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--beige-b); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 14px 36px rgba(20,20,30,.12); padding: 5px; min-width: 180px; z-index: 50; } .cv-sort-menu-item { display: flex; align-items: center; padding: 7px 10px; font: 500 12.5px var(--sans); color: var(--t); cursor: pointer; border-radius: 7px; transition: background .08s; background: none; border: none; width: 100%; text-align: left; } .cv-sort-menu-item:hover { background: var(--beige-pg); } .cv-sort-menu-check { margin-left: auto; color: var(--brand); } .cv-sort-menu-check svg { width: 13px; height: 13px; } /* ── Empty state ─────────────────────────────────────────────── */ .cv-empty { padding: 64px 24px 48px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: cv-empty-in .25s ease-out; } @keyframes cv-empty-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cv-empty-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--beige); border: 1px solid var(--beige-b); display: flex; align-items: center; justify-content: center; color: var(--t4); margin-bottom: 4px; } .cv-empty-icon svg { width: 18px; height: 18px; } .cv-empty-title { font: 600 14.5px var(--sans); color: var(--t); } .cv-empty-desc { font: 400 13px/1.55 var(--serif); color: var(--t3); max-width: 380px; } .cv-empty-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } .cv-empty-action { background: none; border: 1px solid var(--beige-b); color: var(--t2); font: 500 12.5px var(--sans); cursor: pointer; padding: 7px 14px; border-radius: 8px; transition: background .12s, color .12s, border-color .12s, transform .08s; } .cv-empty-action:hover { background: var(--beige-pg); color: var(--t); border-color: #D6CFBE; } .cv-empty-action.primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 18%, transparent); } .cv-empty-action.primary:hover { filter: brightness(1.08); background: var(--brand); } /* ── Primary button (used in section headers) ────────────────── */ .cv-btn-primary { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font: 600 12px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: filter .12s; } .cv-btn-primary:hover { filter: brightness(1.08); } .cv-btn-primary svg { width: 12px; height: 12px; } /* ── Skeleton loaders ────────────────────────────────────────── */ /* Lightweight shimmer for "data is in flight" states. Used by V2 surfaces between their initial render and the first response from the data provider. Distinct from the empty state which reads as a terminal "nothing here" message and confused users who saw it during loading. */ .wr-skel { background: linear-gradient(90deg, var(--beige-pg) 0%, var(--beige-card) 50%, var(--beige-pg) 100%); background-size: 200% 100%; animation: wr-skel-shimmer 1.4s ease-in-out infinite; border-radius: 4px; } .wr-skel-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--beige-rule); } .wr-skel-card { height: 88px; border-radius: 12px; } @keyframes wr-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .wr-skel { animation: none; } } /* --- workroom-editorial.css --- */ /* ═══════════════════════════════════════════════════════════════ Workroom Editorial Design System Source: Workroom - System Pass.html (Claude Design handoff) ═══════════════════════════════════════════════════════════════ */ /* ── Editorial Hero (shared across all pages) ── */ .hero { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:flex-end; padding-bottom:22px; margin-bottom:26px; border-bottom:1px solid var(--beige-rule, #F2EFE9); } .hero-eyebrow { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--workroom-accent, #2F9163); margin-bottom:6px; } .hero h1 { font:600 36px/1.1 var(--serif, Georgia); letter-spacing:-.025em; color:var(--t); } .hero h1 .ct { font:500 13px var(--mono); color:var(--t3); margin-left:10px; vertical-align:0.25em; } .hero-sub { font:400 14.5px/1.55 var(--serif, Georgia); color:var(--t2); margin-top:10px; max-width:600px; } .hero-sub b { color:var(--t); font-weight:600; } .hero-actions { display:flex; align-items:center; gap:8px; } /* ── Buttons (editorial) ── */ .btn-primary { background:var(--brand); color:#fff; border:none; border-radius:8px; padding:9px 14px; font:600 13px var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .btn-primary svg { width:13px; height:13px; } .btn-secondary { background:#fff; color:var(--t); border:1px solid var(--beige-b, #EAE3D4); border-radius:8px; padding:8px 12px; font:500 13px var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .btn-secondary svg { width:13px; height:13px; color:var(--t3); } .btn-secondary:hover, .btn-primary:hover { filter:brightness(0.97); } /* ── Counter strip (KPI cards) ── */ .counts { display:grid; background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:12px; padding:4px; margin-bottom:28px; box-shadow:var(--sh-1); } .counts-5 { grid-template-columns:repeat(5,1fr); } .counts-4 { grid-template-columns:repeat(4,1fr); } .counts-3 { grid-template-columns:repeat(3,1fr); } .count { padding:14px 18px; border-right:1px solid var(--beige-rule, #F2EFE9); cursor:pointer; border-radius:8px; transition:background .1s; position:relative; } .count:last-child { border-right:none; } .count:hover { background:var(--beige-pg, #FCFBF8); } .count.on { background:var(--beige-pg, #FCFBF8); } .count.on::after { content:""; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--brand); } .count-l { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t3); margin-bottom:6px; } .count-n { font:600 24px var(--serif, Georgia); color:var(--t); letter-spacing:-.01em; font-variant-numeric:tabular-nums; } .count-n.muted { color:var(--t4); } .count-d { font:400 11px var(--mono); color:var(--t4); margin-top:3px; } .count-d .up { color:var(--workroom-accent, #2F9163); font-weight:500; } /* ── Section header ── */ .sec { margin-bottom:36px; } .sec-hdr { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; } .sec-eyebrow { font:500 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--t4); margin-bottom:4px; } .sec-title { font:600 18px var(--serif, Georgia); color:var(--t); letter-spacing:-.01em; } .sec-link { font:500 12px var(--sans); color:var(--brand); cursor:pointer; text-decoration:none; } /* ── Page inner container ── */ .page-inner { max-width:1180px; margin:0 auto; padding:32px 32px 64px; width:100%; } /* ── Agent cards (editorial) ── */ .agent-c { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:12px; padding:16px 18px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; position:relative; overflow:hidden; } .agent-c:hover { border-color:#D6CFBE; box-shadow:var(--sh-1), 0 8px 20px rgba(20,20,30,.05); } .agent-c::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ag-c, var(--brand)); } .agent-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:10px; } .agent-glyph { width:34px; height:34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; font:600 italic 14px var(--serif, Georgia); color:#fff; background:var(--ag-c); flex-shrink:0; } .agent-id { flex:1; min-width:0; } .agent-name { font:600 14px var(--sans); color:var(--t); letter-spacing:-.005em; } .agent-role { font:400 11px var(--mono); color:var(--t3); margin-top:1px; } .agent-status { display:inline-flex; align-items:center; gap:5px; font:500 10px var(--mono); padding:2px 7px; border-radius: 6px; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; } .agent-status.live { color:var(--workroom-accent, #2F9163); background:var(--workroom-accent-bg, #E6F4EC); } .agent-status.draft { color:var(--t3); background:var(--beige-pill, #F2EDE2); border:1px solid var(--beige-rule); } .agent-status .d { width:5px; height:5px; border-radius:50%; background:currentColor; } .agent-desc { font:400 13px/1.5 var(--serif, Georgia); color:var(--t2); margin-bottom:12px; } .agent-foot { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--beige-rule, #F2EFE9); font:400 11px var(--mono); color:var(--t4); } .agent-foot .bul { width:3px; height:3px; border-radius:50%; background:var(--t4); } .agent-foot .chat { margin-left:auto; font:600 12px var(--sans); color:var(--brand); display:inline-flex; align-items:center; gap:4px; cursor:pointer; } .agent-foot .chat svg { width:11px; height:11px; } .agents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } /* ── Recently-used pills ── */ .recents { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; } .recent-pill { display:inline-flex; align-items:center; gap:8px; padding:5px 10px 5px 6px; background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius: 16px; cursor:pointer; } .recent-pill .g { width:20px; height:20px; border-radius: 6px; display:flex; align-items:center; justify-content:center; color:#fff; font:600 italic 10px var(--serif, Georgia); } .recent-pill .n { font:500 12px var(--sans); color:var(--t); } /* ── Conversation rows ── */ .conv-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .conv-chip { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:6px; padding:5px 11px; font:500 12px var(--sans); color:var(--t2); cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .conv-chip.on { background:var(--t); color:#FAFAF7; border-color:var(--t); } .conv-chip .n { font:500 10px var(--mono); color:var(--t4); } .conv-chip.on .n { color:rgba(255,255,255,.6); } .conv-spacer { flex:1; } .conv-sort { font:500 12px var(--sans); color:var(--t3); display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; cursor:pointer; } .conv-sort svg { width:11px; height:11px; } .conv-group { margin-bottom:18px; } .conv-group-hdr { display:flex; align-items:baseline; gap:10px; padding:10px 4px 8px; } .conv-group-name { font:600 13px var(--sans); color:var(--t); } .conv-group-ct { font:500 11px var(--mono); color:var(--t4); padding:1px 7px; background:var(--beige-pill, #F2EDE2); border:1px solid var(--beige-rule); border-radius:4px; } .conv-list { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius: 12px; overflow:hidden; } .conv-row { display:grid; grid-template-columns:30px 1fr 130px 70px 80px; gap:14px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--beige-rule, #F2EFE9); cursor:pointer; transition:background .08s; } .conv-row:last-child { border-bottom:0; } .conv-row:hover { background:var(--beige-pg, #FCFBF8); } .conv-row-glyph { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font:600 italic 11px var(--serif, Georgia); background:var(--ag-c, var(--brand)); } .conv-row-body { min-width:0; } .conv-row-title { font:500 14px var(--sans); color:var(--t); letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px; } .conv-row-title .star { color:var(--workroom-accent, #2F9163); font-size:11px; margin-left:5px; } .conv-row-prev { font:400 12px/1.4 var(--serif, Georgia); color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conv-row-agent { display:flex; align-items:center; gap:7px; min-width:0; } .conv-row-agent .g { width:18px; height:18px; border-radius: 6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font:600 italic 9px var(--serif, Georgia); background:var(--ag-c, var(--brand)); } .conv-row-agent .n { font:500 12px var(--sans); color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conv-row-msgs { font:400 11px var(--mono); color:var(--t4); font-variant-numeric:tabular-nums; } .conv-row-time { font:400 12px var(--mono); color:var(--t4); text-align:right; font-variant-numeric:tabular-nums; } /* ── App cards ── */ .app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .app-c { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .12s, box-shadow .12s; } .app-c:hover { border-color:#D6CFBE; box-shadow:var(--sh-1), 0 8px 20px rgba(20,20,30,.05); } .app-head { display:flex; align-items:flex-start; gap:12px; } .app-glyph { width:40px; height:40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; color:#fff; font:600 16px var(--serif, Georgia); flex-shrink:0; } .app-id { flex:1; min-width:0; } .app-name-ed { font:600 14.5px var(--sans); color:var(--t); letter-spacing:-.005em; } .app-by { font:400 11px var(--mono); color:var(--t3); margin-top:1px; } .app-desc-ed { font:400 13px/1.55 var(--serif, Georgia); color:var(--t2); flex:1; } .app-foot { display:flex; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--beige-rule, #F2EFE9); } .app-tag { display:inline-flex; align-items:center; gap:5px; font:500 10px var(--mono); padding:2px 7px; border-radius: 6px; text-transform:uppercase; letter-spacing:.04em; } .app-tag.streamlit { color:#A23E2E; background:#FBE6DF; } .app-tag.gradio { color:#B58300; background:#FBEDD9; } .app-tag.react { color:#2D6DB8; background:#E0ECF7; } .app-tag .d { width:5px; height:5px; border-radius:50%; background:currentColor; } .app-install { margin-left:auto; background:var(--brand); color:#fff; border:none; border-radius:8px; padding:5px 14px; font:600 12px var(--sans); cursor:pointer; } /* ── Runs toolbar + search ── */ .runs-search { display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--beige-b, #EAE3D4); padding:5px 11px; border-radius:8px; } .runs-search svg { width:13px; height:13px; color:var(--t4); } .runs-search input { border:none; outline:none; background:none; flex:1; font:400 13px var(--sans); color:var(--t); } .runs-search input::placeholder { color:var(--t4); } /* ── Runs table ── */ .runs-table-ed { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:12px; overflow:hidden; } .runs-col-hdr { display:grid; grid-template-columns:24px 1.5fr 100px 130px 110px 110px; gap:14px; padding:10px 18px; background:var(--beige-pg, #FCFBF8); border-bottom:1px solid var(--beige-rule); font:600 10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--t4); } .runs-empty-ed { padding:64px 24px 56px; display:flex; flex-direction:column; align-items:center; gap:12px; } .runs-empty-glyph { width:56px; height:56px; border-radius: 12px; background:var(--brandL, #EFEAFE); color:var(--brand); display:flex; align-items:center; justify-content:center; } .runs-empty-glyph svg { width:24px; height:24px; } .runs-empty-title { font:600 15px var(--serif, Georgia); color:var(--t); } .runs-empty-desc { font:400 13px/1.55 var(--serif, Georgia); color:var(--t2); max-width:380px; text-align:center; } .runs-empty-actions { display:flex; gap:8px; margin-top:6px; } /* ── Artifact cards ── */ .wip { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } .wip-card { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius: 12px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:border-color .12s, box-shadow .12s; box-shadow:var(--sh-1); } .wip-card:hover { border-color:#D6CFBE; box-shadow:var(--sh-1), 0 8px 20px rgba(20,20,30,.05); } .wip-preview { height:140px; background:var(--beige-pg, #FCFBF8); border-bottom:1px solid var(--beige-rule); position:relative; overflow:hidden; } .wip-meta { padding:13px 18px 10px; } .wip-name { font:600 14px var(--sans); color:var(--t); display:flex; align-items:center; gap:8px; letter-spacing:-.005em; } .wip-name .ext { font:500 10px var(--mono); color:var(--t4); padding:1px 5px; background:var(--beige-pg); border:1px solid var(--beige-rule); border-radius:4px; text-transform:uppercase; } .wip-byline { font:400 12px/1.4 var(--serif, Georgia); color:var(--t3); margin-top:2px; } .wip-foot { display:flex; align-items:center; gap:8px; padding:10px 18px 14px; border-top:1px solid var(--beige-rule, #F2EFE9); } .wip-status { display:inline-flex; align-items:center; gap:5px; font:500 10px var(--mono); padding:3px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.04em; } .wip-status.draft { color:var(--workroom-accent, #2F9163); background:var(--workroom-accent-bg, #E6F4EC); } .wip-status.final { color:var(--ok); background:var(--ok-bg, #E6F4EC); } .wip-status.shared { color:var(--brand); background:var(--brandL, #EFEAFE); } .wip-time { font:400 11px var(--mono); color:var(--t4); margin-left:auto; } /* ── Shared empty state ── */ .shared-hero-ed { background:linear-gradient(135deg, var(--workroom-pinned, #FBF4E5) 0%, var(--beige-pg, #FCFBF8) 100%); border:1px solid var(--beige-b, #EAE3D4); border-radius: 12px; padding:48px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:32px; } .shared-glyph { width:60px; height:60px; border-radius: 12px; background:#fff; color:var(--workroom-accent, #2F9163); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-1); } .shared-glyph svg { width:26px; height:26px; } .shared-title-ed { font:600 22px/1.2 var(--serif, Georgia); color:var(--t); letter-spacing:-.015em; } .shared-desc { font:400 14px/1.55 var(--serif, Georgia); color:var(--t2); max-width:440px; } .shared-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .shared-col { background:#fff; border:1px solid var(--beige-b, #EAE3D4); border-radius:12px; padding:18px 20px; } .shared-col-icon { width:30px; height:30px; border-radius:8px; background:var(--brandL, #EFEAFE); color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:10px; } .shared-col-icon svg { width:14px; height:14px; } .shared-col-title { font:600 14px var(--sans); color:var(--t); } .shared-col-desc { font:400 12px/1.5 var(--serif, Georgia); color:var(--t3); margin-top:4px; } /* ── Installed empty (Apps) ── */ .installed-empty { background:linear-gradient(135deg, var(--brandL, #EFEAFE) 0%, var(--beige-pg, #FCFBF8) 100%); border:1px solid var(--beige-b, #EAE3D4); border-radius: 12px; padding:24px 28px; display:flex; align-items:center; gap:18px; margin-bottom:32px; } .installed-empty-glyph { width:44px; height:44px; border-radius: 12px; background:#fff; color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--sh-1); } .installed-empty-glyph svg { width:20px; height:20px; } .installed-empty-body { flex:1; } .installed-empty-title { font:600 15px var(--serif, Georgia); color:var(--t); } .installed-empty-desc { font:400 13px/1.5 var(--serif, Georgia); color:var(--t2); margin-top:2px; } /* ── Responsive ── */ @media (max-width: 900px) { .agents-grid, .app-grid, .wip, .shared-cols { grid-template-columns:repeat(2,1fr); } .conv-row { grid-template-columns:30px 1fr 80px; } .conv-row-msgs, .conv-row-time { display:none; } .counts-4, .counts-5 { grid-template-columns:repeat(2,1fr); } } @media (max-width: 640px) { .agents-grid, .app-grid, .wip, .shared-cols { grid-template-columns:1fr; } .hero { grid-template-columns:1fr; } .hero-actions { justify-content:flex-start; } .page-inner { padding:20px 16px 48px; } } /* --- workroom-motion.css --- */ /* ── Workroom Motion System ────────────────────────────────────── Adds motion to every surface: page transitions, card hovers, list entrance stagger, content fade-in, and micro-interactions. All animations respect prefers-reduced-motion. When reduced motion is preferred, transitions become instant and animations are suppressed. Import in app entry: import "./styles/workroom-motion.css"; ─────────────────────────────────────────────────────────────── */ /* ── 1. Page content entrance ────────────────────────────────── */ @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Apply to the main content area of each page. Each page's root div should add class="wm-page-enter" */ .wm-page-enter { animation: pageIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── 2. Card hover micro-interactions ────────────────────────── */ /* Subtle lift on hover for all interactive cards */ .wm-card { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease; } .wm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); } .wm-card:active { transform: translateY(0); transition-duration: 0.1s; } /* Artifact cards — already have hover:border-border-2 via Tailwind. This adds the lift without conflicting. */ button[class*="rounded-xl"][class*="border"][class*="min-h-"] { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease; } button[class*="rounded-xl"][class*="border"][class*="min-h-"]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); } button[class*="rounded-xl"][class*="border"][class*="min-h-"]:active { transform: translateY(0); transition-duration: 0.1s; } /* Conversation rows — subtle background slide on hover */ button[class*="rounded-lg"][class*="border"][class*="text-left"] { transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } button[class*="rounded-lg"][class*="border"][class*="text-left"]:hover { transform: translateX(2px); } /* ── 3. Stagger entrance for lists and grids ─────────────────── */ @keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* Grid children (artifact cards, agent cards) stagger in */ .wm-stagger > * { animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .wm-stagger > *:nth-child(1) { animation-delay: 0ms; } .wm-stagger > *:nth-child(2) { animation-delay: 40ms; } .wm-stagger > *:nth-child(3) { animation-delay: 80ms; } .wm-stagger > *:nth-child(4) { animation-delay: 120ms; } .wm-stagger > *:nth-child(5) { animation-delay: 160ms; } .wm-stagger > *:nth-child(6) { animation-delay: 200ms; } .wm-stagger > *:nth-child(7) { animation-delay: 240ms; } .wm-stagger > *:nth-child(8) { animation-delay: 280ms; } .wm-stagger > *:nth-child(9) { animation-delay: 320ms; } .wm-stagger > *:nth-child(10) { animation-delay: 360ms; } .wm-stagger > *:nth-child(11) { animation-delay: 400ms; } .wm-stagger > *:nth-child(12) { animation-delay: 440ms; } /* Items beyond 12 get no extra delay (appear at 440ms) */ .wm-stagger > *:nth-child(n+13) { animation-delay: 440ms; } /* ── 4. Chat message entrance ────────────────────────────────── */ @keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* New chat messages slide in from below */ .wm-msg-enter { animation: msgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── 5. Panel slide-in (sources panel, right panel) ──────────── */ @keyframes panelSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } } .wm-panel-enter { animation: panelSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── 6. Fade-in for lazy-loaded content ──────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .wm-fade-up { animation: fadeUp 0.25s ease both; } /* ── 7. Reasoning block phase transitions ────────────────────── */ @keyframes phaseIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } } .wm-phase-enter { animation: phaseIn 0.2s ease both; } /* ── 8. Button press feedback ────────────────────────────────── */ button:active:not([disabled]) { transform: scale(0.97); transition: transform 0.1s ease; } /* ── 9. Sidebar nav item transitions ─────────────────────────── */ /* Nav items have a background transition already, add a subtle indent */ .S-it, button[class*="flex items-center gap-2.5 w-full"] { transition: background 0.15s ease, padding-left 0.15s ease, color 0.15s ease; } /* ── 10. Focus ring animation ────────────────────────────────── */ @keyframes focusRing { from { box-shadow: 0 0 0 0px var(--brand); } to { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); } } :focus-visible { animation: focusRing 0.15s ease forwards; outline: none; } /* ── 11. Tooltip/dropdown entrance ───────────────────────────── */ @keyframes dropIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } } .wm-drop-enter { animation: dropIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ── 12. Loading shimmer (for skeleton states) ───────────────── */ @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } .wm-shimmer { background: linear-gradient( 90deg, var(--beige-rule, #F2EFE9) 25%, var(--beige-pill, #FAF8F4) 50%, var(--beige-rule, #F2EFE9) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease infinite; border-radius: 6px; } /* Dark mode shimmer */ .R.dark .wm-shimmer { background: linear-gradient( 90deg, var(--sh, #2C2924) 25%, var(--sa, #353230) 50%, var(--sh, #2C2924) 75% ); background-size: 200% 100%; } /* ── 13. KPI number count-up feel ────────────────────────────── */ @keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .wm-count-enter { animation: countUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.1s; } /* ── REDUCED MOTION ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .wm-card:hover, button[class*="rounded-xl"]:hover, button[class*="rounded-lg"]:hover { transform: none !important; } } /* --- microinteractions.css --- */ /* ════════════════════════════════════════════════════════════════ Microinteractions — the polish layer that makes UX feel alive. World-class B2B apps (Linear, Notion, Vercel) layer subtle motion on every interactive element: buttons press down on :active, cards lift on :hover, transitions ease in/out rather than jump linearly. Pre-CR-441 every transition was an explicit `transition: background .12s` per-class. That works but produces a flat, utilitarian feel. This file adds: 1. Cubic-bezier easing for natural motion 2. :active press-down feedback on every button-like element 3. Card lift on hover (subtle Y translate + shadow elevation) 4. Smooth color transitions on all interactives Scoped under [data-workroom-v2] so it can't bleed. ════════════════════════════════════════════════════════════════ */ /* ── Active-press feedback on buttons ────────────────────────── */ /* The "click feels real" rule: every button settles 1px when pressed. Combined with a quick ease-in, it produces the tactile pop that makes UI feel responsive. */ [data-workroom-v2] button:not(:disabled):active, [data-workroom-v2] .cv-chip:not(.on):active, [data-workroom-v2] .S-it:active, [data-workroom-v2] .S-chat:active, [data-workroom-v2] .ap-card:active, [data-workroom-v2] .aps-card:active, [data-workroom-v2] .ar-card:active, [data-workroom-v2] .followup-chip:active { transform: translateY(1px); transition-duration: .05s; } /* ── Card hover lift ─────────────────────────────────────────── */ /* Subtle 1px lift + shadow elevation on hover signals "this is clickable". Combined with the press-down :active above, you get a complete press/release cycle. */ [data-workroom-v2] .ap-card, [data-workroom-v2] .aps-card, [data-workroom-v2] .ar-card { transition: transform .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1), border-color .15s ease; } [data-workroom-v2] .ap-card:hover, [data-workroom-v2] .aps-card:hover, [data-workroom-v2] .ar-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(20, 20, 30, .04), 0 6px 16px rgba(20, 20, 30, .06); } /* ── Smooth color transitions on all interactives ────────────── */ [data-workroom-v2] .S-it, [data-workroom-v2] .S-chat, [data-workroom-v2] .S-foot-link, [data-workroom-v2] .S-view-all, [data-workroom-v2] .TB-icon-btn, [data-workroom-v2] .TB-search, [data-workroom-v2] .cv-chip, [data-workroom-v2] .cv-sort, [data-workroom-v2] .cv-empty-action, [data-workroom-v2] .cv-star, [data-workroom-v2] .followup-chip, [data-workroom-v2] .ai-act, [data-workroom-v2] .chat-icon-btn, [data-workroom-v2] .chat-header-action { transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .08s ease; } /* ── Page enter animation ────────────────────────────────────── */ /* Linear-style cross-fade when routes change. The existing .wm-page-enter class on WorkroomLayout's content container picks this up. */ [data-workroom-v2] .wm-page-enter { animation: wr-page-enter .22s cubic-bezier(.4, 0, .2, 1); } @keyframes wr-page-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── List-item stagger ───────────────────────────────────────── */ /* When skeleton rows give way to real rows, fade them in sequentially instead of all popping at once. Linear and Notion both do this. */ [data-workroom-v2] .cv-row, [data-workroom-v2] .wr-row, [data-workroom-v2] .sh-row { animation: wr-row-in .2s ease-out backwards; } [data-workroom-v2] .cv-row:nth-child(1) { animation-delay: 0ms; } [data-workroom-v2] .cv-row:nth-child(2) { animation-delay: 20ms; } [data-workroom-v2] .cv-row:nth-child(3) { animation-delay: 40ms; } [data-workroom-v2] .cv-row:nth-child(4) { animation-delay: 60ms; } [data-workroom-v2] .cv-row:nth-child(5) { animation-delay: 80ms; } [data-workroom-v2] .cv-row:nth-child(n+6) { animation-delay: 100ms; } @keyframes wr-row-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* ── Skeleton → content transition ───────────────────────────── */ /* When a skeleton row fades out, content fades in — no jarring swap. */ [data-workroom-v2] .wr-skel-row { animation: wr-skel-in .12s ease-out; } @keyframes wr-skel-in { from { opacity: 0; } to { opacity: 1; } } /* ── Star bounce ────────────────────────────────────────────── */ /* When user stars a conversation, the star icon bounces. Tiny detail; people notice. */ [data-workroom-v2] .cv-star.on svg { animation: wr-star-bounce .35s cubic-bezier(.34, 1.56, .64, 1); } @keyframes wr-star-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } /* ── Reduced motion: turn everything off ─────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-workroom-v2] *, [data-workroom-v2] *::before, [data-workroom-v2] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- focus-rings.css --- */ /* ════════════════════════════════════════════════════════════════ Focus rings — keyboard-navigation a11y atom. Pre-CR-441 focus rings existed on exactly 2 elements (.hv4-link-btn and .ap-livejob-track) across the entire V2 surface. Keyboard users got an effectively-invisible focus state on every other interactive element. World-class UX requires that every focusable element show its focus visibly to keyboard users while staying invisible on mouse-only interaction (focus-visible). This file applies the brand-purple focus ring system to all V2 interactive classes. Scoped to [data-workroom-v2] so it can't bleed into the rest of the platform. Three ring styles: - Default: 2px brand outline + 2px offset - On-brand surface: white outline (legible on brand backgrounds) - Inset: 2px brand inset shadow (for full-bleed inputs) ════════════════════════════════════════════════════════════════ */ /* Default ring — every interactive class */ [data-workroom-v2] .S-it:focus-visible, [data-workroom-v2] .S-chat:focus-visible, [data-workroom-v2] .S-foot-link:focus-visible, [data-workroom-v2] .S-view-all:focus-visible, [data-workroom-v2] .TB-icon-btn:focus-visible, [data-workroom-v2] .TB-search:focus-visible, [data-workroom-v2] .TB-bell:focus-visible, [data-workroom-v2] .TB-avatar:focus-visible, [data-workroom-v2] .cv-chip:focus-visible, [data-workroom-v2] .cv-sort:focus-visible, [data-workroom-v2] .cv-empty-action:focus-visible, [data-workroom-v2] .cv-star:focus-visible, [data-workroom-v2] .ap-card:focus-visible, [data-workroom-v2] .aps-card:focus-visible, [data-workroom-v2] .aps-card-pin:focus-visible, [data-workroom-v2] .aps-launcher-close:focus-visible, [data-workroom-v2] .ar-card:focus-visible, [data-workroom-v2] .sh-row:focus-visible, [data-workroom-v2] .wr-row:focus-visible, [data-workroom-v2] .hv4-do-row:focus-visible, [data-workroom-v2] .hv4-recent-row:focus-visible, [data-workroom-v2] .hv4-continue-pill:focus-visible, [data-workroom-v2] .hv4-link-btn:focus-visible, [data-workroom-v2] .hv4-urgent:focus-visible, [data-workroom-v2] .chat-header-agent:focus-visible, [data-workroom-v2] .chat-header-action:focus-visible, [data-workroom-v2] .chat-icon-btn:focus-visible, [data-workroom-v2] .followup-chip:focus-visible, [data-workroom-v2] .ai-act:focus-visible, [data-workroom-v2] .chat-empty-prompt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; } /* On brand-purple backgrounds — use white outline so it's visible */ [data-workroom-v2] .S-new:focus-visible, [data-workroom-v2] .cv-btn-primary:focus-visible, [data-workroom-v2] .wr-btn-primary:focus-visible, [data-workroom-v2] .followup-chip.primary:focus-visible, [data-workroom-v2] .composer-send:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 35%, transparent); } /* Inset ring for inputs (focus border instead of outline so it's visually part of the field, not separated by a gap) */ [data-workroom-v2] .cv-search:focus-within, [data-workroom-v2] .TB-search:focus-within, [data-workroom-v2] .composer.focused, [data-workroom-v2] .chat-composer.focused { outline: none; /* the focused class handles styling */ } [data-workroom-v2] .composer-input:focus-visible, [data-workroom-v2] .cv-search input:focus, [data-workroom-v2] .cv-agent-pop-search input:focus { outline: none; /* parent container takes the focus state */ } /* Sidebar items get the ring inside, since they're full-width */ [data-workroom-v2] .S-it:focus-visible, [data-workroom-v2] .S-chat:focus-visible, [data-workroom-v2] .S-foot-link:focus-visible { outline-offset: -2px; } /* Conversation rows and table rows — focus ring inset because they sit edge-to-edge of the container */ [data-workroom-v2] .cv-row:focus-visible, [data-workroom-v2] .wr-row:focus-visible, [data-workroom-v2] .sh-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 6px; } /* --- workroom-a11y.css --- */ /* ── Workroom Accessibility (WCAG AA) ──────────────────────────── Systematic fixes for focus indicators, skip navigation, landmarks, and screen reader support. Import in entry point: import "./styles/workroom-a11y.css"; CR-design-system-reconciliation (May 2026): removed the :root contrast overrides (--t3, --t4, --warn). Those overrides existed because the canonical tokens.css values previously failed AA. The canonical values are now AA-compliant (see audit-wcag-contrast script + tokens.css comments dated May 2026), so these scoped overrides are not just redundant — they were producing LIGHTER values than canonical, which would degrade contrast inside the workroom scope. Removed. ─────────────────────────────────────────────────────────────── */ /* ── 1. Skip navigation ─────────────────────────────────────── */ /* Screen-reader-only skip link — visible on focus */ .sr-skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; padding: 8px 16px; background: var(--brand); color: #fff; border-radius: 0 0 8px 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none; transition: top 0.15s ease; } .sr-skip-link:focus { top: 0; outline: none; } /* ── 2. Screen reader only utility ───────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── 3. Focus indicators (enhanced) ──────────────────────────── */ /* All focusable elements get a visible focus ring. The motion.css has an animated ring; this ensures a static fallback and consistent styling. */ :focus-visible { outline: 2px solid var(--brand, #5C31FF); outline-offset: 2px; border-radius: inherit; } /* Remove outline on mouse click (keep for keyboard) */ :focus:not(:focus-visible) { outline: none; } /* High-contrast focus for buttons inside dark containers */ .R.dark :focus-visible { outline-color: #A78BFA; } /* Focus ring on cards — needs to be outside the card border */ button:focus-visible[class*="rounded-xl"], button:focus-visible[class*="rounded-lg"], .ag-card:focus-visible { outline-offset: 3px; } /* ── 4. Landmark styling helpers ─────────────────────────────── */ /* These don't change appearance, just ensure landmarks work with assistive technology. Applied via patches. */ [role="banner"] { /* topbar */ } [role="navigation"] { /* sidebar */ } [role="main"] { /* content area */ } [role="complementary"] { /* right panel */ } [role="status"] { /* streaming indicator */ } /* ── 5. Live region for streaming responses ──────────────────── */ /* Screen reader announces new content as it streams */ [aria-live="polite"] { /* No visual change — purely for AT */ } /* Assertive for errors */ [aria-live="assertive"] { /* No visual change — purely for AT */ } /* ── 6. Reduced transparency for low-vision users ────────────── */ /* color-mix with low alpha can be invisible to low-vision users. Ensure minimum opacity for interactive state changes. */ @media (prefers-contrast: more) { :root { --sh: rgba(0, 0, 0, 0.08); /* was .03 — too faint */ --bl2: #D8D2C4; /* was #EFEAE2 — more visible border */ --t4: #6B6760; /* match --t3 for high contrast */ } /* Ensure all borders are visible */ [class*="border-border"], [style*="border"] { border-width: 1px !important; } /* Ensure hover states are obvious */ button:hover, a:hover { text-decoration: underline !important; } } /* ── 7. Touch target sizing ──────────────────────────────────── */ /* WCAG 2.2 Target Size: minimum 24x24px for touch targets. Many small icon buttons (pin, close, chevron) are undersized. */ button:not([class*="ib-s"]):not([class*="ag-card"]) { min-width: 24px; min-height: 24px; } /* ── 8. Link distinguishability ──────────────────────────────── */ /* Links must be distinguishable from surrounding text by more than color alone (underline or other visual cue). */ a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a:not([class]):hover { text-decoration-thickness: 2px; } /* ── 9. Form field labeling ─────────────────────────────────── */ /* Ensure placeholder text has sufficient contrast */ ::placeholder { color: var(--t4) !important; opacity: 1; } /* Error states need both color AND icon/text indicator */ [aria-invalid="true"] { border-color: var(--err) !important; box-shadow: 0 0 0 1px var(--err); } /* ============ HomeV2.css (hv4-*) ============ */ /* ════════════════════════════════════════════════════════════════ Workroom Home V2 — canonical hv4-* design source Lifted verbatim from workroom-design/styles.css (lines 204-336) and the composer block (lines 404-441). Class names are the design's `hv4-` prefix so the markup maps 1:1 to pages.jsx HomePage. Do not rename without updating both. ════════════════════════════════════════════════════════════════ */ /* ── Page shell ─────────────────────────────────────────────── */ .hv4-home { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; } .hv4-cols { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: flex-start; } .hv4-col-aside { display: flex; flex-direction: column; gap: 32px; } .hv4-greet { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); margin-bottom: 18px; } .hv4-greet b { color: var(--t); font-weight: 600; } /* ── Composer block (hero element) ───────────────────────────── */ /* Base .composer / .composer-input / .composer-row / .composer-mode-inline / .composer-tool / .composer-send / .ct-badge live in composer-base.css. These rules just add the hero-sized variant under .hv4-composer-block. */ .hv4-composer-block { position: relative; margin-bottom: 48px; } .hv4-composer-block .composer { padding: 32px 32px 18px; border-radius: 20px; border: 1.5px solid #D6CFBE; background: #fff; box-shadow: 0 1px 3px rgba(20,20,30,.10), 0 6px 16px rgba(20,20,30,.08), 0 32px 64px rgba(20,20,30,.10); } .hv4-composer-block .composer.focused { border-color: #A89A7C; box-shadow: 0 1px 3px rgba(20,20,30,.08), 0 6px 16px rgba(20,20,30,.07), 0 32px 72px color-mix(in srgb, var(--brand) 10%, transparent), 0 0 0 5px color-mix(in srgb, var(--brand) 7.0%, transparent); } .hv4-composer-block .composer-input { font: 400 21px/1.5 var(--sans); min-height: 84px; padding: 6px 0 18px; } .hv4-composer-block .composer-row { padding-top: 14px; border-top: 1px solid var(--beige-rule); } /* ── Floating agent chip (top of composer) ───────────────────── */ .hv4-chip { position: absolute; top: -13px; right: 18px; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--beige-b); border-radius: 14px; padding: 5px 11px 5px 5px; box-shadow: 0 1px 3px rgba(20,20,30,.06); cursor: pointer; transition: border-color .12s; z-index: 2; } .hv4-chip:hover { border-color: var(--brand); } .hv4-chip.chat-mode:hover { border-color: var(--t2); } .hv4-chip-glyph { width: 18px; height: 18px; border-radius: 5px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 8.5px var(--sans); } .hv4-chip.chat-mode .hv4-chip-glyph { font-style: normal; font-family: var(--sans); font-size: 9px; } .hv4-chip-name { font: 600 12px var(--sans); color: var(--brand); } .hv4-chip.chat-mode .hv4-chip-name { color: var(--t); font-family: var(--mono); font-size: 11.5px; font-weight: 500; } .hv4-chip svg { width: 9px; height: 9px; color: var(--t4); } /* ── Urgent banner ───────────────────────────────────────────── */ .hv4-urgent { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(to right, #FDE5DC 0%, #FBF8F2 80%); border: 1px solid #F5C0B5; border-radius: 10px; margin-bottom: 44px; cursor: pointer; transition: transform .12s, box-shadow .12s; } .hv4-urgent:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 8px 18px color-mix(in srgb, var(--err) 8%, transparent); } .hv4-urgent-dot { width: 9px; height: 9px; border-radius: 50%; background: #DC2626; flex-shrink: 0; animation: pulseUrgent 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(220,38,38,.5); } @keyframes pulseUrgent { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); } 50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); } } .hv4-urgent-strong { font: 600 13.5px var(--sans); color: var(--err); } .hv4-urgent-meta { font: 400 13px var(--sans); color: var(--t3); flex: 1; } .hv4-urgent-cta { font: 500 12.5px var(--sans); color: var(--err); padding: 5px 11px; border: 1px solid #F5C0B5; border-radius: 6px; background: #fff; transition: background .12s; cursor: pointer; } .hv4-urgent-cta:hover { background: #FFF8F4; } /* ── Section header ──────────────────────────────────────────── */ .hv4-section { margin-bottom: 44px; } .hv4-section-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--beige-rule); } .hv4-section-title { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .hv4-section-link { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); background: none; border: none; cursor: pointer; padding: 0; transition: color .1s; white-space: nowrap; } .hv4-section-link:hover { color: var(--brand); } /* ── Recent rows ─────────────────────────────────────────────── */ .hv4-recent { display: flex; flex-direction: column; gap: 2px; } .hv4-recent-row { display: grid; grid-template-columns: 32px 1fr 110px; gap: 18px; align-items: center; padding: 18px 8px 18px 4px; border-bottom: 1px solid var(--beige-rule); cursor: pointer; transition: background .08s; text-align: left; background: none; font: inherit; width: 100%; border-left: none; border-right: none; border-top: none; } .hv4-recent-row:last-child { border-bottom: none; } .hv4-recent-row:hover { background: rgba(20,20,30,.025); } .hv4-recent-glyph { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 11px var(--sans); flex-shrink: 0; } .hv4-recent-body { min-width: 0; } .hv4-recent-title { font: 600 16px var(--sans); color: var(--t); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; line-height: 1.25; } .hv4-recent-title .star { color: var(--workroom-accent); font-size: 12px; flex-shrink: 0; } .hv4-recent-prev { font: 400 12.5px/1.45 var(--sans); color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; } .hv4-recent-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; } .hv4-recent-status { font: 500 9px var(--mono); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; } .hv4-recent-status.awaiting { color: var(--err); background: #FBE6DF; } .hv4-recent-status.active { color: var(--ok); background: var(--ok-bg); } .hv4-recent-status.done { color: var(--t4); background: var(--beige-pill); } .hv4-recent-status.pinned { color: #A06A0F; background: #FBEDD9; } .hv4-recent-status.recent { color: var(--brand); background: var(--brandL); } .hv4-recent-status.stale { color: var(--t4); background: var(--beige-pill); } .hv4-recent-meta .time { font: 400 11px var(--mono); color: var(--t4); font-variant-numeric: tabular-nums; } /* ── Quick start: continue with (avatar pills) ───────────────── */ .hv4-qs-sublabel { display: none; } /* Hidden per design source */ .hv4-continue { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .hv4-continue-pill { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 6px 12px 6px 4px; cursor: pointer; transition: background .1s; border-radius: 24px; } .hv4-continue-pill:hover { background: #FBF8F2; } .hv4-continue-glyph { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 9.3px var(--sans); flex-shrink: 0; } .hv4-continue-name { font: 500 12.5px var(--sans); color: var(--t); letter-spacing: -0.005em; } /* ── Common actions list ─────────────────────────────────────── */ .hv4-do { display: flex; flex-direction: column; gap: 1px; } .hv4-do-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 8px 10px 10px; border-radius: 7px; cursor: pointer; transition: background .1s; background: none; border: none; text-align: left; font: inherit; width: 100%; } .hv4-do-row:hover { background: #FBF8F2; } .hv4-do-row:hover .hv4-do-arrow { transform: translateX(3px); color: var(--brand); } .hv4-do-key { font: 600 10px var(--mono); color: var(--t3); border: 1px solid var(--beige-rule); border-radius: 4px; padding: 2px 0; text-align: center; background: #fff; min-width: 22px; } .hv4-do-body { min-width: 0; } .hv4-do-name { font: 500 13px var(--sans); color: var(--t); letter-spacing: -0.005em; line-height: 1.25; } .hv4-do-meta { font: 400 10.5px var(--mono); color: var(--t4); margin-top: 2px; } .hv4-do-arrow { color: var(--t4); transition: transform .15s, color .15s; } .hv4-do-arrow svg { width: 13px; height: 13px; } .hv4-do + .hv4-nav-chips { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--beige-rule); } /* ── Nav chips (Runs / Artifacts / Shared stats) ─────────────── */ .hv4-nav-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; } .hv4-nav-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--beige-rule); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; text-align: left; font: inherit; } .hv4-nav-chip:hover { border-color: #D6CFBE; background: #FBF8F2; } .hv4-nav-chip-label { font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); } .hv4-nav-chip-n { font: 600 16px var(--sans); color: var(--t); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* ── Empty states (used in hv4-recent and hv4-continue) ──────── */ .hv4-empty { padding: 20px 4px 24px; } .hv4-empty-title { font: 500 13px var(--sans); color: var(--t3); margin-bottom: 6px; } .hv4-empty-desc { font: 400 12px/1.5 var(--serif); color: var(--t4); } .hv4-empty-desc a { color: var(--brand); cursor: pointer; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 960px) { .hv4-home { padding: 24px 20px 48px; } .hv4-cols { grid-template-columns: 1fr; gap: 32px; } .hv4-composer-block .composer { padding: 22px 22px 14px; } .hv4-composer-block .composer-input { font-size: 18px; min-height: 64px; } } /* Inline link-style button (used in empty states). Looks like a link but is a real button, so it's keyboard-reachable and screen-reader friendly. Pre-CR-440 these were which is an a11y anti-pattern (no href, no role). */ .hv4-link-btn { background: none; border: none; padding: 0; color: var(--brand); cursor: pointer; font: inherit; text-decoration: none; } .hv4-link-btn:hover { text-decoration: underline; } .hv4-link-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; } /* ── Respect reduced-motion preference ───────────────────────── */ /* Users with vestibular conditions or motion sensitivity set this in their OS. Animations don't add information — they're polish. Default platform stylesheet has a global rule for this; these selectors are scoped to the V2 namespaces so we don't depend on load order. */ @media (prefers-reduced-motion: reduce) { .hv4-urgent-dot, .hv4-do-arrow, .hv4-recent-row, .hv4-continue-pill, .workroom-chat-v2 .msg-user, .workroom-chat-v2 .msg-ai, .workroom-chat-v2 .ai-body .cursor, .workroom-chat-v2 .ai-thinking .dot, .wr-status.live .wr-status-dot { animation: none !important; transition: none !important; } } /* ==== ConversationsV2.css cv- ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Conversations V2 — page-specific styles only. Shared atoms (cv-chip, cv-search, cv-sort-menu, cv-empty, cv-group-hdr, cv-chip-x, cv-btn-primary) live in workroom-atoms.css. This file holds the parts that are genuinely specific to the Conversations list page. Lifted from workroom-design/styles.css (lines 546-635) less the atoms above. ════════════════════════════════════════════════════════════════ */ /* ── Page shell ──────────────────────────────────────────────── */ .cv-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } /* ── Compact header ──────────────────────────────────────────── */ .cv-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .cv-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .cv-head-eyebrow b { color: var(--t); font-weight: 600; } .cv-head-eyebrow .star-ct { color: var(--brand); font-weight: 600; } .cv-head-actions { display: flex; gap: 6px; align-items: center; } /* ── Toolbar ─────────────────────────────────────────────────── */ .cv-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } /* ── Agent filter popover (uses sort-menu base + extras) ─────── */ .cv-agent-pop { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--beige-b); border-radius: 10px; box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 14px 36px rgba(20,20,30,.12); padding: 5px; width: 260px; max-height: 360px; display: flex; flex-direction: column; z-index: 60; } .cv-agent-pop-search { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--beige-rule); margin: -5px -5px 4px; } .cv-agent-pop-search svg { color: var(--t4); width: 13px; height: 13px; } .cv-agent-pop-search input { flex: 1; border: none; outline: none; background: transparent; font: 400 13px var(--sans); color: var(--t); padding: 2px 0; } .cv-agent-pop-list { flex: 1; overflow-y: auto; } .cv-agent-pop-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; transition: background .08s; font: 500 12.5px var(--sans); color: var(--t); } .cv-agent-pop-item:hover { background: var(--beige-pg); } .cv-agent-pop-item.on { background: var(--brandL); color: var(--brand); font-weight: 600; } .cv-agent-pop-glyph { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 9px var(--sans); flex-shrink: 0; } .cv-agent-pop-check { margin-left: auto; color: var(--brand); width: 13px; height: 13px; } .cv-agent-pop-divider { height: 1px; background: var(--beige-rule); margin: 4px 2px; } .cv-agent-pop-empty { padding: 20px 16px; text-align: center; font: 400 12px var(--serif); color: var(--t4); } /* ── Bulk action bar ─────────────────────────────────────────── */ .cv-bulkbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--brandL); border: 1px solid #D9CFFD; border-radius: 8px; margin-bottom: 14px; } .cv-bulkbar-count { font: 600 12px var(--sans); color: var(--brand); } .cv-bulkbar-spacer { flex: 1; } .cv-bulkbar button { background: #fff; border: 1px solid #D9CFFD; color: var(--brand); padding: 4px 10px; font: 600 12px var(--sans); border-radius: 6px; cursor: pointer; transition: background .12s; } .cv-bulkbar button:hover { background: #E5DDFE; } .cv-bulkbar button.danger { color: var(--err); border-color: #F5C0B5; } .cv-bulkbar button.danger:hover { background: #FFF1ED; } .cv-bulkbar .cancel { background: transparent; border: none; color: var(--t3); } /* ── Conversation group ──────────────────────────────────────── */ .cv-group { margin-bottom: 18px; } /* ── Row ─────────────────────────────────────────────────────── */ .cv-row { display: grid; grid-template-columns: 18px 22px 1fr 140px 80px 60px; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--beige-rule); cursor: pointer; transition: background .08s; } .cv-row:hover { background: rgba(20,20,30,.04); } .cv-row.selected { background: var(--brandL); } .cv-row.selected:hover { background: #E5DDFE; } .cv-row:last-child { border-bottom: none; } .cv-check { width: 14px; height: 14px; border: 1.5px solid var(--beige-b); border-radius: 3px; display: flex; align-items: center; justify-content: center; background: #fff; color: #fff; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; opacity: .3; } .cv-row:hover .cv-check, .cv-row.selected .cv-check { opacity: 1; } .cv-row.selected .cv-check { background: var(--brand); border-color: var(--brand); } .cv-check svg { width: 10px; height: 10px; } .cv-star { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--t5); cursor: pointer; transition: color .12s; background: none; border: none; padding: 0; } .cv-star.on { color: var(--brand); } .cv-star:hover { color: var(--brand); } .cv-star svg { width: 13px; height: 13px; } .cv-row-title-wrap { min-width: 0; display: flex; align-items: center; gap: 8px; } .cv-row-title { font: 500 13.5px var(--sans); color: var(--t); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-row-agent { display: flex; align-items: center; gap: 6px; min-width: 0; } .cv-row-agent .g { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 8px var(--sans); } .cv-row-agent .n { font: 500 11.5px var(--mono); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-row-msgs { font: 400 11px var(--mono); color: var(--t4); font-variant-numeric: tabular-nums; text-align: right; } .cv-row-time { font: 400 11.5px var(--mono); color: var(--t4); text-align: right; font-variant-numeric: tabular-nums; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 720px) { .cv-page { padding: 20px 16px 48px; } .cv-row { grid-template-columns: 18px 22px 1fr 60px; gap: 8px; } .cv-row-agent, .cv-row-msgs { display: none; } } /* ==== AgentsV2.css ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Agents V2 — canonical ap-* design source Lifted from workroom-design/styles.css (lines 991-1061). Markup mirrors workroom-design/pages.jsx AgentsPage (line 750). ════════════════════════════════════════════════════════════════ */ /* ── Page shell ──────────────────────────────────────────────── */ .ap-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } /* ── Header eyebrow ──────────────────────────────────────────── */ .ap-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .ap-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .ap-head-eyebrow b { color: var(--t); font-weight: 600; } .ap-head-eyebrow .live { color: var(--ok); font-weight: 600; } .ap-head-actions { display: flex; align-items: center; gap: 8px; } .ap-build-link { font: 500 12px var(--sans); color: var(--t3); padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: color .12s, background .12s; background: none; border: none; display: inline-flex; align-items: center; gap: 4px; } .ap-build-link:hover { color: var(--brand); background: var(--beige-pg); } .ap-build-link svg { width: 13px; height: 13px; } /* ── Default agent feature row ───────────────────────────────── */ .ap-default-wrap { margin-bottom: 32px; } .ap-default { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, var(--brandL) 0%, #fff 60%); border: 1px solid #D9CFFD; border-radius: 14px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; } .ap-default:hover { border-color: #B4A0FF; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 10px 24px color-mix(in srgb, var(--brand) 8%, transparent); } .ap-default-glyph { width: 48px; height: 48px; border-radius: 11px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 16px var(--sans); flex-shrink: 0; box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent); letter-spacing: 0.02em; background-size: cover; background-position: center; } .ap-default-body { min-width: 0; } .ap-default-badge { display: inline-flex; align-items: center; gap: 5px; font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); background: #fff; border: 1px solid #D9CFFD; padding: 2px 8px; border-radius: 5px; margin-bottom: 6px; } .ap-default-badge svg { width: 11px; height: 11px; } .ap-default-name { font: 600 18px var(--serif); color: var(--t); letter-spacing: -0.015em; } .ap-default-desc { font: 400 13px/1.5 var(--sans); color: var(--t2); margin-top: 3px; max-width: 680px; } .ap-default-meta { font: 400 11px var(--mono); color: var(--t4); margin-top: 6px; } .ap-default-cta { padding: 8px 14px; background: var(--brand); color: #fff; border: none; border-radius: 8px; font: 600 12.5px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; transition: filter .12s; } .ap-default-cta:hover { filter: brightness(1.08); } .ap-default-cta svg { width: 13px; height: 13px; } /* ── Most-used horizontal row ────────────────────────────────── */ .ap-mostused-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 32px; } .ap-mostused { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; cursor: pointer; transition: border-color .12s, transform .12s; text-align: left; width: 100%; font: inherit; } .ap-mostused:hover { border-color: #D6CFBE; transform: translateY(-1px); } .ap-mostused-glyph { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 11px var(--sans); flex-shrink: 0; letter-spacing: 0.02em; } .ap-mostused-body { min-width: 0; flex: 1; } .ap-mostused-name { font: 600 12.5px var(--sans); color: var(--t); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-mostused-count { font: 500 11px var(--mono); color: var(--t4); margin-top: 1px; } /* ── Toolbar ─────────────────────────────────────────────────── */ .ap-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .ap-toolbar-divider { width: 1px; height: 18px; background: var(--beige-b); } /* Cards grid */ .ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .ap-card { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 16px 18px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 180px; text-align: left; font: inherit; width: 100%; } .ap-card:hover { border-color: #D6CFBE; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 8px 20px rgba(20,20,30,.05); transform: translateY(-1px); } .ap-card-head { display: flex; align-items: flex-start; gap: 11px; } .ap-card-glyph { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 12px var(--sans); flex-shrink: 0; letter-spacing: 0.02em; background-size: cover; background-position: center; } .ap-card-id { flex: 1; min-width: 0; } .ap-card-name { font: 600 14.5px var(--sans); color: var(--t); letter-spacing: -0.01em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .ap-card-tagline { font: 400 12px/1.45 var(--sans); color: var(--t3); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-card-detail-btn { width: auto; height: 24px; padding: 0 8px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; background: transparent; border: 1px solid var(--beige-rule); color: var(--t3); cursor: pointer; flex-shrink: 0; opacity: 0.75; transition: background .12s, color .12s, opacity .12s, border-color .12s; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.04em; } .ap-card:hover .ap-card-detail-btn { opacity: 1; } .ap-card-detail-btn:hover { background: var(--beige-pg); color: var(--brand); border-color: #D9CFFD; } .ap-card-detail-btn svg { width: 11px; height: 11px; } .ap-card-tasks { display: flex; flex-wrap: wrap; gap: 5px; } .ap-card-task { font: 500 11px var(--sans); color: var(--t3); background: var(--beige-pg); border: 1px solid var(--beige-rule); padding: 3px 8px; border-radius: 5px; white-space: nowrap; } .ap-card-task.more { color: var(--t4); } .ap-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--beige-rule); margin-top: auto; font: 400 11px var(--mono); color: var(--t4); } .ap-card-foot .ag-type { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--mono); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .ap-card-foot .ag-type.conversational { color: #5436D6; background: #EFEAFE; } .ap-card-foot .ag-type.workflow { color: #2F9163; background: #E6F4EC; } .ap-card-foot .ag-type.coordinator { color: #C8821D; background: #FBEDD9; } .ap-card-foot .ag-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ap-card-foot .ag-status-dot.live { background: var(--ok); } .ap-card-foot .ag-status-dot.draft { background: var(--t4); } .ap-card-foot .ag-status-dot.paused { background: var(--warn); } .ap-card-foot .ag-status-dot.error { background: var(--err); } .ap-card-foot .usage { color: var(--t3); font-weight: 500; } .ap-card-foot .usage.unused { color: var(--t4); font-style: italic; } .ap-card-foot-spacer { flex: 1; } /* Reuse cv-* group header, search, sort, empty — those rules live in ConversationsV2.css. AgentsV2 imports both. */ /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 960px) { .ap-page { padding: 24px 20px 48px; } .ap-mostused-row { grid-template-columns: repeat(2, 1fr); } .ap-default { grid-template-columns: 48px 1fr; } .ap-default-cta { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 600px) { .ap-grid { grid-template-columns: 1fr; } .ap-mostused-row { grid-template-columns: 1fr; } } /* ── Live-job toast (workflow run kicked off via WorkflowTriggerForm) ── */ /* Pre-CR-440 this was 11 inline style props directly on the JSX. Extracted here so it's themable, dark-mode-ready, and animates cleanly with the platform's prefers-reduced-motion. */ .ap-livejob { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--brand); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,20,30,.04), 0 16px 36px color-mix(in srgb, var(--brand) 12%, transparent); z-index: 100; font: 400 13px var(--sans); max-width: 360px; animation: ap-livejob-rise 0.22s cubic-bezier(.4, 0, .2, 1); } @keyframes ap-livejob-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ap-livejob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulseUrgent 1.5s ease-in-out infinite; flex-shrink: 0; } .ap-livejob-body { flex: 1; min-width: 0; } .ap-livejob-name { font: 600 13px var(--sans); color: var(--t); } .ap-livejob-desc { font: 400 12px var(--sans); color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-livejob-track { background: none; border: none; color: var(--brand); font: 600 12px var(--sans); cursor: pointer; padding: 4px; flex-shrink: 0; border-radius: 4px; } .ap-livejob-track:hover { background: var(--brandL); } .ap-livejob-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .ap-livejob-dismiss { background: none; border: none; color: var(--t4); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; flex-shrink: 0; } .ap-livejob-dismiss:hover { background: var(--beige-pg); color: var(--t); } .ap-livejob-dismiss svg { width: 12px; height: 12px; } @media (prefers-reduced-motion: reduce) { .ap-livejob { animation: none; } .ap-livejob-dot { animation: none; } } /* ==== AppsV2.css ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Apps V2 — canonical aps-* design source Lifted from workroom-design/styles.css (lines 1064-1136). Markup mirrors workroom-design/pages.jsx AppsPage (line 1116). ════════════════════════════════════════════════════════════════ */ .aps-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } /* ── Header ──────────────────────────────────────────────────── */ .aps-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .aps-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .aps-head-eyebrow b { color: var(--t); font-weight: 600; } .aps-head-eyebrow .muted { color: var(--t4); } .aps-head-actions { display: flex; gap: 8px; align-items: center; } /* ── Category chips ──────────────────────────────────────────── */ .aps-categories { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .aps-cat-chip { background: #fff; border: 1px solid var(--beige-b); border-radius: 6px; padding: 5px 11px; font: 500 12px var(--sans); color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, color .12s, border-color .12s; } .aps-cat-chip:hover:not(.on) { border-color: #D6CFBE; color: var(--t); } .aps-cat-chip.on { background: var(--t); color: #FAFAF7; border-color: var(--t); } .aps-cat-chip .n { font: 500 11px var(--mono); color: var(--t4); } .aps-cat-chip.on .n { color: rgba(255,255,255,.6); } /* ── Framework counter row ───────────────────────────────────── */ .aps-frameworks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 28px; } .aps-fw { padding: 12px 14px; background: #fff; border: 1px solid var(--beige-b); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; position: relative; text-align: left; font: inherit; width: 100%; } .aps-fw:hover { border-color: #D6CFBE; } .aps-fw.on { border-color: var(--t); background: var(--beige-card); } .aps-fw-label { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); margin-bottom: 4px; } .aps-fw-n { font: 600 22px var(--serif); color: var(--t); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.015em; } .aps-fw-n.muted { color: var(--t4); } .aps-fw-sub { font: 400 11px var(--mono); color: var(--t4); margin-top: 4px; } .aps-fw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; border-radius: 0 0 8px 8px; } .aps-fw.fw-streamlit.on .aps-fw-bar { background: #A23E2E; } .aps-fw.fw-gradio.on .aps-fw-bar { background: #B58300; } .aps-fw.fw-dash.on .aps-fw-bar { background: #0F766E; } .aps-fw.fw-react.on .aps-fw-bar { background: #2D6DB8; } .aps-fw.fw-installed.on .aps-fw-bar { background: var(--brand); } /* ── Pinned strip ────────────────────────────────────────────── */ .aps-installed-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; } .aps-installed-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; cursor: pointer; transition: border-color .12s, transform .12s; text-align: left; font: inherit; width: 100%; } .aps-installed-tile:hover { border-color: #D6CFBE; transform: translateY(-1px); } .aps-installed-tile-glyph { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 12px var(--sans); flex-shrink: 0; } .aps-installed-tile-body { min-width: 0; flex: 1; } .aps-installed-tile-name { font: 600 12.5px var(--sans); color: var(--t); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aps-installed-tile-meta { font: 400 11px var(--mono); color: var(--t4); margin-top: 1px; } /* ── Cards grid ──────────────────────────────────────────────── */ .aps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .aps-card { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 16px 18px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; display: flex; flex-direction: column; gap: 10px; min-height: 170px; text-align: left; font: inherit; width: 100%; } .aps-card:hover { border-color: #D6CFBE; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 8px 20px rgba(20,20,30,.05); transform: translateY(-1px); } .aps-card-head { display: flex; align-items: flex-start; gap: 11px; } .aps-card-glyph { width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 14px var(--sans); flex-shrink: 0; letter-spacing: 0.02em; } .aps-card-id { flex: 1; min-width: 0; } .aps-card-name { font: 600 14.5px var(--sans); color: var(--t); letter-spacing: -0.005em; display: flex; align-items: center; gap: 7px; } .aps-card-by { font: 400 11px var(--mono); color: var(--t4); margin-top: 2px; } .aps-card-desc { font: 400 12.5px/1.5 var(--sans); color: var(--t3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Pin button */ .aps-card-pin { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--t5); cursor: pointer; transition: color .12s, background .12s; background: transparent; border: none; flex-shrink: 0; } .aps-card:hover .aps-card-pin, .aps-card-pin.on { color: var(--workroom-accent); } .aps-card-pin.on { color: var(--brand); } .aps-card-pin:hover { background: var(--beige-pg); color: var(--brand); } .aps-card-pin svg { width: 14px; height: 14px; } /* Card footer */ .aps-card-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--beige-rule); margin-top: auto; } .aps-card-foot .fw-tag { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--mono); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } .aps-card-foot .fw-tag.streamlit { color: #A23E2E; background: #FBE6DF; } .aps-card-foot .fw-tag.gradio { color: #B58300; background: #FBEDD9; } .aps-card-foot .fw-tag.dash { color: #0F766E; background: #D6F0E5; } .aps-card-foot .fw-tag.react { color: #2D6DB8; background: #E0ECF7; } .aps-card-foot .installs { font: 400 11px var(--mono); color: var(--t4); } .aps-card-foot .spacer { flex: 1; } /* Launch button — opens app */ .aps-card-launch-btn { padding: 5px 12px; background: #fff; color: var(--t2); border: 1px solid var(--beige-b); border-radius: 6px; font: 600 12px var(--sans); cursor: pointer; transition: background .12s, color .12s, border-color .12s; display: inline-flex; align-items: center; gap: 5px; } .aps-card-launch-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); } .aps-card-launch-btn svg { width: 11px; height: 11px; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 960px) { .aps-page { padding: 24px 20px 48px; } .aps-frameworks { grid-template-columns: repeat(3, 1fr); } .aps-installed-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .aps-frameworks { grid-template-columns: repeat(2, 1fr); } .aps-installed-row { grid-template-columns: 1fr; } .aps-grid { grid-template-columns: 1fr; } } /* ── Launcher overlay (modal-style app preview) ──────────────── */ /* The full-screen overlay that mounts when the user clicks an app card. Click outside to dismiss. Pre-CR-440 this entire block was built with ~15 inline style props; extracted here so the styling is themable, dark-mode-ready, and grep-able. */ .aps-launcher-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 20, 30, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; animation: aps-launcher-fade 0.18s ease-out; } @keyframes aps-launcher-fade { from { opacity: 0; } to { opacity: 1; } } .aps-launcher-modal { background: #fff; border-radius: 16px; width: min(1100px, 100%); height: min(720px, 100%); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 1px 2px rgba(20,20,30,.06), 0 32px 80px rgba(20,20,30,.32); animation: aps-launcher-rise 0.22s cubic-bezier(.4, 0, .2, 1); } @keyframes aps-launcher-rise { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .aps-launcher-head { padding: 14px 20px; border-bottom: 1px solid var(--beige-rule); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .aps-launcher-id { flex: 1; min-width: 0; } .aps-launcher-name { font: 600 15px var(--sans); color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aps-launcher-meta { font: 400 11.5px var(--mono); color: var(--t4); margin-top: 2px; } .aps-launcher-close { background: none; border: none; color: var(--t3); cursor: pointer; padding: 6px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .aps-launcher-close:hover { background: var(--beige-pg); color: var(--t); } .aps-launcher-close svg { width: 14px; height: 14px; } .aps-launcher-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 32px; color: var(--t4); font: 400 13px/1.5 var(--serif); background: var(--beige-pg); text-align: center; } .aps-launcher-body code { font: 500 12px var(--mono); background: var(--beige-pill); padding: 1px 5px; border-radius: 4px; color: var(--t2); } @media (prefers-reduced-motion: reduce) { .aps-launcher-backdrop, .aps-launcher-modal { animation: none; } } /* ==== ArtifactsV2.css ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Artifacts V2 — canonical ar-* + pv-* design source Lifted from workroom-design/styles.css (lines 765-779, 1138-1180). ════════════════════════════════════════════════════════════════ */ .ar-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } .ar-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .ar-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .ar-head-eyebrow b { color: var(--t); font-weight: 600; } .ar-gen-link { font: 500 12px var(--sans); color: var(--t3); padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: color .12s, background .12s; background: none; border: none; display: inline-flex; align-items: center; gap: 4px; } .ar-gen-link:hover { color: var(--brand); background: var(--beige-pg); } .ar-gen-link svg { width: 13px; height: 13px; } .ar-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .ar-group { margin-bottom: 24px; } .ar-group-hdr { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px 10px; border-bottom: 1px solid var(--beige-rule); margin-bottom: 12px; } .ar-group-name { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .ar-group-ct { font: 500 11px var(--mono); color: var(--t4); } .ar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .ar-card { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .12s, box-shadow .12s, transform .12s; position: relative; text-align: left; font: inherit; width: 100%; } .ar-card:hover { border-color: #D6CFBE; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 8px 20px rgba(20,20,30,.05); transform: translateY(-1px); } .ar-preview { height: 140px; background: var(--beige-pg); border-bottom: 1px solid var(--beige-rule); position: relative; overflow: hidden; } .ar-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(to bottom, transparent, #fff); } .ar-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; z-index: 2; } .ar-card:hover .ar-card-actions { opacity: 1; } .ar-card-action { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--beige-b); border-radius: 7px; cursor: pointer; color: var(--t2); transition: background .12s, color .12s, border-color .12s; box-shadow: 0 1px 2px rgba(20,20,30,.05); } .ar-card-action:hover { background: var(--brand); color: #fff; border-color: var(--brand); } .ar-card-action svg { width: 12px; height: 12px; } .ar-card-meta { padding: 13px 16px 10px; } .ar-card-name { font: 600 13.5px var(--sans); color: var(--t); display: flex; align-items: center; gap: 8px; letter-spacing: -0.005em; min-width: 0; } .ar-card-name-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-card-name .ext { font: 500 10px var(--mono); color: var(--t4); padding: 1px 5px; background: var(--beige-pg); border: 1px solid var(--beige-rule); border-radius: 4px; text-transform: uppercase; flex-shrink: 0; } .ar-card-byline { font: 400 11.5px var(--sans); color: var(--t3); margin-top: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-card-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--beige-rule); } .ar-card-status { display: inline-flex; align-items: center; gap: 5px; font: 500 10px var(--mono); padding: 2px 7px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .ar-card-status.draft { color: var(--workroom-accent); background: var(--workroom-accent-bg); } .ar-card-status.final { color: var(--ok); background: var(--ok-bg); } .ar-card-status.shared { color: var(--brand); background: var(--brandL); } .ar-card-status .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .ar-card-time { font: 400 11px var(--mono); color: var(--t4); margin-left: auto; font-variant-numeric: tabular-nums; } /* ── Preview thumbnails ──────────────────────────────────────── */ .pv-doc { padding: 16px 20px; font: 400 9px/1.5 var(--serif); color: var(--t2); } .pv-doc .h { font: 600 12px var(--serif); color: var(--t); margin-bottom: 6px; letter-spacing: -0.01em; } .pv-doc .l { background: var(--t4); height: 3px; border-radius: 2px; margin: 3px 0; opacity: 0.4; } .pv-doc .l.s { width: 60%; } .pv-doc .l.m { width: 85%; } .pv-doc .l.f { width: 100%; } .pv-tbl { padding: 12px 14px; font-family: var(--mono); font-size: 8px; color: var(--t2); } .pv-tbl-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding: 4px 0; border-bottom: 1px solid var(--beige-rule); } .pv-tbl-row.hdr { font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; } .pv-tbl-row .pos { color: #2F9163; font-weight: 600; } .pv-tbl-row .neg { color: #B3422E; font-weight: 600; } .pv-deck { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pv-deck-slide { background: #fff; border: 1px solid var(--beige-rule); border-radius: 4px; aspect-ratio: 16/9; padding: 8px; font-size: 8px; color: var(--t3); } .pv-deck-slide .t { font: 600 8px var(--sans); color: var(--t); margin-bottom: 3px; } .pv-deck-slide .bar { height: 18px; background: linear-gradient(90deg, var(--brand) 70%, var(--beige-rule) 70%); border-radius: 2px; margin-top: 3px; } .pv-deck-slide.cover { background: var(--brand); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; } .pv-deck-slide.cover .t { color: #fff; } @media (max-width: 600px) { .ar-page { padding: 24px 20px 48px; } .ar-grid { grid-template-columns: 1fr; } } /* ==== RunsV2.css ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Runs V2 — canonical wr-* design source Lifted from workroom-design/styles.css (lines 1627-1700). ════════════════════════════════════════════════════════════════ */ .wr-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } .wr-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .wr-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .wr-head-eyebrow b { color: var(--t); font-weight: 600; } .wr-head-eyebrow .live-ct { color: var(--brand); font-weight: 600; } .wr-head-eyebrow .fail-ct { color: var(--err); font-weight: 600; } .wr-head-eyebrow .refresh { font: 400 11px var(--mono); color: var(--t4); margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: none; } .wr-head-eyebrow .refresh:hover { color: var(--brand); } .wr-head-eyebrow .refresh svg { width: 11px; height: 11px; } .wr-btn-primary { background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font: 600 12px var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: filter .12s; } .wr-btn-primary:hover { filter: brightness(1.08); } .wr-btn-primary svg { width: 12px; height: 12px; } .wr-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .wr-toolbar-divider { width: 1px; height: 18px; background: var(--beige-b); } .wr-table { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; overflow: hidden; } .wr-col-hdr { display: grid; grid-template-columns: 1.6fr 110px 140px 100px 110px; gap: 14px; padding: 10px 18px; background: var(--beige-pg); border-bottom: 1px solid var(--beige-rule); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--t4); } .wr-row { display: grid; grid-template-columns: 1.6fr 110px 140px 100px 110px; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--beige-rule); cursor: pointer; transition: background .08s; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font: inherit; } .wr-row:hover { background: var(--beige-pg); } .wr-row:last-child { border-bottom: none; } .wr-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .wr-row-title { font: 500 13px var(--sans); color: var(--t); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wr-row-trigger { display: flex; align-items: center; gap: 6px; font: 400 11px var(--mono); color: var(--t4); min-width: 0; } .wr-row-trigger svg { width: 11px; height: 11px; color: var(--t4); flex-shrink: 0; } .wr-row-trigger .ag-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wr-row-trigger .ag-type { font: 600 9px var(--mono); padding: 1px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px; } .wr-row-trigger .ag-type.workflow { color: #2F9163; background: #E6F4EC; } .wr-row-trigger .ag-type.coordinator { color: #C8821D; background: #FBEDD9; } .wr-status { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; min-width: 84px; justify-content: center; } .wr-status.ok { color: var(--ok); background: var(--ok-bg); } .wr-status.fail { color: var(--err); background: var(--err-bg); } .wr-status.live { color: var(--brand); background: var(--brandL); } .wr-status.sched { color: var(--t3); background: var(--beige-pill); } .wr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .wr-status.live .wr-status-dot { animation: wrPulse 1.6s ease-in-out infinite; } @keyframes wrPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .wr-row-time { font: 400 11px var(--mono); color: var(--t3); font-variant-numeric: tabular-nums; line-height: 1.4; } .wr-row-time .started { color: var(--t2); display: block; } .wr-row-dur { font: 500 12px var(--mono); color: var(--t2); font-variant-numeric: tabular-nums; } .wr-row-out { font: 400 11px var(--mono); color: var(--t3); display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .wr-row-out svg { width: 11px; height: 11px; color: var(--t4); flex-shrink: 0; } .wr-row-out span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wr-row-out.error { color: var(--err); } .wr-row-out.error svg { color: var(--err); } .wr-empty { padding: 64px 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .wr-empty-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--beige-pg); color: var(--t4); display: flex; align-items: center; justify-content: center; } .wr-empty-icon svg { width: 22px; height: 22px; } .wr-empty-title { font: 600 14px var(--sans); color: var(--t); } .wr-empty-desc { font: 400 12.5px/1.5 var(--serif); color: var(--t3); max-width: 340px; } .wr-range { font: 500 12px var(--mono); color: var(--t3); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 6px; cursor: pointer; background: none; border: none; position: relative; } .wr-range:hover { background: var(--beige-pg); color: var(--t); } .wr-range svg { width: 11px; height: 11px; } @media (max-width: 960px) { .wr-page { padding: 24px 20px 48px; } .wr-col-hdr, .wr-row { grid-template-columns: 1fr 90px 80px; } .wr-col-hdr > :nth-child(n+4), .wr-row > :nth-child(n+4) { display: none; } } /* ── Respect reduced-motion preference ───────────────────────── */ /* Users with vestibular conditions or motion sensitivity set this in their OS. Animations don't add information — they're polish. Default platform stylesheet has a global rule for this; these selectors are scoped to the V2 namespaces so we don't depend on load order. */ @media (prefers-reduced-motion: reduce) { .hv4-urgent-dot, .hv4-do-arrow, .hv4-recent-row, .hv4-continue-pill, .workroom-chat-v2 .msg-user, .workroom-chat-v2 .msg-ai, .workroom-chat-v2 .ai-body .cursor, .workroom-chat-v2 .ai-thinking .dot, .wr-status.live .wr-status-dot { animation: none !important; transition: none !important; } } /* ==== SharedV2.css ==== */ /* ════════════════════════════════════════════════════════════════ Workroom Shared V2 — canonical sh-* design source Lifted from workroom-design/styles.css (lines 1781-1837). ════════════════════════════════════════════════════════════════ */ .sh-page { max-width: 1240px; margin: 0 auto; padding: 32px 48px 64px; width: 100%; } .sh-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--beige-rule); } .sh-head-eyebrow { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .sh-head-eyebrow b { color: var(--t); font-weight: 600; } .sh-head-eyebrow .unread-ct { color: var(--brand); font-weight: 600; } /* Tab segmented control */ .sh-tabs { display: inline-flex; align-items: center; background: var(--beige-pg); border: 1px solid var(--beige-b); border-radius: 8px; padding: 2px; gap: 0; } .sh-tab { background: transparent; border: none; padding: 5px 12px; font: 600 12px var(--sans); color: var(--t3); cursor: pointer; border-radius: 6px; transition: background .12s, color .12s; display: inline-flex; align-items: center; gap: 6px; } .sh-tab.on { background: #fff; color: var(--t); box-shadow: 0 1px 2px rgba(20,20,30,.06); } .sh-tab .n { font: 500 11px var(--mono); color: var(--t4); } .sh-tab.on .n { color: var(--brand); font-weight: 600; } .sh-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .sh-toolbar-divider { width: 1px; height: 18px; background: var(--beige-b); } /* Group */ .sh-group { margin-bottom: 20px; } .sh-group-hdr { display: flex; align-items: baseline; gap: 8px; padding: 8px 4px 8px; border-bottom: 1px solid var(--beige-rule); margin-bottom: 8px; } .sh-group-name { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); } .sh-group-ct { font: 500 11px var(--mono); color: var(--t4); } /* Row */ .sh-list { display: flex; flex-direction: column; } .sh-row { display: grid; grid-template-columns: 22px 28px 1fr 110px 80px auto; gap: 14px; align-items: center; padding: 11px 8px; border-radius: 8px; cursor: pointer; transition: background .08s; position: relative; background: none; border: none; font: inherit; text-align: left; width: 100%; } .sh-row:hover { background: rgba(20,20,30,.025); } .sh-row.unread { background: transparent; } .sh-row.unread::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .sh-row.unread .sh-title { font-weight: 600; color: var(--t); } .sh-row:not(.unread) .sh-title { font-weight: 500; color: var(--t2); } /* Kind icon */ .sh-kind { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; } .sh-kind.thread { background: #EFEAFE; color: #5436D6; } .sh-kind.artifact { background: #FBE6DF; color: #A23E2E; } .sh-kind.agent { background: #E6F4EC; color: #117A45; } .sh-kind.run { background: #FBEDD9; color: #B58300; } .sh-kind svg { width: 12px; height: 12px; } /* Sender avatar */ .sh-from-av { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 10px var(--sans); flex-shrink: 0; letter-spacing: 0.02em; } .sh-body { min-width: 0; } .sh-title { font: 500 13.5px var(--sans); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; line-height: 1.25; } .sh-prev { font: 400 12px/1.4 var(--serif); color: var(--t4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .sh-from-name { font: 500 11px var(--mono); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-time { font: 400 11px var(--mono); color: var(--t4); text-align: right; font-variant-numeric: tabular-nums; } .sh-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: #fff; border: 1px solid var(--beige-b); border-radius: 6px; font: 600 12px var(--sans); color: var(--t2); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s, border-color .12s; } .sh-row:hover .sh-action { opacity: 1; } .sh-row.unread .sh-action { opacity: 1; background: var(--brand); color: #fff; border-color: var(--brand); } .sh-row.unread .sh-action:hover { filter: brightness(1.08); } .sh-action:hover { background: var(--brand); color: #fff; border-color: var(--brand); } .sh-action svg { width: 11px; height: 11px; } /* Empty state */ .sh-empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .sh-empty-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brandL); color: var(--brand); display: flex; align-items: center; justify-content: center; } .sh-empty-icon svg { width: 22px; height: 22px; } .sh-empty-title { font: 600 14px var(--sans); color: var(--t); } .sh-empty-desc { font: 400 12.5px/1.5 var(--serif); color: var(--t3); max-width: 380px; } .sh-empty-explainer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 760px; margin-top: 18px; width: 100%; } .sh-empty-explainer-card { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 14px 14px 12px; text-align: left; } .sh-empty-explainer-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .sh-empty-explainer-icon.thread { background: #EFEAFE; color: #5436D6; } .sh-empty-explainer-icon.artifact { background: #FBE6DF; color: #A23E2E; } .sh-empty-explainer-icon.agent { background: #E6F4EC; color: #117A45; } .sh-empty-explainer-icon.run { background: #FBEDD9; color: #B58300; } .sh-empty-explainer-icon svg { width: 13px; height: 13px; } .sh-empty-explainer-title { font: 600 12px var(--sans); color: var(--t); margin-bottom: 3px; } .sh-empty-explainer-desc { font: 400 11px/1.4 var(--serif); color: var(--t4); } @media (max-width: 720px) { .sh-page { padding: 24px 20px 48px; } .sh-row { grid-template-columns: 22px 1fr auto; } .sh-from-av, .sh-from-name, .sh-time { display: none; } .sh-empty-explainer { grid-template-columns: repeat(2, 1fr); } } /* ==== dashboard.css (Studio dash) ==== */ /* ═══════════════════════════════════════════════════════════════════════════════ * dashboard-unified.css · Variation C dashboard styles * * Layered on top of: * - colors_and_type.css (design tokens: --brand, --beige-pg, --t1..--t4) * - profiler.css (shell chrome: .S sidebar, .M main, .TB topbar) * * Naming convention: * - .dSection-* → section wrapper * - .attn* → attention zone * - .pulse* → KPI strip * - .fleet* → fleet agents grid * - .stream* → activity timeline * - .qs* → quickstart tiles * - .dDelta, .dSpark, .dCTA → primitives * ═══════════════════════════════════════════════════════════════════════════════ */ /* ─── Page body wrapper · gives sections vertical rhythm ───────────────────── */ .dashBody { padding: 0 28px 64px; max-width: 1380px; margin: 0 auto; } .dSection { margin-top: 28px; } .dSection-hdr { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; padding: 0 2px; } .dSection-hdr h3 { margin: 0; font: 600 17px var(--sans); color: var(--t); letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 8px; } .dSection-hdr h3.quiet { font-weight: 500; color: var(--t3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; } .dSection-ct { font: 600 11px var(--mono); color: var(--brand); background: var(--brandL); padding: 2px 8px; border-radius: 12px; letter-spacing: 0.02em; } .dSection-hdr .meta, .dSection-hdr a { font: 500 12px var(--sans); color: var(--t3); margin-left: auto; } .dSection-hdr a { color: var(--brand); cursor: pointer; } .dSection-hdr .meta.normal { margin-left: 0; text-transform: none; letter-spacing: 0; } .dSection-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .dSection-quiet { margin-top: 40px; opacity: 0.85; } /* ─── Segmented control · for fleet filter ────────────────────────────────── */ .seg { display: inline-flex; background: var(--beige); border: 1px solid var(--beige-b); border-radius: 8px; padding: 2px; } .seg button { padding: 4px 11px; border: 0; background: transparent; font: 500 12px var(--sans); color: var(--t3); cursor: pointer; border-radius: 6px; } .seg button.on { background: #fff; color: var(--t); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } /* ─── Inline code · used in resume row subtitles ─────────────────────────── */ .inline-code { font: 500 11px var(--mono); background: var(--beige); padding: 0 4px; border-radius: 4px; } /* ═══════════════════════════════════════════════════════════════════════════ * 1. ATTENTION CARDS * ═══════════════════════════════════════════════════════════════════════════ */ .attnGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .attnCard { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; position: relative; overflow: hidden; transition: box-shadow 0.15s; } .attnCard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); } .attnCard:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .attnCard.tone-brand { --accent: var(--brand); } .attnCard.tone-bad { --accent: #A23E2E; } .attnCard.tone-warn { --accent: #B58300; } .attnCard.tone-muted { --accent: var(--t4); } .attnCard-ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; opacity: 0.92; } .attnCard.tone-muted .attnCard-ic { background: var(--beige); color: var(--t3); } .attnCard-ic svg { width: 18px; height: 18px; } .attnCard-body { min-width: 0; } .attnCard-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .attnCard-lbl { font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); } .attnCard.tone-muted .attnCard-lbl { color: var(--t3); } .attnCard-age { font: 500 10px var(--mono); color: var(--t4); } .attnCard-body h4 { margin: 0 0 4px; font: 600 14px var(--sans); color: var(--t); letter-spacing: -0.005em; line-height: 1.3; } .attnCard-body p { margin: 0; font: 400 13px var(--sans); color: var(--t3); line-height: 1.45; } .attnCard .dCTA { font: 500 12px var(--sans); color: var(--t2); background: var(--beige); border: 1px solid var(--beige-b); padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .attnCard .dCTA:hover { background: #fff; border-color: var(--t4); color: var(--t); } /* ═══════════════════════════════════════════════════════════════════════════ * 2. PULSE STRIP * ═══════════════════════════════════════════════════════════════════════════ */ .pulse { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 4px 0; } .pulse-kpi { padding: 14px 18px; border-left: 1px solid var(--beige-rule); } .pulse-kpi:first-child { border-left: 0; } .pulse-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .pulse-v { font: 600 22px var(--sans); color: var(--t); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } .pulse-k { font: 500 11px var(--sans); color: var(--t3); } .pulse-u { color: var(--t4); } /* ─── Delta arrow primitive · used across the dashboard ──────────────────── */ .dDelta { display: inline-flex; align-items: center; gap: 2px; font: 600 12px var(--sans); font-variant-numeric: tabular-nums; } .dDelta-arr { font-size: 8px; margin-right: 1px; } .dDelta.good { color: #107A4D; } .dDelta.bad { color: #A23E2E; } .dDelta.flat { color: var(--t4); } /* ═══════════════════════════════════════════════════════════════════════════ * 3. FLEET GRID * ═══════════════════════════════════════════════════════════════════════════ */ .fleetGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .fleetTile { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.15s; } .fleetTile:hover { border-color: var(--t4); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .fleetTile.muted { opacity: 0.72; } .fleetTile-hd { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; margin-bottom: 14px; } .fleetTile-av { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); color: #fff; letter-spacing: 0.02em; } .fleetTile-nm { min-width: 0; } .fleetTile-nm b { display: block; font: 600 13px var(--sans); color: var(--t); letter-spacing: -0.005em; } .fleetTile-sub { display: block; font: 400 11px var(--sans); color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .fleetTile-pill { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 8px; white-space: nowrap; } .fleetTile-pill.tone-info { background: #E0E6F4; color: #1F4A8A; } .fleetTile-pill.tone-good { background: #D6EFD9; color: #107A4D; } .fleetTile-pill.tone-warn { background: #FAEDCC; color: #B58300; } .fleetTile-pill.tone-live { background: #D6EFD9; color: #107A4D; } .fleetTile-pill.tone-muted { background: var(--beige); color: var(--t3); } .dotPulse { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot-pulse 1.4s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .fleetTile-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fleetTile-spark { display: flex; align-items: center; gap: 6px; } .fleetTile-sparklbl { font: 500 10px var(--mono); color: var(--t4); letter-spacing: 0.04em; text-transform: uppercase; } .fleetTile-score { display: flex; align-items: baseline; gap: 6px; } .fleetTile-score-v { font: 600 17px var(--sans); color: var(--t); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ * 4 + 5 · SPLIT (Resume + Stream) * ═══════════════════════════════════════════════════════════════════════════ */ .dSplit2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; } .dCard { background: #fff; border: 1px solid var(--beige-b); border-radius: 12px; padding: 18px 20px; } .dCard-hdr { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .dCard-hdr h4 { margin: 0; font: 600 13px var(--sans); color: var(--t); } .dCard-hdr .meta { font: 500 11px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } .dCard-hdr a { margin-left: auto; font: 500 12px var(--sans); color: var(--brand); cursor: pointer; } /* Resume rows */ .resRow { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--beige-rule); align-items: center; } .resRow:last-child { border-bottom: 0; } .resRow .ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 600 11px var(--sans); color: #fff; } .resRow .nm { font: 600 13px var(--sans); color: var(--t); display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .resRow .sub { font: 400 12px var(--sans); color: var(--t3); } .resRow .pill { display: inline-flex; align-items: center; gap: 4px; font: 600 10px var(--sans); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 8px; } .resRow .pill.live { background: #D6EFD9; color: #107A4D; } .resRow .pill.canary { background: #F4EFFF; color: var(--brand); } .resRow .pill.comparing { background: #E0E6F4; color: #1F4A8A; } .resRow .pill.prelaunch { background: #FAEDCC; color: #B58300; } .resRow .pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .resRow .right { text-align: right; } .resRow .num { font: 600 16px var(--sans); font-variant-numeric: tabular-nums; } .resRow .num.good { color: #107A4D; } .resRow .num.warn { color: #B58300; } .resRow .num.bad { color: #A23E2E; } .resRow .lbl { font: 500 10px var(--mono); color: var(--t4); text-transform: uppercase; letter-spacing: 0.04em; } /* Stream timeline */ .streamCard { padding: 18px 0 12px; } .streamCard .dCard-hdr { padding: 0 20px; } .stream { position: relative; } .stream::before { content: ""; position: absolute; left: 32px; top: 14px; bottom: 14px; width: 1px; background: var(--beige-rule); } .stream-row { display: grid; grid-template-columns: 44px 1fr; gap: 0; padding: 8px 20px; align-items: start; } .stream-pip { width: 11px; height: 11px; border-radius: 50%; margin: 4px 0 0 5px; position: relative; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--beige-b); } .stream-pip.tone-good { background: #107A4D; } .stream-pip.tone-info { background: var(--brand); } .stream-pip.tone-bad { background: #A23E2E; } .stream-pip.tone-warn { background: #B58300; } .stream-pip.tone-muted { background: var(--t4); } .stream-pip.cur { box-shadow: 0 0 0 1px #107A4D, 0 0 0 4px rgba(16, 122, 77, 0.15); } .stream-body { min-width: 0; } .stream-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } .stream-top b { font: 600 13px var(--sans); color: var(--t); } .stream-agent { font: 500 10px var(--mono); color: var(--brand); background: var(--brandL); padding: 1px 6px; border-radius: 4px; } .stream-ts { margin-left: auto; font: 500 11px var(--mono); color: var(--t4); } .stream-desc { font: 400 12px var(--sans); color: var(--t3); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════════════════ * 6. QUICKSTART TILES * ═══════════════════════════════════════════════════════════════════════════ */ .qsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .qsTile { display: grid; grid-template-columns: 32px 1fr 20px; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--beige-b); border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; } .qsTile:hover { border-color: var(--brand); background: var(--brandL); } .qsTile-ic { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--beige); color: var(--t2); } .qsTile:hover .qsTile-ic { background: var(--brand); color: #fff; } .qsTile-ic svg { width: 14px; height: 14px; } .qsTile-body { min-width: 0; line-height: 1.25; } .qsTile-body b { display: block; font: 600 13px var(--sans); color: var(--t); letter-spacing: -0.005em; } .qsTile-body span { font: 400 11px var(--sans); color: var(--t3); } .qsTile-chev { color: var(--t4); font-size: 14px; } .qsTile:hover .qsTile-chev { color: var(--brand); } /* ═══════════════════════════════════════════════════════════════════════════ * Buttons in PageHead (reused from existing patterns) * ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #fff; border: 1px solid var(--beige-b); border-radius: 8px; font: 500 12px var(--sans); color: var(--t2); cursor: pointer; } .btn:hover { border-color: var(--t4); color: var(--t); } .btn svg { width: 13px; height: 13px; } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn.primary:hover { filter: brightness(1.08); } .kbd { font: 500 10px var(--mono); color: var(--t4); border: 1px solid var(--beige-b); border-radius: 4px; padding: 1px 4px; background: var(--beige-pg); margin-left: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ * Platform-side glue * ═══════════════════════════════════════════════════════════════════════════ * * The canonical dashboard-unified.css was authored against the design's * `.PH-title h1` / `.dSection-hdr h3 em` selectors. Katonic Studio's * existing chrome ships `.page-hdr` / `.page-title` via global.css and * the platform Sidebar/Topbar layout. These rules bridge the canonical * design's typography (italic-serif on the leading phrase in the page * title + descriptive word in each section heading) onto the platform's * existing classes. * * Scoped under .page-hdr / .dSection-hdr so the rules can't leak into * other pages. */ .page-hdr .page-title em, .page-hdr .page-title span[style*="italic"] { font-family: var(--serif); font-style: italic; font-weight: 500; } .dSection-hdr h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; } /* The canonical lays out the dashboard inside its own 1380px max-width container with 28px horizontal padding. Studio's Shell shim already gives us padding via Tailwind (`px-7 py-6`); zero out the dashBody padding-left/right on tablet/desktop so the inner grid lines up with PageHead instead of double-indenting. */ .dashBody { padding-left: 0; padding-right: 0; max-width: none; } /* Dashboard CTA links — the canonical uses bare tags which inherit no cursor; ensure they read as interactive. */ .dSection-hdr a, .dCard-hdr a { cursor: pointer; } /* ==== PromptStudio.css ==== */ /* ============================================================ * Prompt Studio styles — CR-103 * * All class names follow the design canvas. Tokens (--brand, --beige, * --t, --t2, --t3, --t4, etc.) are defined in styles/global.css and * styles/studio.css; this file consumes them — never redefines. * * Organization: * 1. Layout shells — psWrap variants * 2. Library sidebar — psLib, psLib-it * 3. Editor header — psEd-hd, psEd-r1, psEd-r2, psEd-tabs * 4. Compose body — psMsg, psAdd-row, psInsp * 5. Optimize view — psOpt, psDiff, psDecisionStrip, psRejectMenu * 6. Test view — psRun, psRunRow, psRunRail * 7. History + table + json + empty/error states * ============================================================ */ /* ── Locally scoped CSS variables for Prompt Studio ──────────── */ .psWrap, .psWrap-loading, .psWrap-empty, .psWrap-error { --beige-rule: var(--beige-c, #E8E2D5); --beige-b: var(--beige-d, #D8D2C5); --beige: var(--bg, #FAF6EF); --psWidthLib: 260px; --psWidthInsp: 320px; --add-bg: rgba(91, 163, 122, 0.08); --add-fg: var(--ok, #5BA37A); --rem-bg: rgba(176, 60, 60, 0.06); --rem-fg: var(--err, #B03C3C); --quality-fg: var(--ok, #5BA37A); --cost-fg: var(--brand, #5C31FF); } /* ============================================================ * 1. Layout shells * ============================================================ */ .psWrap { display: grid; /* Two columns only: library + editor. The inspector lives INSIDE .psEd (rendered by ComposeView as