/* ========================================================= Jarvis · Proactive ITSM — themable design system One stylesheet, two themes. The light palette lives at `:root`; the dark palette overrides the same tokens via `[data-theme="dark"]`. JS toggles the attribute on . ========================================================= */ /* Font stack: prefer locally-installed Salesforce Sans (works on Salesforce employee machines), then fall back to Inter (loaded from Google Fonts in index.html — Inter is metrics-compatible with Salesforce Sans), then system-ui. Salesforce Sans is licensed and cannot be hosted publicly. */ :root { /* ----- Light pastel palette (default) ----- */ /* Page background gradient stops */ --bg-start: #fbeefb; /* pink/lilac at top-left */ --bg-mid: #e8edff; /* periwinkle middle */ --bg-end: #f3e7ff; /* lilac at bottom-right */ --bg-base: #f6f7ff; /* paper white */ /* Surface tokens — semantic, not hex-named, so dark mode can swap them */ --bg-1: #ffffff; /* primary card surface (bubbles, tiles, inputs, panels) */ --bg-2: #f9faff; /* subtle surface (row hover, secondary fills) */ --bg-soft: #eef2ff; /* tinted soft (user bubble, action hover, btn hover bg) */ --bg-soft-2: #f3f6ff; /* sys bubble */ --bg-chrome: #f6f8ff; /* fake-browser chrome, table head */ --panel: rgba(255, 255, 255, 0.92); --panel-translucent: rgba(255, 255, 255, 0.55); /* topbar + dock whisper (iOS-like frost) */ --panel-hairline: rgba(11, 20, 48, 0.08); /* near-invisible separator under topbar */ --line: #e6e8f4; --line-strong: #d6d9e8; /* Text */ --ink: #0b1430; --ink-dim: #5b6585; --ink-mute: #8b94b3; /* Brand accents — the reference's blue→violet system. Same in both themes. */ --accent-1: #2f5cff; /* primary blue */ --accent-2: #6f5fff; /* lilac/violet */ --accent-3: #a25cff; /* purple end of gradient */ --accent-warn:#ff9a3d; --accent-ok: #28c876; --grad-jarvis: linear-gradient(90deg, #2f5cff 0%, #6a4dff 50%, #a25cff 100%); --grad-soft: linear-gradient(135deg, rgba(47,92,255,.08), rgba(162,92,255,.10) 100%); /* Composed surface decorations that change between themes */ --linkcard-grad: linear-gradient(135deg, #eef2ff, #f3e8ff); --whisper-ring: linear-gradient(135deg, #c8b8ff 0%, #e0d6ff 30%, #d6def5 55%, #c5d2ff 80%, #b8c6ff 100%); --orb-a-color: #f6c8ff; /* top-left ambient blob */ --orb-b-color: #c1d0ff; /* bottom-right ambient blob */ --scrollbar: rgba(120, 140, 210, .25); --progress-track:rgba(120, 140, 210, .15); --focus-ring: rgba(47, 92, 255, .15); --radius-lg: 18px; --radius-md: 12px; --radius-sm: 8px; --shadow-1: 0 10px 30px rgba(54, 67, 142, 0.08), 0 1px 0 rgba(255,255,255,.6) inset; --shadow-2: 0 24px 60px rgba(54, 67, 142, 0.12), 0 1px 0 rgba(255,255,255,.6) inset; --font-ui: 'Salesforce Sans', 'Inter', 'SF Pro Text', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color-scheme: light; } /* ----- Dark theme — derived from the light tokens ----- */ [data-theme="dark"] { /* Deep violet/navy gradient (same blue→violet brand DNA, lower luminance) */ --bg-start: #1f1432; --bg-mid: #0d1428; --bg-end: #221038; --bg-base: #0a0f24; --bg-1: #161e3b; --bg-2: #1c2547; --bg-soft: #1f2a55; --bg-soft-2: #1a2240; --bg-chrome: #131b34; --panel: rgba(20, 27, 53, 0.92); --panel-translucent: rgba(15, 21, 45, 0.50); --panel-hairline: rgba(255, 255, 255, 0.06); --line: #2a3358; --line-strong: #3b4675; --ink: #eef0fb; --ink-dim: #a8b1d2; --ink-mute: #6e7aa0; /* Accents brightened slightly so they read on the dark surface */ --accent-1: #6b8aff; --accent-2: #8c7bff; --accent-3: #b478ff; --grad-jarvis: linear-gradient(90deg, #6b8aff 0%, #8c7bff 50%, #b478ff 100%); --grad-soft: linear-gradient(135deg, rgba(107,138,255,.10), rgba(180,120,255,.14) 100%); --linkcard-grad: linear-gradient(135deg, #1f2a55, #2a1f4a); --whisper-ring: linear-gradient(135deg, #6b3a8a 0%, #2a3358 35%, #2a3358 65%, #3a4a8a 100%); --orb-a-color: #6b3a8a; --orb-b-color: #2a4488; --scrollbar: rgba(170, 190, 255, .22); --progress-track:rgba(170, 190, 255, .12); --focus-ring: rgba(107, 138, 255, .25); --shadow-1: 0 10px 30px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255,255,255,.04) inset; --shadow-2: 0 24px 60px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255,255,255,.04) inset; color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font-ui); color: var(--ink); background: radial-gradient(1100px 700px at 8% 6%, var(--bg-start) 0%, transparent 60%), radial-gradient(900px 700px at 95% 95%, var(--bg-end) 0%, transparent 60%), linear-gradient(180deg, var(--bg-base) 0%, var(--bg-mid) 100%); overflow: hidden; transition: color .3s ease; } /* ---------- Ambient background (pastel orb blobs only) ---------- */ .bg-orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; z-index: 0; animation: float 14s ease-in-out infinite; } .bg-orb--a { width: 480px; height: 480px; background: radial-gradient(circle, var(--orb-a-color), transparent 60%); top: -120px; left: -120px; } .bg-orb--b { width: 520px; height: 520px; background: radial-gradient(circle, var(--orb-b-color), transparent 60%); bottom: -160px; right: -180px; animation-delay: -6s; } @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-22px) } } /* ---------- Topbar — stacked headers ---------- Two slim bars sit at the top of the viewport: 1) .topbar-meta — black bar for demo navigation (Pritesh-facing). Holds the Lobby button + persona pill + theme toggle + status pill. 2) .topbar-sf — Salesforce Lightning header (in-simulation chrome). Holds the cloud logo + global search + quick-action icons + profile avatar. Decorative — establishes that what's below is what each persona actually sees inside Salesforce. Heights are exposed as CSS vars so .workspace + .lobby can size their own scroll viewports to the remaining vertical space. */ :root { --topbar-meta-height: 36px; --topbar-sf-height: 52px; --topbar-total: calc(var(--topbar-meta-height) + var(--topbar-sf-height)); } @media (max-width: 720px) { :root { --topbar-meta-height: 32px; --topbar-sf-height: 48px; } } /* ===== 1) Meta bar (black, demo nav) ============================== */ .topbar-meta { position: relative; z-index: 6; height: var(--topbar-meta-height); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #181c2a; color: #e6e9f4; border-bottom: 1px solid #2a3050; font-size: 12px; } [data-theme="dark"] .topbar-meta { background: #0c0f1d; border-bottom-color: #1f2440; } .topbar-meta__left, .topbar-meta__right { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-meta__brand { display: inline-flex; align-items: center; gap: 8px; color: #cdd3eb; font-weight: 600; font-size: 12px; letter-spacing: 0.01em; white-space: nowrap; } .topbar-meta__mark { width: 18px; height: 18px; object-fit: contain; display: block; filter: drop-shadow(0 0 6px rgba(162, 75, 255, .35)); } .topbar-meta__brand-text { color: #f0f3ff; } /* Theme toggle restyled for the dark bar */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: #cdd3eb; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, color .15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(110, 224, 163, 0.45); } .theme-toggle__icon { display: none; } :root:not([data-theme="dark"]) .theme-toggle__icon--moon { display: inline-block; } [data-theme="dark"] .theme-toggle__icon--sun { display: inline-block; } /* Status pill on the dark bar */ .status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: rgba(40, 200, 118, 0.14); border: 1px solid rgba(40, 200, 118, 0.36); color: #6ee0a3; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; } .status-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #28c876; box-shadow: 0 0 10px rgba(40, 200, 118, .65); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } } /* ===== 2) Salesforce Lightning header ============================= */ .topbar-sf { position: relative; z-index: 5; height: var(--topbar-sf-height); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--bg-1); border-bottom: 1px solid #dddbda; } [data-theme="dark"] .topbar-sf { background: #16213d; border-bottom-color: #1f2a4a; } .topbar-sf__logo { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 4px; text-decoration: none; cursor: default; flex-shrink: 0; } .topbar-sf__logo svg { display: block; } .topbar-sf__search { flex: 1; max-width: 760px; margin: 0 auto; position: relative; display: flex; align-items: center; } .topbar-sf__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #706e6b; pointer-events: none; } [data-theme="dark"] .topbar-sf__search-icon { color: #a8b1d2; } .topbar-sf__search-input { width: 100%; height: 32px; border: 1px solid #dddbda; border-radius: 999px; background: #fff; padding: 0 16px 0 36px; color: #181818; font: 400 13px/1 var(--font-ui); letter-spacing: 0.005em; transition: border-color .15s ease, box-shadow .15s ease; } .topbar-sf__search-input::placeholder { color: #706e6b; } .topbar-sf__search-input:focus { outline: none; border-color: #1589ee; box-shadow: 0 0 0 3px rgba(21, 137, 238, 0.18); } [data-theme="dark"] .topbar-sf__search-input { background: #1c2547; border-color: #2a3358; color: #e6e9f4; } [data-theme="dark"] .topbar-sf__search-input::placeholder { color: #8b94b3; } [data-theme="dark"] .topbar-sf__search-input:focus { border-color: #6b8aff; box-shadow: 0 0 0 3px rgba(107, 138, 255, 0.22); } .topbar-sf__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .topbar-sf__iconbtn, .topbar-sf__avatar { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 6px; border: 0; background: transparent; color: #54698d; /* Lightning slate icon color */ cursor: default; /* decorative for the demo */ border-radius: 219px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .topbar-sf__iconbtn:hover, .topbar-sf__avatar:hover { background: rgba(21, 137, 238, 0.08); color: #1589ee; } [data-theme="dark"] .topbar-sf__iconbtn, [data-theme="dark"] .topbar-sf__avatar { color: #a8b1d2; } [data-theme="dark"] .topbar-sf__iconbtn:hover, [data-theme="dark"] .topbar-sf__avatar:hover { background: rgba(107, 138, 255, 0.16); color: #c8d3ff; } /* Plus button styled as the small filled blue circle from Lightning. Sized to sit comfortably in a 32px row with a 16px glyph inside. */ .topbar-sf__iconbtn--accent { background: rgba(85, 104, 136, 1); color: #fff; width: 26px; min-width: 26px; height: 26px; border-radius: 50%; padding: 0; margin: 0 4px; } .topbar-sf__iconbtn--accent:hover { background: #0070d2; color: #fff; } .topbar-sf__iconbtn--accent svg { width: 16px; height: 16px; } /* Favorites + caret share a single bordered pill, mirroring Lightning's "Add Favorite + Edit Favorites" split button. */ .topbar-sf__iconbtn--combo { gap: 6px; padding: 0 8px; border: 1px solid #dddbda; border-radius: 219px; height: 28px; } .topbar-sf__iconbtn--combo:hover { border-color: #c9c7c5; background: rgba(21, 137, 238, 0.06); } [data-theme="dark"] .topbar-sf__iconbtn--combo { border-color: #2a3358; } [data-theme="dark"] .topbar-sf__iconbtn--combo:hover { border-color: #3a4470; } .topbar-sf__combo-divider { width: 1px; height: 16px; background: #dddbda; flex-shrink: 0; } [data-theme="dark"] .topbar-sf__combo-divider { background: #2a3358; } .topbar-sf__caret { color: inherit; opacity: 0.85; } /* Profile avatar — circular photo at SLDS standard 32px. */ .topbar-sf__avatar { width: 32px; min-width: 32px; height: 32px; border-radius: 50%; background: #54698d; color: #fff; margin-left: 6px; overflow: hidden; padding: 0; } .topbar-sf__avatar:hover { background: #16325c; color: #fff; } [data-theme="dark"] .topbar-sf__avatar { background: #4a557a; } [data-theme="dark"] .topbar-sf__avatar:hover { background: #6b8aff; } .topbar-sf__avatar svg { transform: translateY(2px); } /* When the avatar uses a photo asset (not the silhouette), drop the slate background and translate so the picture fills the circle cleanly. */ .topbar-sf__avatar--photo { background: transparent; } .topbar-sf__avatar--photo:hover, [data-theme="dark"] .topbar-sf__avatar--photo, [data-theme="dark"] .topbar-sf__avatar--photo:hover { background: transparent; } .topbar-sf__avatar-img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; pointer-events: none; } .topbar-sf__avatar--photo:hover .topbar-sf__avatar-img { filter: brightness(0.95); } /* ---------- Workspace layout ---------- ALWAYS two grid tracks: the right track is 0px wide when no panel, 540px when split. Keeping the track count fixed lets `grid-template-columns` interpolate smoothly (you can't smoothly animate between 1-track and 2-track templates). */ .workspace { position: relative; z-index: 2; height: calc(100vh - var(--topbar-total)); display: grid; grid-template-columns: 1fr 0px; transition: grid-template-columns .55s cubic-bezier(.2, .85, .25, 1); } /* Open state: side panel takes 60% of the workspace width, chat gets the remaining 40%. Using `60%` (a length-percentage) on the second track preserves the smooth `0px → 60%` interpolation when the panel slides in/out. */ .workspace.workspace--split { grid-template-columns: 1fr 60%; } /* Fullscreen mode: the side panel takes over the whole workspace. The chat column shrinks to 0 — overflow:hidden on .stage keeps it tidy while it gets out of the way. Always paired with .workspace--split. */ .workspace.workspace--split.workspace--panel-fullscreen { grid-template-columns: 0px 1fr; } .workspace--panel-fullscreen .stage { pointer-events: none; } /* When the side panel is NOT open, let the chat use the full canvas. Content max-widths grow and side padding shrinks so the hero, thread, whisper, and dock breathe across the screen instead of sitting in a narrow centered column with big empty margins on either side. */ .workspace:not(.workspace--split) .stage__main { padding: 36px 5% 24px; } .workspace:not(.workspace--split) .dock { padding: 0 5% 22px; } .workspace:not(.workspace--split) .hero { max-width: 1100px; } .workspace:not(.workspace--split) .thread { max-width: 800px; } .workspace:not(.workspace--split) .dock .whisper { max-width: 800px; } /* Smooth the chat content's grow/shrink as the panel opens/closes */ .stage__main, .dock { transition: padding .6s cubic-bezier(.2,.7,.2,1); } .thread { transition: max-width .6s cubic-bezier(.2,.7,.2,1); } /* ---------- Stage (chat side) ---------- */ .stage { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .stage__main { flex: 1 1 auto; overflow-y: auto; padding: 36px 8% 24px; scroll-behavior: smooth; overflow-anchor: auto; display: flex; flex-direction: column; /* Vertical center of children (welcome hero); :has() rule below flips this once the demo starts so chat anchors to the bottom. */ justify-content: center; /* Horizontal center of children — defensive against asymmetric scrollbar gutter rendering across browsers. */ align-items: center; /* Reserve scrollbar space symmetrically so the centered content doesn't shift left when overflow appears. */ scrollbar-gutter: stable both-edges; } .stage__main::-webkit-scrollbar { width: 10px; } .stage__main::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; } /* After the demo starts, the hero has the .hero--collapsed class. Drop justify-content so the thread's auto-margin (margin: auto auto 0) pushes it back down to the dock-flush position. */ .stage__main:has(.hero--collapsed) { justify-content: flex-start; } .dock { flex: 0 0 auto; padding: 0 8% 22px; position: relative; } /* Hero ----------------------------------------- */ .hero { width: 100%; max-width: 880px; margin: 0 auto; text-align: center; padding-top: 24px; transition: opacity .5s ease, transform .5s ease, max-width .6s cubic-bezier(.2,.7,.2,1); } .hero.hero--collapsed { opacity: 0; transform: translateY(-12px) scale(.98); pointer-events: none; height: 0; overflow: hidden; padding: 0; margin: 0; } .hero__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -.02em; margin: 14px 0 6px; color: var(--ink); } .hero__sub { color: var(--ink-dim); font-size: 15px; max-width: 560px; margin: 0 auto 28px; } .grad { background: var(--grad-jarvis); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hl-shimmer 6s ease-in-out infinite; } @keyframes hl-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Orb */ .orb { position: relative; width: 180px; height: 150px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; } .orb__aura { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(106, 77, 255, .35), transparent 70%), radial-gradient(closest-side at 30% 40%, rgba(247, 147, 207, .35), transparent 65%), radial-gradient(closest-side at 70% 60%, rgba(47, 92, 255, .30), transparent 65%); filter: blur(22px); animation: aura-breathe 4.5s ease-in-out infinite; z-index: 0; } .orb__mark { position: relative; z-index: 2; width: 116px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(106, 77, 255, .25)) drop-shadow(0 0 32px rgba(247, 147, 207, .25)); animation: jarvis-float 6s ease-in-out infinite; transform-origin: center 80%; } @keyframes aura-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.18); opacity: 1; } } @keyframes jarvis-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate( 2deg); } } /* Whisper bar — Gemini-style two-row composer. Top row: free-form question/response input. Bottom row: left-anchored utility actions (attach, tools) and right-anchored response actions (audio levels, mic, send). The card sits inside a soft lavender→blue gradient ring drawn via ::before so the ring stays crisp at any radius. */ .whisper { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 800px; margin: 0 auto; padding: 14px 14px 10px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1); position: relative; transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease, border-color .3s ease, max-width .6s cubic-bezier(.2,.7,.2,1), background .25s ease; will-change: transform; } .whisper:focus-within { border-color: var(--accent-2); box-shadow: 0 14px 40px rgba(111, 95, 255, .14); } /* Soft lavender → blue gradient ring (a halo, not a border). We outset by 4px and mask out the inner card so only the ring shows. */ .whisper::before { content: ""; position: absolute; inset: -4px; border-radius: 26px; padding: 4px; background: var(--whisper-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .85; filter: blur(0.4px); } /* On the welcome hero, keep the whisper compact (600px). Once the demo starts and the whisper FLIPs into the dock, it returns to the default dock widths (720px split / 880px full) and the existing `max-width` transition animates the grow smoothly. */ .hero .whisper { margin-top: 28px; max-width: 600px; } /* Whisper inside the dock — opaque panel surface */ .dock .whisper { background: var(--bg-1); border-color: var(--line); box-shadow: 0 12px 30px rgba(54, 67, 142, .08); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); } /* Rows */ .whisper__row { display: flex; align-items: center; } .whisper__row--input { min-height: 28px; padding: 4px 6px 0; } .whisper__row--actions { justify-content: space-between; gap: 8px; } .whisper__actions { display: flex; align-items: center; gap: 2px; } .whisper__input { flex: 1; background: transparent; border: 0; outline: none; color: var(--ink); font-size: 15px; font-family: inherit; padding: 0; } .whisper__input::placeholder { color: var(--ink-mute); } /* Bare-icon utility buttons (attach, tools, audio levels, mic). No border, no fill — just a hover wash for affordance. */ .whisper__icon { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease, color .2s ease, background .2s ease; } .whisper__icon:hover { color: var(--accent-1); background: var(--bg-soft); transform: scale(1.06); } .whisper__icon:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* Send — small filled blue paper-plane on the right edge of the actions row. Keeps the same accent + shadow vocabulary. */ .whisper__send { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--accent-1); display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; transition: transform .15s ease, color .2s ease, background .2s ease; } .whisper__send:hover { transform: scale(1.08); background: var(--bg-soft); } .whisper__send:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; } /* CTA — Install IT Services */ .cta-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; } .cta-install { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border-radius: 999px; border: 0; cursor: pointer; background: var(--accent-1); color: white; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 10px 28px rgba(47, 92, 255, .32), 0 0 0 1px rgba(255, 255, 255, .12) inset; transition: transform .18s ease, box-shadow .25s ease, filter .2s ease; animation: cta-breath 3.6s ease-in-out infinite; } .cta-install:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 36px rgba(47, 92, 255, .42), 0 0 0 1px rgba(255, 255, 255, .15) inset; filter: brightness(1.06); } .cta-install:active { transform: translateY(0) scale(.99); } .cta-helper { font-size: 12px; color: var(--ink-mute); letter-spacing: .02em; } @keyframes cta-breath { 0%, 100% { box-shadow: 0 10px 28px rgba(47, 92, 255, .32), 0 0 0 1px rgba(255,255,255,.12) inset; } 50% { box-shadow: 0 14px 36px rgba(106, 77, 255, .42), 0 0 0 1px rgba(255,255,255,.18) inset; } } /* ---------- Thread ---------- */ .thread { max-width: 800px; width: 100%; margin: auto auto 0; display: flex; flex-direction: column; gap: 14px; } .bubble { display: flex; gap: 12px; align-items: flex-start; animation: rise-up .42s cubic-bezier(.2,.7,.2,1) both; } @keyframes rise-up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } } .bubble__avatar { width: 26px; height: 26px; flex: 0 0 26px; /* Nudge the small mark down so its visual center sits on the first text line of `.bubble__body` (which has 4px top padding + 14px font * 1.55 line-height — optical center is ~15px from bubble top). 2px gives a clean middle alignment with "Starting setup…". */ margin-top: 2px; position: relative; background-image: url("assets/jarvis-mark.png"); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 2px 6px rgba(162, 75, 255, .22)); } /* Jarvis (default) bubbles render ChatGPT/Gemini-style: just text on the page background, no card, no border, no shadow. The avatar (logo) stays as the persona indicator. The "JARVIS" name label is hidden everywhere — the entire conversation is with Jarvis, so the label is redundant. The Admin (user) bubble is the only one that keeps the classic card look so it's easy to scan whose message is whose. */ .bubble__body { background: transparent; border: 0; border-radius: 0; padding: 4px 0 0; max-width: 100%; box-shadow: none; position: relative; color: var(--ink); transition: background .25s ease, border-color .25s ease; } .bubble__name { display: none; } .bubble__text { line-height: 1.55; font-size: 14px; color: var(--ink); } /* Admin bubbles keep the card treatment */ .bubble--user { flex-direction: row-reverse; } .bubble--user .bubble__avatar { display: none; } .bubble--user .bubble__body { background: #ffffff; border: 1px solid rgba(47, 92, 255, .22); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-1); color: var(--ink); } [data-theme="dark"] .bubble--user .bubble__body { border-color: rgba(107, 138, 255, .35); } /* Consecutive same-persona bubbles - Hide the avatar on the continuation so the column reads as one group. - Tighten the gap. For Jarvis (no card), keep a light rhythm; for the Admin card, pull harder so the cards visually fuse. */ .bubble--continued .bubble__avatar { visibility: hidden; } .thread .bubble--user.bubble--continued { margin-top: -10px; } .thread .bubble:not(.bubble--user).bubble--continued { margin-top: -2px; } .bubble--user.bubble--continued .bubble__body { border-top-left-radius: 6px; border-top-right-radius: 6px; } .bubble--user:has(+ .bubble--user.bubble--continued) .bubble__body { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } /* Typing indicator */ .typing { display: inline-flex; align-items: center; gap: 6px; } .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); display: inline-block; animation: typing 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .15s; background: var(--accent-2); } .typing span:nth-child(3) { animation-delay: .3s; background: var(--accent-3); } @keyframes typing { 0%, 80%, 100% { transform: translateY(0); opacity: .5 } 40% { transform: translateY(-4px); opacity: 1 } } /* Status line */ .status-line { display: flex; align-items: center; gap: 12px; } .status-line__icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(47, 92, 255, .10); color: var(--accent-1); flex: 0 0 22px; } .status-line__icon.is-ok { background: rgba(40, 200, 118, .12); color: var(--accent-ok); } .status-line__icon.is-busy { background: rgba(255, 154, 61, .12); color: var(--accent-warn); } .status-line__icon svg { width: 12px; height: 12px; } .spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(47, 92, 255, .2); border-top-color: var(--accent-1); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg) } } .progress { height: 4px; border-radius: 4px; flex: 1; background: var(--progress-track); overflow: hidden; position: relative; } .progress__bar { position: absolute; inset: 0 100% 0 0; background: var(--grad-jarvis); transition: inset .6s ease; } /* Action buttons (CTAs inside bubbles) */ .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .action { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 8px rgba(54, 67, 142, .06); transition: transform .15s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; } .action:hover { transform: translateY(-1px); border-color: var(--accent-1); color: var(--accent-1); background: var(--bg-soft); } .action--primary { background: var(--accent-1); color: white; border-color: transparent; box-shadow: 0 8px 22px rgba(47, 92, 255, .32); } .action--primary:hover { background: var(--accent-1); color: white; box-shadow: 0 12px 30px rgba(47, 92, 255, .45); filter: brightness(1.06); } .action--danger { background: rgba(255, 95, 95, .08); border-color: rgba(255, 95, 95, .35); color: #d34646; } .action[disabled] { opacity: .45; pointer-events: none; } .action__glyph { font-size: 14px; } /* Rich cards */ .card { margin-top: 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-1); overflow: hidden; } .card__header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: none; font-size: 12px; color: var(--ink-mute); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .card__header .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 10px rgba(47, 92, 255, .55); } .card__body { padding: 14px; } /* Choice cards (Splunk / Datadog) — horizontal layout: logo on the left, name + sub stacked together on the right. CSS Grid handles the 2x2 arrangement (logo spans both rows, name/sub stack in col 2) without needing a wrapper element in the JS-generated markup. */ .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .choice { cursor: pointer; padding: 12px 14px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .25s ease; text-align: left; color: inherit; font-family: inherit; } .choice:hover { transform: translateY(-2px); border-color: var(--accent-1); box-shadow: 0 12px 28px rgba(47, 92, 255, .12); } .choice__logo { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: white; overflow: hidden; flex: 0 0 36px; } .choice__logo--img { background: transparent; padding: 0; } .choice__logo--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; } .choice__name { grid-column: 2; grid-row: 1; align-self: end; font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25; } .choice__sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; color: var(--ink-dim); line-height: 1.3; } .choice[disabled] { opacity: .5; pointer-events: none; } .choice.is-selected { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1), 0 12px 32px rgba(47, 92, 255, .18); } /* Link card */ .linkcard { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--linkcard-grad); border: 1px solid rgba(47, 92, 255, .25); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .25s ease; font-family: inherit; color: inherit; text-align: left; width: 100%; } [data-theme="dark"] .linkcard { border-color: rgba(107, 138, 255, .35); } .linkcard:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(47, 92, 255, .18); } .linkcard__icon { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px; background: var(--grad-jarvis); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 14px rgba(106, 77, 255, .25); } .linkcard__title { font-weight: 700; color: var(--ink); } .linkcard__sub { font-size: 12px; color: var(--ink-dim); } .linkcard__cta { margin-left: auto; color: var(--accent-1); font-size: 13px; font-weight: 600; } /* Composer (kept for layout; restart removed) */ .composer { position: sticky; bottom: 0; padding-top: 18px; display: flex; justify-content: center; } /* ---------- Side panel / fake browser ---------- Panel itself is transparent (the page gradient continues underneath) AND clips overflow — so its inner .browser can sit absolutely-positioned and slide cleanly in/out via translateX without ever pushing layout on the chat side. */ .sidepanel { position: relative; background: transparent; border-left: 0; overflow: visible; min-width: 0; /* allow the 60% → 0px column shrink */ } .browser { /* Fluid width — pinned to both edges of the side panel column so the panel expands naturally when the column grows (e.g., fullscreen mode). translateX still hides it off-screen when the column is collapsed. */ position: absolute; top: 14px; right: 14px; bottom: 14px; left: 14px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-2); transform: translateX(calc(100% + 28px)); /* default = off-screen right */ transition: transform .55s cubic-bezier(.2, .85, .25, 1), border-radius .35s ease; will-change: transform; } .workspace--split .browser { transform: translateX(0); } /* In fullscreen, drop the rounded panel chrome a notch so it reads as a full app surface rather than a card. */ .workspace--panel-fullscreen .browser { border-radius: 10px; } /* ----- Title bar (replaces the old URL chrome) ----- */ .browser__chrome { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; background: var(--bg-chrome); border-bottom: 1px solid var(--line); min-height: 44px; } .browser__title { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; /* let the text ellipsis */ color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } .browser__title-icon { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ok); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-ok) 60%, transparent); flex-shrink: 0; } .browser__title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser__iconbtn { background: transparent; border: 0; cursor: pointer; color: var(--ink-mute); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; transition: background .15s ease, color .15s ease; flex-shrink: 0; } .browser__iconbtn:hover { color: var(--ink); background: var(--bg-soft); } .browser__iconbtn:active { transform: scale(0.96); } .browser__iconbtn:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-1) 60%, transparent); outline-offset: 1px; } /* Toggle which icon shows based on the fullscreen state on the workspace. */ .browser__icon--collapse { display: none; } .workspace--panel-fullscreen .browser__icon--expand { display: none; } .workspace--panel-fullscreen .browser__icon--collapse { display: block; } .browser__viewport { flex: 1; overflow: auto; background: var(--bg-1); position: relative; } /* ----- Browser pages ----- */ .page { padding: 22px; min-height: 100%; color: var(--ink); } /* Splunk auth page */ .auth-page { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 28px; gap: 14px; background: radial-gradient(600px 300px at 50% 0%, rgba(245, 124, 0, .10), transparent 60%), var(--bg-1); min-height: 100%; color: var(--ink); } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .auth-brand__logo { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #f57c00, #ff5a00); display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 18px; box-shadow: 0 0 24px rgba(255,90,0,.4); overflow: hidden; } .auth-brand__logo--img { background: transparent; padding: 0; } .auth-brand__logo--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; } .auth-brand__name { font-size: 18px; font-weight: 700; color: var(--ink); } .auth-brand__sub { font-size: 12px; color: var(--ink-dim); } .auth-card { width: 100%; max-width: 360px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 22px; text-align: left; box-shadow: var(--shadow-1); } .auth-card h3 { margin: 0 0 4px; font-size: 18px; color: var(--ink); } .auth-card p { margin: 0 0 16px; color: var(--ink-dim); font-size: 13px; } .field { margin-bottom: 12px; } .field label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; font-weight: 500; } .field input { width: 100%; padding: 10px 12px; border-radius: 8px; background: var(--bg-1); color: var(--ink); border: 1px solid var(--line-strong); font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .25s ease; } .field input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--focus-ring); } .btn-primary { width: 100%; padding: 12px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #f57c00, #ff5a00); color: white; font-weight: 600; font-family: inherit; cursor: pointer; font-size: 14px; box-shadow: 0 8px 24px rgba(255,90,0,.35); transition: transform .15s ease, filter .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .btn-primary:hover { transform: translateY(-1px); } .btn-primary.is-loading { cursor: progress; filter: brightness(.92); transform: none; } .btn-primary[disabled] { opacity: 1; } .btn-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #ffffff; animation: spin .9s linear infinite; flex: 0 0 16px; } .auth-footer { font-size: 11px; color: var(--ink-mute); margin-top: 10px; } /* ----- The Cockpit (placeholder) ----- Intentionally minimal. The real cockpit design will replace this block; the placeholder keeps the panel feeling intentional (not broken/empty) until that ships. */ .cockpit-placeholder { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 32px; background: radial-gradient(circle at 30% 20%, rgba(106, 77, 255, .08), transparent 60%), radial-gradient(circle at 70% 80%, rgba(47, 92, 255, .06), transparent 55%), var(--bg-1); } .cockpit-placeholder__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .cockpit-placeholder__badge { font-size: 13px; font-weight: 600; letter-spacing: .6px; color: var(--ink-dim); padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px dashed var(--line-strong); } .cockpit-placeholder__hint { font-size: 12px; color: var(--ink-mute); } /* Dashboard preview */ .dash { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; padding: 20px; } .dash h2 { grid-column: 1 / -1; margin: 0; font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 10px; } .dash h2 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ok); box-shadow: 0 0 12px rgba(40, 200, 118, .55); } .tile { padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: background .25s ease, border-color .25s ease; } .tile--wide { grid-column: 1 / -1; } .tile__label { font-size: 11px; color: var(--ink-mute); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; } .tile__value { font-size: 28px; font-weight: 700; margin-top: 4px; color: var(--ink); } .tile__delta { font-size: 12px; color: var(--accent-ok); margin-top: 4px; font-weight: 500; } .bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 80px; margin-top: 10px; } .bar span { display: block; background: var(--grad-jarvis); border-radius: 3px 3px 0 0; opacity: .85; } /* Progress bar inside a KPI tile */ .tile__progress { margin-top: 10px; height: 6px; border-radius: 4px; background: var(--progress-track); overflow: hidden; } .tile__progress__bar { height: 100%; width: 0%; background: var(--grad-jarvis); border-radius: 4px; box-shadow: 0 0 14px rgba(106, 77, 255, .25); } /* CI grid */ .tile--ci { padding: 14px 14px 8px; } .ci-grid { margin-top: 10px; display: flex; flex-direction: column; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .ci-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); } .ci-row:last-child { border-bottom: 0; } .ci-row--head { background: var(--bg-chrome); font-size: 11px; color: var(--ink-dim); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .ci-row:not(.ci-row--head):hover { background: var(--bg-2); } .ci-cell { display: flex; align-items: center; min-width: 0; color: var(--ink); } .ci-cell--sn { font-family: var(--font-mono); font-size: 12px; color: var(--ink); } .ci-health { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; } .ci-health__dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .ci-health--ok { color: #1d8a52; background: rgba(40,200,118,.10); border-color: rgba(40,200,118,.32); } .ci-health--ok .ci-health__dot { background: var(--accent-ok); box-shadow: 0 0 8px rgba(40,200,118,.5); } .ci-health--warn { color: #b86a14; background: rgba(255,154,61,.10); border-color: rgba(255,154,61,.34); } .ci-health--warn .ci-health__dot { background: var(--accent-warn); box-shadow: 0 0 8px rgba(255,154,61,.5); } .ci-health--crit { color: #c93838; background: rgba(255,95,95,.10); border-color: rgba(255,95,95,.36); } .ci-health--crit .ci-health__dot { background: #ff5f5f; box-shadow: 0 0 8px rgba(255,95,95,.5); } /* Brighter pill text in dark mode for legibility on the dark surface */ [data-theme="dark"] .ci-health--ok { color: #6ee0a3; background: rgba(40,200,118,.16); } [data-theme="dark"] .ci-health--warn { color: #ffc07a; background: rgba(255,154,61,.16); } [data-theme="dark"] .ci-health--crit { color: #ff8a8a; background: rgba(255,95,95,.16); } /* ---------- Responsive ---------- Below 980px the panel becomes a bottom sheet. Same trick as desktop — keep TWO row tracks always so the transition is smooth, and slide the browser card in/out vertically via translateY. */ @media (max-width: 980px) { .stage { padding: 24px 5% 0; } .workspace, .workspace.workspace--split { grid-template-columns: 1fr; transition: grid-template-rows .55s cubic-bezier(.2, .85, .25, 1); } .workspace { grid-template-rows: 1fr 0px; } .workspace--split { grid-template-rows: 1fr 50vh; } /* Fullscreen on mobile = panel takes the whole workspace height. */ .workspace--split.workspace--panel-fullscreen { grid-template-rows: 0px 1fr; } .sidepanel { border-left: 0; border-top: 1px solid var(--line); } .browser { top: auto; left: 14px; right: 14px; bottom: 14px; width: auto; transform: translateY(calc(100% + 28px)); transition: transform .55s cubic-bezier(.2, .85, .25, 1); } .workspace--split .browser { transform: translateY(0); } } /* ============================================================= Persona accent tokens — each chapter "owns" a hue. The pill in the topbar, the user-bubble avatar, the slider rail, and the lobby card edge all reach for these. They live in :root (light) and are overridden in [data-theme="dark"] for WCAG-AA contrast on the deep navy surfaces. ============================================================= */ :root { --persona-cto: #6b4dff; /* deep violet — boardroom */ --persona-admin: #2f5cff; /* primary blue — setup */ --persona-employee: #4a154b; /* slack-aubergine — Slack-first chapter */ --persona-manager: #14b8a6; /* teal — proactive ops */ --persona-exec: #c08a2e; /* warm gold — wall board */ --chapter-accent: var(--accent-1); /* set by JS on chapter start */ } [data-theme="dark"] { --persona-cto: #a39bff; --persona-admin: #6b8aff; --persona-employee: #d8a7d3; --persona-manager: #5eead4; --persona-exec: #f0c97c; } /* ============================================================= Meta-bar: Lobby button + persona pill (restyled for dark bg) ============================================================= */ .btn-back-lobby { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); color: #e6e9f4; font: 600 11.5px/1 var(--font-ui); letter-spacing: .01em; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .btn-back-lobby:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #fff; transform: translateX(-1px); } .btn-back-lobby:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(110, 224, 163, 0.45); } .chapter-pill { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 11.5px; color: #cdd3eb; max-width: 360px; letter-spacing: 0.005em; } .chapter-pill__avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--persona-accent, var(--chapter-accent)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--font-ui); letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0, 0, 0, .22) inset; } .chapter-pill__role { font-weight: 700; color: #f0f3ff; } .chapter-pill__sep { color: rgba(205, 211, 235, 0.45); } .chapter-pill__title { color: #cdd3eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================= Lobby — the persona switcher home ============================================================= */ .lobby { position: relative; z-index: 2; height: calc(100vh - var(--topbar-total)); overflow-y: auto; scrollbar-gutter: stable both-edges; } .lobby::-webkit-scrollbar { width: 10px; } .lobby::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; } .lobby__inner { max-width: 1180px; margin: 0 auto; padding: 32px 6% 56px; display: flex; flex-direction: column; gap: 28px; } .lobby__hero { text-align: center; display: flex; flex-direction: column; align-items: center; } .lobby__title { margin: 14px 0 10px; font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .lobby__sub { color: var(--ink-dim); font-size: 15px; max-width: 640px; margin: 0 auto 22px; line-height: 1.55; } .lobby__quickrow { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; } .lobby__quickrow .cta-install { /* Slightly de-emphasize the Play-All to keep the card grid as the hero */ background: var(--bg-1); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); animation: none; } .lobby__quickrow .cta-install svg { color: var(--accent-1); } .lobby__quickrow .cta-install:hover { border-color: var(--accent-1); box-shadow: 0 16px 38px rgba(47, 92, 255, .18); } /* Persona grid */ .persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 6px; } .persona-card { position: relative; text-align: left; padding: 18px 18px 16px; border-radius: var(--radius-lg); background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; font-family: inherit; color: inherit; display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; --persona-accent: var(--accent-1); } .persona-card::before { /* Soft accent halo that bleeds in on hover */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px 200px at 100% 0%, color-mix(in srgb, var(--persona-accent) 18%, transparent) 0%, transparent 70%); opacity: 0; transition: opacity .3s ease; } .persona-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--persona-accent) 60%, var(--line)); box-shadow: 0 22px 48px color-mix(in srgb, var(--persona-accent) 18%, transparent), 0 1px 0 rgba(255, 255, 255, .6) inset; } .persona-card:hover::before { opacity: 1; } .persona-card:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--persona-accent) 25%, transparent); } .persona-card__head { display: flex; align-items: center; gap: 10px; } .persona-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--persona-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--font-ui); letter-spacing: .02em; box-shadow: 0 6px 14px color-mix(in srgb, var(--persona-accent) 35%, transparent), 0 1px 0 rgba(255, 255, 255, .25) inset; } .persona-card__chapter { margin-left: auto; font: 600 11px/1 var(--font-mono); letter-spacing: 1.4px; color: var(--ink-mute); text-transform: uppercase; } .persona-card__watched { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(40, 200, 118, .16); color: var(--accent-ok); margin-left: 6px; } .persona-card__role { font-size: 12px; color: var(--ink-mute); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .persona-card__title { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; } .persona-card__blurb { font-size: 13px; color: var(--ink-dim); line-height: 1.55; margin: 0; flex: 1; } .persona-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--persona-accent); margin-top: 4px; } .persona-card.is-watched { background: linear-gradient(180deg, var(--bg-1), color-mix(in srgb, var(--accent-ok) 6%, var(--bg-1))); } /* Inline lobby chat — collapsed empty state, grows on first answer */ .lobby__chat { margin-top: 6px; border-radius: var(--radius-lg); border: 1px dashed var(--line); background: color-mix(in srgb, var(--bg-1) 60%, transparent); padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; transition: max-height .4s ease, padding .4s ease, opacity .3s ease, border-style .3s ease; } .lobby__chat[data-empty="true"] { max-height: 56px; padding: 14px 18px; opacity: .85; } .lobby__chat[data-empty="false"] { border-style: solid; background: var(--bg-1); box-shadow: var(--shadow-1); } .lobby__chat-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-mute); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .lobby__chat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 10px rgba(47, 92, 255, .55); } .thread--lobby { gap: 12px; max-width: none; } /* Lobby whisper position — inline within the lobby column */ .lobby__whisper { display: flex; justify-content: center; margin-top: 4px; } .lobby__whisper .whisper { max-width: 720px; width: 100%; } /* ============================================================= Suggestion chips — above the whisper, swap per chapter ============================================================= */ .suggest-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; } .suggest-chips:empty { display: none; } .suggest-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--bg-1); border: 1px solid var(--line); color: var(--ink-dim); font: 500 12.5px/1 var(--font-ui); cursor: pointer; transition: transform .15s ease, color .2s ease, border-color .2s ease, background .2s ease; } .suggest-chip:hover { color: var(--accent-1); border-color: var(--accent-1); background: var(--bg-soft); transform: translateY(-1px); } .suggest-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .suggest-chips--inline { margin-top: 10px; margin-bottom: 0; justify-content: flex-start; } /* Inside the dock — chips sit above the whisper bar. Single horizontal row that scrolls when chips overflow the viewport (never wraps to a second row). Soft edge masks hint at more content when there's overflow; native scrollbar is hidden for a clean UX. */ .dock .suggest-chips { margin-bottom: 12px; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy IE/Edge */ padding: 4px 4px 6px; /* breathing room so focus rings aren't clipped */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); } .dock .suggest-chips::-webkit-scrollbar { display: none; } .dock .suggest-chip { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; } /* User bubbles render as a single right-aligned card — no avatar, no name label. The active persona is already established by the topbar pill + chapter avatar for the entire chapter run, so any per-bubble identity chrome would just be redundant noise. The legacy `.bubble__name { display: none }` rule from earlier in the file still hides any stray name nodes, so this is mostly a sanity comment for future readers. */ /* ============================================================= Inline metric-board step type ============================================================= */ .metric-board { margin-top: 8px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-1); padding: 14px; box-shadow: var(--shadow-1); } .metric-board__title { font-size: 12px; color: var(--ink-mute); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; } .metric-board__grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .metric-tile { padding: 12px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--line); } .metric-tile__label { font-size: 11px; color: var(--ink-mute); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; } .metric-tile__value { margin-top: 4px; font: 700 24px/1.1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .metric-tile__delta { margin-top: 4px; font: 600 12px/1 var(--font-ui); color: var(--accent-ok); } .metric-tile__hint { margin-top: 4px; font: 400 11px/1.4 var(--font-ui); color: var(--ink-dim); } /* ============================================================= Inline slack-thread step type — compact Slack-style block inside a Jarvis bubble ============================================================= */ .slack-block { margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1); overflow: hidden; box-shadow: var(--shadow-1); font-family: inherit; } .slack-block__chrome { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-chrome); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); } .slack-block__hash { color: var(--ink-mute); font-weight: 700; } .slack-block__channel { color: var(--ink); font-weight: 700; } .slack-block__sep { color: var(--ink-mute); } .slack-block__meta { color: var(--ink-mute); } .slack-block__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .slack-msg { display: flex; gap: 10px; align-items: flex-start; } .slack-msg__avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--persona-accent, var(--accent-1)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-ui); flex: 0 0 32px; } .slack-msg__body { flex: 1; min-width: 0; } .slack-msg__head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; } .slack-msg__from { font: 700 13px/1.2 var(--font-ui); color: var(--ink); } .slack-msg__bot { font: 700 9px/1 var(--font-ui); letter-spacing: .08em; padding: 2px 5px; border-radius: 3px; background: rgba(74, 21, 75, .12); color: #4a154b; } [data-theme="dark"] .slack-msg__bot { color: #d8a7d3; background: rgba(216, 167, 211, .14); } .slack-msg__time { font-size: 11px; color: var(--ink-mute); } .slack-msg__text { font-size: 13px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; } .slack-msg__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .slack-action { font: 600 12px/1 var(--font-ui); padding: 7px 12px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim); } .slack-action--primary { background: #007a5a; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(0, 122, 90, .25); } /* ============================================================= End-of-chapter card ============================================================= */ .endcard { margin-top: 10px; border-radius: var(--radius-lg); background: var(--linkcard-grad); border: 1px solid color-mix(in srgb, var(--persona-accent, var(--accent-1)) 30%, var(--line)); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 18px 40px color-mix(in srgb, var(--persona-accent, var(--accent-1)) 14%, transparent); } .endcard__title { font-size: 14px; color: var(--ink-dim); } .endcard__title strong { color: var(--ink); font-weight: 700; } .endcard__sub { font-size: 13px; color: var(--ink-dim); margin-bottom: 4px; } .endcard__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .endcard__actions .action--primary { background: var(--persona-accent, var(--accent-1)); border-color: transparent; box-shadow: 0 10px 26px color-mix(in srgb, var(--persona-accent, var(--accent-1)) 35%, transparent); } /* ============================================================= Source disclosure (Q&A grounding) — Rule C3 explainability ============================================================= */ .source { margin-top: 8px; font-size: 12px; color: var(--ink-dim); } .source > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-mute); font-weight: 600; transition: color .2s ease, border-color .2s ease, background .2s ease; } .source > summary::-webkit-details-marker { display: none; } .source > summary svg { transition: transform .2s ease; } .source[open] > summary svg { transform: rotate(90deg); } .source > summary:hover { color: var(--accent-1); border-color: var(--accent-1); background: var(--bg-soft); } .source__body { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim); line-height: 1.55; } /* ============================================================= Side-panel "browser" pages — chapter-specific ============================================================= */ /* ---------- Constellation (CTO chapter) ---------- */ .constellation { position: relative; min-height: 100%; padding: 22px; background: radial-gradient(800px 400px at 50% 0%, color-mix(in srgb, var(--persona-cto) 14%, transparent), transparent 60%), var(--bg-1); color: var(--ink); display: flex; flex-direction: column; gap: 16px; overflow: hidden; } .constellation__head { display: flex; align-items: center; gap: 10px; } .constellation__head h3 { margin: 0; font-size: 16px; color: var(--ink); } .constellation__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--persona-cto); box-shadow: 0 0 10px color-mix(in srgb, var(--persona-cto) 70%, transparent); } .constellation__map { position: relative; width: 100%; height: 280px; border-radius: 16px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--persona-cto) 22%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--bg-base) 70%, var(--bg-2)); border: 1px solid var(--line); overflow: hidden; } /* Ambient grid */ .constellation__map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 140, 210, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 140, 210, .08) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; } [data-theme="dark"] .constellation__map::before { background-image: linear-gradient(rgba(170, 190, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 190, 255, .08) 1px, transparent 1px); } /* World map — fills the constellation viewport, dots overlay on top */ .constellation__globe { position: absolute; inset: 14px 18px; color: var(--persona-cto); pointer-events: none; } .constellation__worldmap { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--persona-cto) 22%, transparent)); } .constellation__worldmap-fill path, .constellation__worldmap-fill circle { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1; stroke-linejoin: round; transition: fill 0.6s ease, stroke 0.6s ease, fill-opacity 0.6s ease; } [data-theme="dark"] .constellation__worldmap-fill path, [data-theme="dark"] .constellation__worldmap-fill circle { fill-opacity: 0.22; stroke-opacity: 0.6; } .constellation__worldmap-grid line { stroke: currentColor; stroke-opacity: 0.18; stroke-width: 1; stroke-dasharray: 3 6; } .constellation.is-optimized .constellation__globe { color: var(--persona-manager); } .constellation.is-optimized .constellation__worldmap { filter: drop-shadow(0 0 28px color-mix(in srgb, var(--persona-manager) 25%, transparent)); } /* Pulsing nodes — colored by data-state, animated red→teal on optimize */ .cnode { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-warn); box-shadow: 0 0 0 0 var(--accent-warn); animation: cnode-ping 1.6s ease-out infinite; cursor: pointer; transform: translate(-50%, -50%); transition: background .6s ease, box-shadow .6s ease; } .cnode--ok { background: var(--accent-ok); animation-duration: 2.4s; } .cnode--crit { background: #ff5f5f; animation-duration: 1.1s; } @keyframes cnode-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 18px color-mix(in srgb, currentColor 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); } } .constellation.is-optimized .cnode { background: var(--persona-manager); /* teal */ animation-duration: 3s; } .constellation.is-optimized .cnode--crit { background: var(--persona-manager); } .constellation__legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); } .constellation__legend span { display: inline-flex; align-items: center; gap: 6px; } .constellation__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Causal callout */ .constellation__callout { position: absolute; background: var(--bg-1); border: 1px solid color-mix(in srgb, #ff5f5f 40%, var(--line)); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-2); max-width: 240px; font-size: 12px; color: var(--ink); pointer-events: none; } .constellation__callout strong { color: var(--ink); } .constellation__callout::after { content: ""; position: absolute; left: -8px; top: 14px; width: 0; height: 0; border: 8px solid transparent; border-right-color: var(--bg-1); } .constellation.is-optimized .constellation__callout { display: none; } /* Slider — Legacy ↔ Optimized */ .opt-slider { display: flex; align-items: center; gap: 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; } .opt-slider__label { font: 600 11px/1 var(--font-mono); letter-spacing: 1.4px; color: var(--ink-mute); text-transform: uppercase; flex: 0 0 auto; } .opt-slider__rail { flex: 1; height: 28px; position: relative; border-radius: 999px; background: color-mix(in srgb, var(--accent-warn) 18%, var(--bg-2)); cursor: pointer; overflow: hidden; transition: background .6s ease; } .constellation.is-optimized .opt-slider__rail { background: color-mix(in srgb, var(--persona-manager) 18%, var(--bg-2)); } .opt-slider__thumb { position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: calc(50% - 4px); height: 22px; border-radius: 999px; background: linear-gradient(135deg, #ff5f5f, var(--accent-warn)); display: flex; align-items: center; justify-content: center; color: #fff; font: 700 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(255, 95, 95, .35); transition: left .55s cubic-bezier(.2, .85, .25, 1), background .6s ease, box-shadow .55s ease; } .constellation.is-optimized .opt-slider__thumb { left: calc(50%); background: linear-gradient(135deg, var(--persona-manager), #34d399); box-shadow: 0 6px 16px rgba(20, 184, 166, .35); } .opt-slider__counter { flex: 0 0 auto; font: 700 18px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 110px; text-align: right; } .constellation__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; padding: 14px 18px; border-radius: 14px; border: 0; background: linear-gradient(135deg, var(--persona-cto), #b478ff); color: #fff; font: 700 15px/1 var(--font-ui); cursor: pointer; box-shadow: 0 14px 32px color-mix(in srgb, var(--persona-cto) 35%, transparent); transition: transform .2s ease, filter .2s ease; } .constellation__cta:hover { transform: translateY(-1px); filter: brightness(1.05); } .constellation__cta[disabled] { filter: saturate(.4); cursor: progress; } /* ---------- Wallboard (Executive chapter) ---------- */ .wallboard { min-height: 100%; padding: 22px; background: radial-gradient(700px 360px at 100% 0%, color-mix(in srgb, var(--persona-exec) 14%, transparent), transparent 60%), var(--bg-1); color: var(--ink); display: flex; flex-direction: column; gap: 16px; } .wallboard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wallboard__head h3 { margin: 0; font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 10px; } .wallboard__head h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--persona-exec); box-shadow: 0 0 10px color-mix(in srgb, var(--persona-exec) 70%, transparent); } .wallboard__time { font: 600 11px/1 var(--font-mono); letter-spacing: 1.2px; color: var(--ink-mute); text-transform: uppercase; } .wallboard__grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .wb-tile { position: relative; padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .wb-tile--span2 { grid-column: span 2; } .wb-tile__label { font: 600 10.5px/1 var(--font-ui); letter-spacing: 1.4px; color: var(--ink-mute); text-transform: uppercase; } .wb-tile__value { margin-top: 6px; font: 800 28px/1.1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .wb-tile__delta { margin-top: 4px; font: 600 12px/1 var(--font-ui); color: var(--accent-ok); display: inline-flex; align-items: center; gap: 4px; } .wb-tile__delta--down { color: var(--persona-manager); } .wb-tile__why { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-ui); cursor: pointer; transition: color .2s ease, border-color .2s ease; } .wb-tile__why:hover { color: var(--persona-exec); border-color: var(--persona-exec); } /* AI/Human ratio bar */ .wb-tile__bar { margin-top: 10px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg-2); display: flex; } .wb-tile__bar-fill { height: 100%; background: var(--grad-jarvis); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); } .wb-tile__bar-rest { height: 100%; background: color-mix(in srgb, var(--ink-mute) 30%, transparent); } .wb-tile__legend { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-ui); color: var(--ink-mute); margin-top: 6px; } /* Top risks list */ .wb-risks { padding: 14px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .wb-risks__title { font: 600 10.5px/1 var(--font-ui); letter-spacing: 1.4px; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 10px; } .wb-risks__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .wb-risks__row:last-child { border-bottom: 0; } .wb-risks__pill { font: 700 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; background: rgba(40, 200, 118, .12); color: var(--accent-ok); border: 1px solid rgba(40, 200, 118, .32); } .wb-risks__txt { flex: 1; font-size: 13px; color: var(--ink); } .wb-risks__when { font: 500 11px/1 var(--font-mono); color: var(--ink-mute); letter-spacing: .04em; } /* ---------- Slack thread page (Employee + Manager) ---------- */ .slack-page { min-height: 100%; display: flex; flex-direction: column; background: var(--bg-1); color: var(--ink); } .slack-page__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--persona-employee) 8%, var(--bg-1)), var(--bg-1)); } .slack-page__hash { width: 28px; height: 28px; border-radius: 6px; background: var(--persona-employee); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 800 14px/1 var(--font-ui); } .slack-page__channel { font: 700 15px/1 var(--font-ui); color: var(--ink); } .slack-page__sub { font-size: 12px; color: var(--ink-mute); } .slack-page__body { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; } .slack-page__msg { display: flex; gap: 12px; align-items: flex-start; } .slack-page__msg .slack-msg__avatar { width: 36px; height: 36px; flex-basis: 36px; } .slack-page__attach { margin-top: 8px; border-left: 4px solid var(--persona-employee); padding: 10px 12px; background: var(--bg-2); border-radius: 0 8px 8px 0; font-size: 13px; } .slack-page__attach-title { font-weight: 700; color: var(--ink); } .slack-page__attach-meta { font-size: 11px; color: var(--ink-mute); margin-top: 2px; } .slack-page__attach-actions { display: flex; gap: 8px; margin-top: 8px; } /* ---------- Team Health (Manager chapter) ---------- */ .team-health { min-height: 100%; padding: 22px; display: flex; flex-direction: column; gap: 16px; color: var(--ink); background: radial-gradient(700px 380px at 0% 0%, color-mix(in srgb, var(--persona-manager) 14%, transparent), transparent 60%), var(--bg-1); } .team-health__head { display: flex; align-items: center; gap: 10px; } .team-health__head h3 { margin: 0; font-size: 16px; color: var(--ink); } .team-health__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--persona-manager); box-shadow: 0 0 10px color-mix(in srgb, var(--persona-manager) 70%, transparent); } .team-health__people { display: grid; gap: 10px; grid-template-columns: 1fr; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-1); } .th-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); } .th-row.is-flagged { border: 1px solid color-mix(in srgb, var(--accent-warn) 60%, var(--line)); background: color-mix(in srgb, var(--accent-warn) 8%, var(--bg-2)); } .th-row__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--persona-manager); color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-ui); } .th-row__name { font-weight: 600; color: var(--ink); } .th-row__role { font-size: 11px; color: var(--ink-mute); } .th-row__heat { display: grid; grid-template-columns: repeat(7, 14px); gap: 3px; } .th-row__heat span { width: 14px; height: 14px; border-radius: 3px; background: var(--bg-1); border: 1px solid var(--line); } .th-row__heat span.is-h1 { background: color-mix(in srgb, var(--persona-manager) 25%, var(--bg-1)); } .th-row__heat span.is-h2 { background: color-mix(in srgb, var(--persona-manager) 50%, var(--bg-1)); } .th-row__heat span.is-h3 { background: color-mix(in srgb, var(--persona-manager) 75%, var(--bg-1)); } .th-row__heat span.is-h4 { background: var(--persona-manager); } .th-row__heat span.is-warn { background: var(--accent-warn); } .th-row__heat span.is-crit { background: #ff5f5f; } .th-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 700 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 154, 61, .14); color: #b86a14; border: 1px solid rgba(255, 154, 61, .34); } [data-theme="dark"] .th-flag { color: #ffc07a; background: rgba(255, 154, 61, .22); } .th-incident { border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, #ff5f5f 35%, var(--line)); background: var(--bg-1); box-shadow: var(--shadow-1); padding: 14px 16px; } .th-incident__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .th-incident__pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 700 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 95, 95, .14); color: #c93838; border: 1px solid rgba(255, 95, 95, .36); } .th-incident__title { font-weight: 700; color: var(--ink); flex: 1; } .th-incident__time { font-size: 11px; color: var(--ink-mute); } .th-incident__causal { margin-top: 10px; display: grid; gap: 6px; } .th-incident__step { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-dim); } .th-incident__step::before { content: ""; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--persona-manager); box-shadow: 0 0 8px color-mix(in srgb, var(--persona-manager) 60%, transparent); } .th-incident__step strong { color: var(--ink); } .th-incident__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .th-btn { font: 600 13px/1 var(--font-ui); padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-dim); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease; } .th-btn--primary { background: var(--persona-manager); color: #043a35; border-color: transparent; box-shadow: 0 8px 20px rgba(20, 184, 166, .35); } .th-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.05); } .th-btn:hover { color: var(--persona-manager); border-color: var(--persona-manager); } .th-btn--ghost { background: transparent; } /* ============================================================= Stage tweaks for the new layout — the dock now hosts the suggestion chips above the whisper bar. Make sure the suggestion chips don't collide with the whisper margins. ============================================================= */ .dock { display: flex; flex-direction: column; gap: 0; } .workspace .dock .whisper { margin: 0 auto; } /* When workspace is hidden via [hidden], make sure the lobby fills */ main.workspace[hidden] { display: none; } section.lobby[hidden] { display: none; } /* ============================================================= Lobby responsive tweaks ============================================================= */ @media (max-width: 720px) { .lobby__inner { padding: 22px 5% 80px; } .persona-grid { grid-template-columns: 1fr; } .topbar-meta { padding: 0 12px; } .topbar-meta__brand-text { display: none; } .topbar-sf { padding: 0 10px; gap: 8px; } .topbar-sf__actions { gap: 0; } /* Drop the less-essential icons on narrow screens to keep the row tidy. */ .topbar-sf__iconbtn[aria-label="Trailhead"], .topbar-sf__iconbtn[aria-label="Help"], .topbar-sf__iconbtn[aria-label="Setup"] { display: none; } .chapter-pill { display: none; } } /* ============================================================= Director's notes — Pritesh-facing meta callouts ------------------------------------------------------------- These notifications live OUTSIDE any persona's experience. They appear in the bottom-right corner with a distinct warm accent so they read as "for the demo viewer", separating them from the Jarvis ↔ persona chat that uses the cool indigo accent. End-of-chapter recap + Next-chapter CTA also live here. ============================================================= */ .director-stack { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 36px)); pointer-events: none; } .director-note { pointer-events: auto; width: 100%; background: var(--bg-1); border: 1px solid color-mix(in srgb, var(--accent-warn) 40%, var(--line)); border-left: 3px solid var(--accent-warn); border-radius: 14px; padding: 12px 14px 14px; box-shadow: 0 18px 40px rgba(20, 24, 60, 0.16), 0 2px 6px rgba(20, 24, 60, 0.08); animation: director-in 0.42s cubic-bezier(.2, .7, .2, 1); transform-origin: bottom right; position: relative; } [data-theme="dark"] .director-note { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); } .director-note--leaving { animation: director-out 0.28s ease both; } @keyframes director-in { 0% { opacity: 0; transform: translate(14px, 14px) scale(0.96); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } @keyframes director-out { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(14px, 14px) scale(0.96); } } .director-note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .director-note__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, var(--accent-warn) 18%, transparent); color: var(--accent-warn); flex-shrink: 0; } .director-note__badge { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-warn); } .director-note__close { margin-left: auto; border: 0; background: transparent; color: var(--ink-mute); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .director-note__close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } .director-note__title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; } .director-note__text { font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin-top: 4px; } .director-note__text strong { color: var(--ink); font-weight: 600; } .director-note__sub { font-size: 11px; color: var(--ink-mute); margin-top: 8px; letter-spacing: 0.02em; } .director-note__actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .director-note__btn { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 13px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease; } .director-note__btn:hover { background: color-mix(in srgb, var(--ink) 6%, var(--bg-2)); border-color: var(--line-strong); } .director-note__btn:active { transform: scale(0.97); } .director-note__btn--primary { background: var(--accent-1); color: #fff; border-color: var(--accent-1); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-1) 35%, transparent); } .director-note__btn--primary:hover { background: color-mix(in srgb, var(--accent-1) 88%, #000); border-color: color-mix(in srgb, var(--accent-1) 88%, #000); } /* ============================================================= Demo legend — declares product vs. director's-notes convention ============================================================= */ .demo-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px auto 4px; max-width: 980px; width: 100%; } .demo-legend__card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; } .demo-legend__card--product { border-left: 3px solid var(--accent-1); } .demo-legend__card--meta { border-left: 3px solid var(--accent-warn); } .demo-legend__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .demo-legend__card--product .demo-legend__head { color: var(--accent-1); } .demo-legend__card--meta .demo-legend__head { color: var(--accent-warn); } .demo-legend__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .demo-legend__card--product .demo-legend__dot { background: var(--accent-1); } .demo-legend__card--meta .demo-legend__dot { background: var(--accent-warn); } .demo-legend__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; } .demo-legend__body { font-size: 13px; color: var(--ink-dim); line-height: 1.5; } .demo-legend__body strong { color: var(--ink); font-weight: 600; } @media (max-width: 720px) { .demo-legend { grid-template-columns: 1fr; } .director-stack { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); } } /* ============================================================= Chapter welcome — cinematic intro shown before the chat thread takes over. Built to match the Salesforce "Build by describing your vision" aesthetic: pastel pink→lilac→periwinkle background already comes from ; the hero adds the centered greeting, the gradient title, the soft Install ITSM pill, and a glassy "Ask anything" composer that mirrors the dock whisper bar. ============================================================= */ /* While welcome is on stage, hide the dock so the hero owns the full chapter column. The whisper rejoins once the welcome resolves and the story moves into the chat thread. */ .workspace--welcome .dock { display: none; } .workspace--welcome .stage__main { /* Center vertically + horizontally; let the hero breathe. */ justify-content: center; align-items: center; padding: 36px 5% 36px; } .workspace--welcome .thread { display: none; } .chapter-welcome { width: 100%; max-width: 920px; display: flex; align-items: center; justify-content: center; margin: auto; opacity: 0; transform: translateY(8px); transition: opacity .42s ease, transform .42s ease; } .chapter-welcome--in { opacity: 1; transform: translateY(0); } .chapter-welcome--leaving { opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease; } .chapter-welcome__inner { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; } /* "Welcome, Sarah!" — small lead-in with a violet emphasis on the name */ .chapter-welcome__greet { font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: .005em; } .chapter-welcome__name { background: linear-gradient(90deg, #a25cff 0%, #6f5fff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* Two-line gradient hero — keeps the Salesforce blue→violet brand DNA */ .chapter-welcome__title { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(40px, 5.4vw, 64px); display: flex; flex-direction: column; gap: 6px; } .chapter-welcome__title-lead { color: var(--ink); } .chapter-welcome__title-tail { background: linear-gradient(90deg, #2f5cff 0%, #6a4dff 50%, #a25cff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: chapter-welcome-grad 8s ease-in-out infinite; } @keyframes chapter-welcome-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Install ITSM — soft white pill with a sparkles glyph. Sits on its own row above the composer; reads as a primary action without competing visually with the gradient hero. */ .chapter-welcome__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; background: var(--bg-1); color: var(--accent-1); border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--line)); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .005em; cursor: pointer; box-shadow: 0 10px 24px rgba(122, 92, 255, 0.18), 0 1px 0 rgba(255, 255, 255, .8) inset; transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease; } .chapter-welcome__cta:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); box-shadow: 0 16px 32px rgba(122, 92, 255, 0.26), 0 1px 0 rgba(255, 255, 255, .9) inset; } .chapter-welcome__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 10px 24px rgba(122, 92, 255, 0.18); } .chapter-welcome__cta-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-2); } /* Composer slot — simply hosts the canonical .whisper component so the welcome hero shares the exact same composer chassis as the dock. The width matches the dock whisper for visual continuity when the demo transitions from welcome → workspace. */ .chapter-welcome__composer { width: 100%; max-width: 752px; margin: 4px auto 0; } .chapter-welcome__composer .whisper { max-width: 100%; } @media (max-width: 720px) { .chapter-welcome__title { font-size: clamp(30px, 9vw, 44px); } .chapter-welcome__inner { gap: 16px; } } /* ============================================================= Multi-choose card — used by the admin chapter to ask Sarah which tools (Okta / Intune / AWS / Splunk) Jarvis should plug into. Shares the .card chrome with single-select choose, but each tile toggles, and a footer Continue CTA confirms the set. ============================================================= */ .bubble__hint { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; } /* Single-column list — locked layout so the grid does NOT reflow between 1 / 2 / 3 columns as the bubble width changes during the conversation (e.g. when a user echo bubble is added on confirm, or when the side panel opens and the thread max-width animates). Each tile is already a self-contained horizontal row (logo · name+sub · check), so stacking them vertically reads as a clean list. */ .card--multi .multi-grid { display: flex; flex-direction: column; gap: 8px; } .multi-tile { position: relative; cursor: pointer; padding: 12px 14px; padding-right: 36px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; text-align: left; color: inherit; font-family: inherit; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .25s ease; } .multi-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent-1) 50%, var(--line)); box-shadow: 0 12px 28px rgba(47, 92, 255, .12); } .multi-tile__logo { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; overflow: hidden; background: var(--grad-jarvis); } .multi-tile__logo--img { background: transparent; padding: 0; } .multi-tile__logo--img img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; display: block; } .multi-tile__name { grid-column: 2; grid-row: 1; align-self: end; font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25; } .multi-tile__sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; color: var(--ink-dim); line-height: 1.3; } .multi-tile__check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: transparent; background: transparent; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; } .multi-tile.is-selected { border-color: var(--accent-1); box-shadow: 0 0 0 1px var(--accent-1), 0 12px 32px rgba(47, 92, 255, .18); background: color-mix(in srgb, var(--accent-1) 4%, var(--bg-1)); } .multi-tile.is-selected .multi-tile__check { background: var(--accent-1); border-color: var(--accent-1); color: #fff; transform: scale(1.05); } .multi-tile[disabled] { opacity: .55; pointer-events: none; } .multi-foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .multi-foot__hint { font-size: 12.5px; color: var(--ink-dim); } .multi-confirm { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--accent-1); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .005em; box-shadow: 0 8px 22px rgba(47, 92, 255, .28), 0 0 0 1px rgba(255, 255, 255, .12) inset; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; } .multi-confirm:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(47, 92, 255, .35), 0 0 0 1px rgba(255, 255, 255, .12) inset; } .multi-confirm:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.2); box-shadow: none; } .multi-confirm:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 8px 22px rgba(47, 92, 255, .28); } /* ============================================================= ITSM Bootstrap page — the "aha" moment side-panel content. Five animated phases drive into a final IT-landscape reveal, each one fired by `bs:phase:*` events from the chat side. Card states (data-state): · pending — dimmed, content hidden · active — full opacity, animations playing, accent ring · done — opacity restored, checkmark visible, ring fades ============================================================= */ .bootstrap { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 24px; background: radial-gradient(900px 480px at 50% -10%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%), radial-gradient(700px 480px at 100% 100%, color-mix(in srgb, var(--accent-1) 10%, transparent), transparent 60%), var(--bg-base); min-height: 100%; } /* Hero header — phase indicator + thin accent progress strip */ .bootstrap__hero { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); position: sticky; top: 0; z-index: 2; } .bootstrap__title { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); font-weight: 600; } .bootstrap__title strong { background: var(--grad-jarvis); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bootstrap__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-1) 60%, transparent); animation: bs-pulse 1.6s ease-out infinite; } .bootstrap--complete .bootstrap__pulse { background: var(--accent-ok); animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ok) 22%, transparent); } @keyframes bs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-1) 60%, transparent); } 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-1) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-1) 0%, transparent); } } .bootstrap__phase { font-size: 13px; color: var(--ink-dim); letter-spacing: .005em; min-height: 18px; transition: color .25s ease; } .bootstrap--complete .bootstrap__phase { color: var(--accent-ok); font-weight: 600; } .bootstrap__progress { height: 4px; border-radius: 999px; background: var(--progress-track); overflow: hidden; margin-top: 4px; } .bootstrap__progress-bar { height: 100%; width: 0%; background: var(--grad-jarvis); border-radius: inherit; transition: width 1.6s cubic-bezier(.2, .7, .2, 1); } /* Phase cards — each phase lives in its own card so the visual states (pending → active → done) read clearly. */ .bs-card { position: relative; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-1); opacity: .55; transform: translateY(2px); transition: opacity .35s ease, transform .35s ease, border-color .25s ease, box-shadow .25s ease; } .bs-card[data-state="active"] { opacity: 1; transform: translateY(0); border-color: color-mix(in srgb, var(--accent-1) 50%, var(--line)); box-shadow: 0 14px 36px rgba(47, 92, 255, .14), 0 1px 0 rgba(255, 255, 255, .65) inset; } .bs-card[data-state="done"] { opacity: 1; border-color: color-mix(in srgb, var(--accent-ok) 30%, var(--line)); } .bs-card__head { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; } .bs-card__num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-soft); color: var(--accent-1); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .bs-card[data-state="active"] .bs-card__num { background: var(--grad-jarvis); color: #fff; } .bs-card[data-state="done"] .bs-card__num { background: color-mix(in srgb, var(--accent-ok) 18%, var(--bg-soft)); color: var(--accent-ok); } .bs-card__head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.005em; } .bs-card__count { font-size: 12.5px; color: var(--accent-1); font-weight: 700; letter-spacing: .005em; font-variant-numeric: tabular-nums; } .bs-card__total { margin-left: 4px; color: var(--ink-mute); font-weight: 500; } .bs-card__check { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .25s ease; } .bs-card[data-state="done"] .bs-card__check { opacity: 1; transform: scale(1); } .bs-card__caption { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; } /* ---- Phase 1: AI Agents grid (icon dots cascade in) ---- */ .bs-agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; } .bs-agent { position: relative; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 11px; color: var(--ink-dim); font-weight: 500; letter-spacing: .005em; opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .35s ease, transform .35s ease, color .25s ease, border-color .25s ease, background .25s ease; } .bs-agent__glyph { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 10px; background: var(--grad-jarvis); flex-shrink: 0; filter: saturate(.6); transition: filter .3s ease, box-shadow .3s ease; } .bs-agent__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .bs-card[data-state="active"] .bs-agent, .bs-card[data-state="done"] .bs-agent { opacity: 1; transform: translateY(0) scale(1); transition-delay: calc(var(--i, 0) * 22ms); } .bs-card[data-state="active"] .bs-agent { border-color: color-mix(in srgb, var(--accent-1) 28%, var(--line)); color: var(--ink); } .bs-card[data-state="active"] .bs-agent__glyph { filter: saturate(1); box-shadow: 0 0 14px color-mix(in srgb, var(--accent-1) 35%, transparent); animation: bs-agent-pop .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 22ms); } @keyframes bs-agent-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } /* ---- Phase 2: Service graph (SVG nodes + edges) ---- */ .bs-graph { width: 100%; height: 220px; display: block; border-radius: 10px; background: radial-gradient(400px 220px at 50% 50%, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 70%), var(--bg-2); border: 1px solid var(--line); } .bs-graph__edge { stroke: color-mix(in srgb, var(--accent-1) 50%, var(--line-strong)); stroke-width: 1.1; fill: none; opacity: 0; transition: opacity .4s ease; } .bs-graph__node { opacity: 0; transform-origin: center; transform-box: fill-box; transition: opacity .35s ease, transform .35s ease; } .bs-graph__dot { fill: var(--bg-1); stroke: var(--accent-1); stroke-width: 2; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-1) 35%, transparent)); } .bs-graph__label { font-family: var(--font-ui); font-size: 9px; font-weight: 600; fill: var(--ink-dim); } .bs-card[data-state="active"] .bs-graph__edge, .bs-card[data-state="done"] .bs-graph__edge { animation: bs-edge-draw 1.2s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 30ms); opacity: 1; } @keyframes bs-edge-draw { to { stroke-dashoffset: 0; } } .bs-card[data-state="active"] .bs-graph__node, .bs-card[data-state="done"] .bs-graph__node { opacity: 1; animation: bs-node-pop .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms + 200ms); } @keyframes bs-node-pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ---- Phase 3: Dynamic CMDB tiles ---- */ .bs-cmdb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .bs-cmdb-tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; } .bs-cmdb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%); transform: translateX(-110%); pointer-events: none; } .bs-card[data-state="active"] .bs-cmdb-tile::after { animation: bs-shimmer 1.6s ease-out forwards; } @keyframes bs-shimmer { to { transform: translateX(110%); } } .bs-cmdb-tile__label { font-size: 11px; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; } .bs-cmdb-tile__value { margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; background: var(--grad-jarvis); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---- Phase 4: Intelligence layers ---- */ .bs-layers { display: flex; flex-direction: column; gap: 8px; } .bs-layer { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease, border-color .25s ease, background .25s ease; } .bs-card[data-state="active"] .bs-layer, .bs-card[data-state="done"] .bs-layer { opacity: 1; transform: translateY(0); } .bs-layer.is-on { border-color: color-mix(in srgb, var(--accent-ok) 35%, var(--line)); background: color-mix(in srgb, var(--accent-ok) 6%, var(--bg-1)); } .bs-layer__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-jarvis); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; filter: saturate(.55); transition: filter .3s ease; } .bs-layer.is-on .bs-layer__icon { filter: saturate(1); } .bs-layer__name { font-size: 13px; font-weight: 600; color: var(--ink); } .bs-layer__sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 1px; line-height: 1.35; } .bs-layer__check { width: 20px; height: 20px; border-radius: 50%; background: var(--bg-1); border: 1.5px solid var(--line-strong); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .bs-layer.is-on .bs-layer__check { background: var(--accent-ok); border-color: var(--accent-ok); color: #fff; transform: scale(1.05); } /* ---- Phase 5: Domain knowledge chips ---- */ .bs-knowledge-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bs-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-dim); font-size: 11.5px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease, color .25s ease, border-color .25s ease, background .25s ease; } .bs-chip--more { background: var(--grad-soft); color: var(--accent-1); border-color: color-mix(in srgb, var(--accent-1) 30%, var(--line)); font-weight: 600; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip, .bs-card[data-state="done"] .bs-knowledge-chips .bs-chip { opacity: 1; transform: translateY(0); } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(1) { transition-delay: 30ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(2) { transition-delay: 70ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(3) { transition-delay: 110ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(4) { transition-delay: 150ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(5) { transition-delay: 190ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(6) { transition-delay: 230ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(7) { transition-delay: 270ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(8) { transition-delay: 310ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(9) { transition-delay: 350ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(10) { transition-delay: 390ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(11) { transition-delay: 430ms; } .bs-card[data-state="active"] .bs-knowledge-chips .bs-chip:nth-child(12) { transition-delay: 470ms; } /* ---- Phase 6: The reveal — full IT landscape constellation ---- */ .bs-card--reveal { background: radial-gradient(420px 280px at 50% 35%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%), var(--bg-1); } .bs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent-ok) 14%, transparent); color: var(--accent-ok); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .bs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ok); box-shadow: 0 0 8px var(--accent-ok); animation: bs-pulse 1.6s ease-out infinite; } .bs-reveal { display: flex; flex-direction: column; gap: 8px; } .bs-reveal__graph { width: 100%; height: 280px; display: block; border-radius: 10px; background: radial-gradient(420px 280px at 50% 50%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%), radial-gradient(420px 280px at 0% 100%, color-mix(in srgb, var(--accent-1) 10%, transparent), transparent 60%), var(--bg-2); border: 1px solid var(--line); } .bs-reveal__edge { stroke: color-mix(in srgb, var(--accent-1) 40%, var(--line-strong)); stroke-width: .8; fill: none; opacity: 0; transition: opacity .4s ease; } .bs-card[data-state="active"] .bs-reveal__edge { animation: bs-edge-fade .8s ease-out forwards; animation-delay: calc(var(--i, 0) * 6ms + 100ms); opacity: 1; } @keyframes bs-edge-fade { from { opacity: 0; } to { opacity: .85; } } .bs-reveal__node { opacity: 0; transform-origin: center; transform-box: fill-box; transition: opacity .4s ease; } .bs-card[data-state="active"] .bs-reveal__node { animation: bs-node-burst .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 14ms + 80ms); } @keyframes bs-node-burst { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .bs-reveal__node--svc { fill: #2f5cff; filter: drop-shadow(0 0 6px rgba(47, 92, 255, .55)); } .bs-reveal__node--app { fill: #6f5fff; filter: drop-shadow(0 0 6px rgba(111, 95, 255, .55)); } .bs-reveal__node--inf { fill: #28c876; filter: drop-shadow(0 0 6px rgba(40, 200, 118, .55)); } .bs-reveal__node--ai { fill: #a25cff; filter: drop-shadow(0 0 6px rgba(162, 92, 255, .55)); } .bs-reveal__legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-dim); } .bs-legend { display: inline-flex; align-items: center; gap: 6px; } .bs-legend__dot { width: 8px; height: 8px; border-radius: 50%; } .bs-legend__dot--svc { background: #2f5cff; } .bs-legend__dot--app { background: #6f5fff; } .bs-legend__dot--inf { background: #28c876; } .bs-legend__dot--ai { background: #a25cff; } /* When the panel is split (not fullscreen), tighten the bootstrap layout so the agent grid + cmdb tiles still read at 540px wide. */ .workspace--split:not(.workspace--panel-fullscreen) .bootstrap { padding: 14px 14px 22px; } .workspace--split:not(.workspace--panel-fullscreen) .bs-graph { height: 200px; } .workspace--split:not(.workspace--panel-fullscreen) .bs-reveal__graph { height: 250px; } /* ============================================================= ITSM Bootstrap — interactivity layer ------------------------------------------------------------- Hover tooltip + bottom-sheet Inspector + focus rings shared by every phase. Pending-phase cards are pointer-event gated so nodes can't be clicked before their phase activates (avoids the "what does this even mean?" interaction in the pre-animation skeleton state). ============================================================= */ /* The bootstrap is the positioning context for the tooltip + the inspector drawer (both use absolute positioning relative to it). */ .bootstrap { position: relative; } /* ----- Pending-phase gate ----- Until a phase activates, its interactive children are inert to pointer input. The default `.bs-card` has no `data-state` set (it gets `active` / `done` later via JS), so the `:not()` rule covers both "no attribute" and any future "pending" literal. */ .bs-card:not([data-state="active"]):not([data-state="done"]) [data-interactive] { pointer-events: none; } .bs-card[data-state="active"] [data-interactive], .bs-card[data-state="done"] [data-interactive] { cursor: pointer; } /* ----- Focus ring — works for HTML + SVG via outline ----- */ .bs-card [data-interactive]:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; border-radius: 6px; } .bs-card svg [data-interactive]:focus-visible { outline: none; /* SVG can't render outline reliably across browsers — use a stroke ring on the focused node instead. */ } .bs-graph__node[data-interactive]:focus-visible .bs-graph__dot, .bs-graph__node[data-interactive]:hover .bs-graph__dot { stroke: var(--accent-1); stroke-width: 2.5; r: 8; } .bs-graph__node--warn .bs-graph__dot { fill: #ff9d2a; } .bs-graph__node--crit .bs-graph__dot { fill: #ff5470; } .bs-reveal__node[data-interactive]:focus-visible, .bs-reveal__node[data-interactive]:hover { stroke: var(--accent-1); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(47, 92, 255, .6)); } /* Subtle hover lift for the tile / chip / agent rows. */ .bs-card[data-state="active"] .bs-agent[data-interactive]:hover, .bs-card[data-state="done"] .bs-agent[data-interactive]:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent-1) 50%, var(--line)); } .bs-cmdb-tile[data-interactive]:hover, .bs-cmdb-tile[data-interactive]:focus-visible { border-color: color-mix(in srgb, var(--accent-1) 55%, var(--line)); box-shadow: 0 12px 28px rgba(47, 92, 255, .14); transform: translateY(-1px); } .bs-layer[data-interactive]:hover, .bs-layer[data-interactive]:focus-visible { border-color: color-mix(in srgb, var(--accent-1) 55%, var(--line)); } .bs-chip[data-interactive] { cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; } .bs-chip[data-interactive]:hover, .bs-chip[data-interactive]:focus-visible { border-color: color-mix(in srgb, var(--accent-1) 55%, var(--line)); background: color-mix(in srgb, var(--accent-1) 8%, var(--bg-1)); color: var(--ink); } /* ----- Tooltip — small floating chip near the cursor / focused node. Positioned by JS using `transform: translate(x, y)` so the transition is just opacity + a tiny rise, GPU-accelerated. */ .bs-tooltip { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; min-width: 180px; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); box-shadow: 0 14px 32px rgba(20, 30, 60, .18); color: var(--ink); font-size: 12.5px; line-height: 1.35; opacity: 0; transform: translate(0, 0); transition: opacity .15s ease; } .bs-tooltip[data-show="1"] { opacity: 1; } .bs-tooltip__row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bs-tooltip__row strong { color: var(--ink); font-weight: 700; } .bs-tooltip__eyebrow { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); font-weight: 700; } .bs-tooltip__health { width: 8px; height: 8px; border-radius: 50%; background: #28c876; } .bs-tooltip__health--warn { background: #ff9d2a; } .bs-tooltip__health--crit { background: #ff5470; } .bs-tooltip__sub { margin-top: 4px; color: var(--ink-dim); } .bs-tooltip__hint { margin-top: 6px; font-size: 11px; color: var(--ink-mute); letter-spacing: .02em; } /* ----- Inspector modal — centered dialog with a dim backdrop, scoped to the bootstrap pane. We use `position: fixed` here on purpose: the parent `.browser` panel has `transform: translateX` which makes it the containing block for fixed descendants, so `inset: 0` covers the entire panel area without leaking out into the chat side. The backdrop dims everything behind, the dialog centers in the middle, Esc + backdrop click + close button all dismiss. Capped height with its own scroll keeps long detail payloads readable on short viewports. */ .bs-inspector { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; } .bs-inspector[data-show="1"] { visibility: visible; pointer-events: auto; } /* Lock scroll-through on the panel while the modal is open. Without this, wheel/touch on the dim backdrop bubbles up to the browser viewport scroll container and moves the bootstrap content behind the modal — distracting and breaks the "everything else is paused" feel. `:has()` keeps the lock purely CSS-driven (no extra JS state to toggle). */ .browser__viewport:has(.bs-inspector[data-show="1"]) { overflow: hidden; } /* Backdrop — full-pane dim layer. Fades in/out so the modal doesn't pop. Click here closes the modal (handler in JS). */ .bs-inspector__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity .22s ease; } .bs-inspector[data-show="1"] .bs-inspector__backdrop { opacity: 1; } /* Dialog — the centered card itself. Uses `position: relative` so it stacks above the backdrop, and `max-height: 80%` with its own scroll for long bodies. The subtle rise-in transform makes the open feel intentional without being distracting. */ .bs-inspector__dialog { position: relative; width: min(440px, 100%); max-height: min(80%, 640px); display: flex; flex-direction: column; background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 4px 14px rgba(15, 23, 42, .14); opacity: 0; transform: translateY(8px) scale(.98); transition: transform .28s cubic-bezier(.2,.85,.25,1), opacity .22s ease; overflow: hidden; } .bs-inspector__dialog:focus { outline: none; } .bs-inspector[data-show="1"] .bs-inspector__dialog { opacity: 1; transform: translateY(0) scale(1); } .bs-inspector__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px dashed var(--line); flex: 0 0 auto; } .bs-inspector__head > div:first-child { flex: 1; min-width: 0; } .bs-inspector__eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-mute); font-weight: 700; margin-bottom: 2px; } .bs-inspector__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; } .bs-inspector__close { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-1); color: var(--ink-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .2s ease, border-color .2s ease, background .2s ease; } .bs-inspector__close:hover { color: var(--ink); border-color: var(--accent-1); } .bs-inspector__close:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; } .bs-inspector__body { padding: 14px 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .bs-insp-summary { margin: 0 0 12px; color: var(--ink-dim); font-size: 13px; line-height: 1.5; } .bs-insp-section { margin-bottom: 14px; } .bs-insp-section:last-child { margin-bottom: 0; } .bs-insp-section h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); font-weight: 700; } .bs-insp-kv { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; } .bs-insp-kv > div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 12px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent-1) 4%, var(--bg-soft)); } .bs-insp-kv dt { margin: 0; font-size: 12px; color: var(--ink-mute); font-weight: 600; } .bs-insp-kv dd { margin: 0; font-size: 13px; color: var(--ink); font-weight: 600; } .bs-insp-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .bs-insp-list li { position: relative; padding: 8px 12px 8px 28px; border-radius: 8px; background: var(--bg-soft); font-size: 13px; color: var(--ink); line-height: 1.45; } .bs-insp-list li::before { content: ""; position: absolute; left: 12px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-1); box-shadow: 0 0 8px rgba(47, 92, 255, .5); } .bs-insp-text { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.5; } .bs-insp-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); flex-wrap: wrap; } .bs-insp-btn { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-1); color: var(--ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .15s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; } .bs-insp-btn:hover { transform: translateY(-1px); border-color: var(--accent-1); } .bs-insp-btn--primary { background: var(--accent-1); color: #fff; border-color: var(--accent-1); box-shadow: 0 8px 20px rgba(47, 92, 255, .26); } .bs-insp-btn--primary:hover { box-shadow: 0 12px 26px rgba(47, 92, 255, .32); } .bs-insp-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; } /* Reduced-motion: drop the rise-in transitions for tooltip + modal so users with `prefers-reduced-motion` don't get any animation. */ @media (prefers-reduced-motion: reduce) { .bs-tooltip, .bs-inspector__backdrop, .bs-inspector__dialog { transition: none; } .bs-inspector__dialog { transform: none; } }