:root { color-scheme: light dark; /* #ai-hub-polish: allow block-size:auto to animate (accordion open/close). */ interpolate-size: allow-keywords; /* Light theme — Apple-style near-white */ --bg: #f5f5f7; --surface: #ffffff; --soft: #E8E8E8; --line: rgba(0, 0, 0, 0.10); --text: #1A1A1A; /* Issue #1572: darkened from #6B6B6B - 4.30-4.35:1 against real ancestor backgrounds (conv-time, stage-label, panel-kicker), below the 4.5:1 WCAG AA threshold for normal text. */ --muted: #5a5a5a; --accent: #0071e3; --accent-strong: #0058b0; --accent-soft: #eef4ff; /* Issue #1572: darkened from #b08442 - 3.14-3.37:1 (kb-badge.kb-stopped, conv-status.stopped), the lowest ratios the audit found. */ --warn: #8a6734; --warn-soft: #fdf6e8; /* Issue #1572: darkened from #2e7d32 - 3.66:1 for scope-badge.scope-proj against its own 10%-tint background (and as low as 4.37:1 against an active/highlighted row's additional background tint). */ --done: #256b29; --danger: #a24747; --state-working: #006adc; --state-working-soft: rgba(0, 106, 220, 0.13); --state-waiting: #d2261f; --state-waiting-soft: rgba(210, 38, 31, 0.13); /* Issue #1572: darkened from #20833a - 3.88:1 (conv-status.complete) and 4.05:1 (run-state-pill.complete against its own 13%-tint background). */ --state-complete: #1d7534; --state-complete-soft: rgba(32, 131, 58, 0.13); --shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.08); --picker-delegation: #5b7eb0; --picker-learning: #8b5fbf; /* Issue #566: personalization / "teach" accent (growth offer + taught badge). */ --teach: #5b3fa8; --teach-soft: #f6f2ff; --teach-line: #d8cdf2; /* Safe zone for macOS hiddenInset traffic lights (~28px) and Windows titleBarOverlay height (36px). Falls back to 0 in a browser tab. */ --titlebar-inset: env(titlebar-area-height, 0px); /* z-index layers (ascending, avoid magic numbers in property declarations). */ --z-cmd-palette: 9000; --z-dropdown-menu: 9100; /* Job-viz modal must clear #composer-suggestions/.conversation-focus-overlay (--z-cmd-palette). The #jv-tt tooltip portal (--z-jv-tt) must clear the modal so phase/skill popovers float above it when the modal is open. */ --z-job-viz: 9200; --z-jv-tt: 9300; } /* #700: theming is driven by an explicit [data-theme] attribute set pre-paint by the bootstrap (from localStorage['fraim-theme'] or, when unset, the OS prefers-color-scheme). This replaces the old prefers-color-scheme-only token block so the in-app toggle can override the OS preference. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: #1E1E1E; --surface: #2A2A2A; --soft: #323232; --line: rgba(255, 255, 255, 0.10); --text: #E8E8E8; --muted: #999999; --accent: #5b8de8; --accent-strong: #82aaee; --accent-soft: rgba(91, 141, 232, 0.15); --warn: #d4a04e; --warn-soft: rgba(212, 160, 78, 0.12); --done: #5cb85c; --danger: #e07070; --state-working: #4da3ff; --state-working-soft: rgba(77, 163, 255, 0.18); --state-waiting: #ff5a4f; --state-waiting-soft: rgba(255, 90, 79, 0.18); --state-complete: #46c76a; --state-complete-soft: rgba(70, 199, 106, 0.18); --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.40); } /* Electron shell: html.electron is set synchronously before CSS paints so there is no flash. Mica (Win11) / vibrancy (macOS) paint the window-level background; body + .page must be transparent to let that material show through. Content surfaces use frosted-glass layering so they read against the OS material. */ html.electron body, html.electron .page { background: transparent; } /* Header floats directly on Mica — no card. Native Win11 pattern. */ html.electron .header { background: transparent; border: none; } /* Rail: frosted sidebar — clearly distinct from Mica, clearly distinct from the conversation. A solid-ish left edge gives it visual grounding. */ html.electron .rail { background: rgba(255, 255, 255, 0.76); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: none; border-right: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; box-shadow: none; } /* Conversation: the primary work surface — crisp white card on the Mica */ html.electron .conversation { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.60); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } html.electron .modal { background: rgba(253, 253, 253, 0.94); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14); } html.electron .modal-backdrop { background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } html.electron[data-theme="dark"] .rail { background: rgba(42, 42, 42, 0.78); border-right-color: rgba(255, 255, 255, 0.06); } html.electron[data-theme="dark"] .conversation { background: rgba(36, 36, 36, 0.88); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20); } html.electron[data-theme="dark"] .modal { background: rgba(30, 30, 30, 0.94); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40); } html.electron[data-theme="dark"] body.hub-shell, html.electron[data-theme="dark"] .hub-area, html.electron[data-theme="dark"] .area-main, html.electron[data-theme="dark"] .hub-area-page, html.electron[data-theme="dark"] #proj-overview, html.electron[data-theme="dark"] #proj-workspace { background: var(--bg); } /* ── Native platform feel ─────────────────────────────────────────────────── html.mac / html.win / html.linux are set pre-paint (see index.html). macOS renders SF Pro with grayscale smoothing — Chromium's default subpixel makes SF look heavy/fringed — while Windows keeps its native ClearType rendering for Segoe UI Variable. The in-content design system (Apple-blue accent, near-white surfaces, pill controls) stays consistent on both: an Apple-grade product that wears each OS's native window chrome. */ html.mac body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Electron window-chrome integration. The topmost bar (gs-rail on first run, otherwise hub-tabs) IS the OS titlebar: draggable, with a safe gutter for the native window controls — traffic lights top-left on macOS, min/max/close top-right on Windows. Interactive children opt back out of the drag region. */ html.electron .gs-rail, html.electron .hub-tabs { -webkit-app-region: drag; } html.electron .gs-rail button, html.electron .gs-rail a, html.electron .hub-tabs button, html.electron .hub-tabs a, html.electron .hub-tabs select { -webkit-app-region: no-drag; } /* Titlebar owns the top inset now, so the work area starts snug below the bar. */ html.electron .page { padding-top: 14px; } /* macOS hiddenInset: reserve top-left space for the traffic lights on the topmost visible bar. (titlebar-area env() vars are a Windows WCO feature and read 0 on macOS, so the inset is explicit here.) */ html.mac.electron .hub-tabs { padding-left: 78px; } html.mac.electron .gs-rail { padding-left: 78px; min-height: 30px; } html.mac.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-left: 0; } /* Windows 11 titleBarOverlay: reserve top-right space for min/max/close on the topmost visible bar so the avatar and actions never sit under the controls. */ html.win.electron .hub-tabs { padding-right: 146px; } html.win.electron .gs-rail { padding-right: 146px; } html.win.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-right: 8px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } [hidden] { display: none !important; } html, body { height: 100%; } body { /* System-native font stack: San Francisco on Mac, Segoe UI Variable on Windows */ font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.5; font-size: 15px; overflow: hidden; /* Thin native-style scrollbars */ scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } [data-theme="dark"] body { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } button { font: inherit; cursor: pointer; } .page { max-width: none; width: 100%; margin: 0; /* Push content below traffic lights on macOS hiddenInset titlebar */ padding: calc(20px + var(--titlebar-inset)) 24px 16px; display: flex; flex-direction: column; gap: 14px; height: 100vh; min-height: 0; } /* Header — draggable titlebar strip on Electron (macOS hiddenInset). Buttons inside must override with no-drag so they remain clickable. */ .header { display: flex; align-items: center; gap: 16px; /* left margin reserves space for macOS traffic lights (78px) */ padding-left: max(0px, env(titlebar-area-x, 0px)); } .header button, .header a, .header select { -webkit-app-region: no-drag; } .header-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.02em; white-space: nowrap; flex-shrink: 0; color: var(--text); } .project-button { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; color: var(--text); box-shadow: var(--shadow); max-width: 360px; } .project-button:hover { background: var(--soft); } .project-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .project-button .folder { color: var(--muted); font-size: 13px; } .project-button strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Welcome — inline in the header strip, no card styling */ .welcome { flex: 1; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--muted); } .welcome strong.you { color: var(--text); font-weight: 600; } .welcome .concept { position: relative; font-weight: 600; color: var(--accent); } .welcome .info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; margin-left: 3px; margin-right: 1px; cursor: pointer; vertical-align: 1px; border: none; font-family: serif; font-style: italic; } .welcome .info:hover { background: var(--accent); color: #fff; } .welcome .info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .popover { position: absolute; top: calc(100% + 10px); left: 0; width: 320px; max-height: min(60vh, 480px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: var(--shadow-lg); z-index: 50; font-weight: 400; font-size: 14px; color: var(--text); line-height: 1.5; display: none; } .popover.open { display: block; } .popover .pop-title { display: block; font-weight: 600; color: var(--text); margin-bottom: 6px; } .popover .pop-link { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 13px; text-decoration: none; font-weight: 500; } .popover .pop-link:hover { text-decoration: underline; } .popover .pop-jobs { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .popover .pop-jobs.open { display: grid; gap: 8px; } .popover .pop-jobs .job-row { display: grid; gap: 1px; font-size: 13px; } .popover .pop-jobs .job-row strong { color: var(--accent); font-weight: 600; } .popover .pop-jobs .job-row span { color: var(--muted); } /* Layout */ .layout { display: grid; grid-template-columns: 326px minmax(0, 1fr); gap: 20px; align-items: stretch; flex: 1; min-height: 0; } /* Left rail */ .rail { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; gap: 14px; min-width: 0; align-self: start; max-height: 100%; overflow-y: auto; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); } .new-conv { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 11px 16px; font-weight: 600; box-shadow: var(--shadow); } .rail-note { padding: 0 2px; font-size: 12px; color: var(--muted); line-height: 1.45; } .rail-section { display: grid; gap: 10px; } .rail-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0 2px; } .new-conv:hover { background: var(--accent-strong); } .new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .teach-btn { width: 100%; background: var(--teach-soft); color: var(--teach); border: 1px solid var(--teach-line); border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; } .teach-btn:hover { background: var(--teach-line); } .teach-btn:focus-visible { outline: 2px solid var(--teach); outline-offset: 2px; } /* Shared management controls occupy the same rail slot on all three scopes. */ .scope-management-actions { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; } .scope-management-actions .scope-management-action { display: block; width: 100%; margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; } .scope-management-actions [data-action="delegate"] { background: var(--accent); color: white; border-color: var(--accent); } :root[data-theme="dark"] .scope-management-actions [data-action="delegate"], :root[data-theme="dark"] .ipe-btn-create, :root[data-theme="dark"] #teach-job-modal .send-button { color: var(--bg); } .scope-management-actions [data-action="coach"] { background: var(--teach-soft); color: var(--teach); border-color: var(--teach-line); } .scope-management-actions [data-action="roster"] { background: var(--warn); color: var(--bg); border-color: var(--warn); } .scope-management-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Roster chip: teach icon revealed on hover (hidden on touch devices) */ .roster-chip { position: relative; } .roster-chip-teach { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--teach-line); background: var(--teach-soft); color: var(--teach); font-size: 13px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; cursor: pointer; padding: 0; } .roster-chip:hover .roster-chip-teach { opacity: 1; } .roster-chip-teach:focus-visible { outline: 2px solid var(--teach); outline-offset: 2px; opacity: 1; } @media (hover: none) { .roster-chip-teach { display: none; } } .conv-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 0; min-width: 0; } .conv-employee-group { display: grid; gap: 6px; } /* #769: hire-pending polling indicator */ .hire-pending-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--state-working-soft); border-radius: 8px; margin: 2px 0; } .hire-pending-spinner { width: 14px; height: 14px; border: 2px solid var(--state-working); border-top-color: transparent; border-radius: 50%; animation: hire-spin 0.7s linear infinite; flex-shrink: 0; } @keyframes hire-spin { to { transform: rotate(360deg); } } .hire-pending-text { font-size: 11px; color: var(--state-working); font-weight: 600; } .hire-timeout-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--warn-soft); border-radius: 8px; margin: 2px 0; } .hire-timeout-icon { font-size: 12px; } .hire-timeout-text { font-size: 11px; color: var(--warn); font-weight: 600; } .hire-timeout-row a { font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 600; } .hire-timeout-row a:hover { text-decoration: underline; } .conv-employee-group > summary { list-style: none; } .conv-employee-group > summary::-webkit-details-marker { display: none; } .conv-employee-tab { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 2px; color: var(--muted); cursor: pointer; } .conv-employee-avatar { width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--accent-strong); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; } img.conv-employee-avatar { object-fit: cover; } .conv-employee-tab::before { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid currentColor; transition: transform 120ms ease; } .conv-employee-group[open] .conv-employee-tab::before { transform: rotate(90deg); } .conv-employee-tab-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .conv-employee-tab-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-employee-tab-detail { font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-employee-tab-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--muted); } .conv-employee-add { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 14px; line-height: 18px; font-weight: 700; text-align: center; cursor: pointer; flex-shrink: 0; } .conv-employee-add:hover { background: var(--accent-soft); border-color: rgba(0,113,227,.28); } .conv-employee-manage { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; line-height: 14px; font-weight: 700; text-align: center; cursor: pointer; flex-shrink: 0; padding: 0 0 3px; } .conv-employee-manage:hover, .conv-employee-manage:focus-visible { background: var(--accent-soft); color: var(--accent); border-color: rgba(0,113,227,.28); } .emp-manage-pop { z-index: var(--z-dropdown-menu); min-width: 112px; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-lg); } .emp-manage-pop button { border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 12px; text-align: left; padding: 6px 8px; } .emp-manage-pop button:hover, .emp-manage-pop button:focus-visible { background: var(--accent-soft); outline: none; } .emp-manage-delete { color: var(--danger) !important; } .conv-employee-group--removed .conv-employee-tab-label { color: var(--muted); letter-spacing: 0; text-transform: none; } .emp-removed-pill { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 5px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .emp-del-confirm { margin-left: 28px; margin-right: 4px; } /* Issue #1008: No FRAIM employee group modifier */ /* R4: dashed avatar placeholder — no image or persona initials */ .conv-employee-avatar--absence, .identity-avatar--absence { border-style: dashed; border-color: var(--muted); background: transparent; color: transparent; } /* R5/R7: muted label color for the No FRAIM employee group header */ .conv-employee-group--adhoc .conv-employee-tab-label { color: var(--muted); font-weight: 600; } .conv-persona-name--absence { color: var(--muted); font-weight: 600; } .conv-employee-list { display: grid; gap: 8px; min-width: 0; padding-left: 23px; } .conv-item { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: var(--text); box-shadow: none; } .conv-item:hover { background: var(--soft); } .conv-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .conv-item.active { background: var(--accent-soft); border-color: rgba(31, 67, 125, 0.25); box-shadow: none; } /* Text column: stacks persona name label above job title */ .conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .conv-persona-name { font-size: 10px; font-weight: 700; color: var(--accent-strong); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Issue #851: role subtitle in the Project Employees roster row. */ .conv-persona-role { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-title { font-size: 17px; font-weight: 700; min-width: 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .conv-persona-chip { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--accent-strong); overflow: hidden; line-height: 1; text-transform: uppercase; } .conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; } .conv-persona-chip--free { background: transparent; border-color: var(--line); color: var(--muted); } .conv-status { font-size: 11px; color: var(--muted); font-weight: 500; flex-shrink: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 4px; } .conv-status.running { color: var(--accent); } .conv-status.attention { color: var(--warn); } .conv-status.failed { color: var(--danger); } .conv-status.working { color: var(--state-working); } .conv-status.waiting { color: var(--state-waiting); } .conv-status.complete { color: var(--state-complete); } /* #549 R4: Amber label for manager-stopped runs in the conversation rail. */ .conv-status.stopped { color: var(--warn); } /* Issue #1491: parked-recurring - reuses the accent color, distinct from red/amber/green. */ .conv-status.scheduled { color: var(--accent); } .state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent); } .conv-state-dot { align-self: center; margin-left: auto; } /* Conversation pane */ .conversation { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; height: 100%; overflow: hidden; } .empty-state { display: grid; gap: 8px; place-items: center; text-align: center; color: var(--muted); padding: 80px 16px; } .empty-state::before { content: "F"; width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 22px; } .empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; } .empty-state p { margin: 0; max-width: 320px; } #active-conv { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 14px; min-width: 0; flex: 1; min-height: 0; overflow: hidden; } #active-conv[hidden] { display: none; } .conv-header, .support-stack, .panel-details:not(.panel-details--thread), .micro { flex-shrink: 0; } .conv-topline { display: flex; align-items: center; gap: 12px; } /* #521: Stop button — interrupt a working employee and park it "waiting on you". */ .run-stop-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: #b42318; background: #fef3f2; border: 1px solid #fda29b; border-radius: 14px; padding: 5px 12px; cursor: pointer; transition: background .12s; } .run-stop-btn:hover { background: #fee4e2; } .run-stop-btn:disabled { opacity: .55; cursor: default; } .conversation-focus-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 17px; font-weight: 700; line-height: 1; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 8px; padding: 0; cursor: pointer; } .panel-details--thread .conversation-focus-btn { margin-left: auto; } .conversation-focus-btn:hover { border-color: var(--accent); color: var(--accent); } .conversation-focus-btn:focus-visible, .conversation-focus-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Job title inline with employee avatar — replaces the old separate h2 row */ .conv-job-title { flex: 1; min-width: 0; max-width: 100%; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .run-title-composed { display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%; } .run-title-job, .run-title-separator { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .run-title-kickoff { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-title.run-title-composed { display: flex; } .employee-identity { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .identity-avatar { width: 44px; height: 44px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 15px; font-weight: 700; color: var(--accent-strong); flex-shrink: 0; } .identity-avatar img { width: 100%; height: 100%; object-fit: cover; } .identity-copy { display: flex; flex-direction: column; min-width: 0; } .identity-copy strong { font-size: 16px; font-weight: 700; color: var(--text); } .identity-copy small { font-size: 13px; color: var(--muted); } .run-state-pill { display: inline-flex; align-items: center; justify-content: center; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(31, 67, 125, 0.1); color: var(--accent-strong); } .run-state-pill.running { background: rgba(31, 67, 125, 0.14); } .run-state-pill.working { background: var(--state-working-soft); color: var(--state-working); } .run-state-pill.waiting { background: var(--state-waiting-soft); color: var(--state-waiting); } .run-state-pill.complete { background: var(--state-complete-soft); color: var(--state-complete); } .run-state-pill.failed { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); } .run-state-pill.completed { background: color-mix(in srgb, var(--done) 14%, transparent); color: var(--done); } /* #549 R3: Amber STOPPED pill — intentional pause, distinct from red WAITING ON YOU. */ .run-state-pill.stopped { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); } /* Issue #1491: parked-recurring pill - reuses the "Scheduled" trigger-badge accent color. */ .run-state-pill.scheduled { background: var(--accent-soft, rgba(0, 113, 227, .12)); color: var(--accent); } .run-state-pill.approved { background: color-mix(in srgb, #2e7d32 18%, transparent); color: #2e7d32; font-weight: 800; } /* Issue #1345: job execution mode chip — shown in .conv-topline for Coached-mode jobs. */ .job-mode-chip { font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; cursor: default; position: relative; } .job-mode-chip--in-training { background: rgba(0, 88, 176, 0.10); color: #0058b0; border: 1px solid rgba(0, 88, 176, 0.18); } [data-theme="dark"] .job-mode-chip--in-training { background: rgba(96, 160, 224, 0.14); color: #60a0e0; border-color: rgba(96, 160, 224, 0.22); } .job-mode-chip--in-training .chip-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 260px; background: #fff; border: 1px solid #d0d0d5; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 12px 14px; font-size: 12px; color: #1d1d1f; line-height: 1.6; z-index: var(--z-dropdown-menu); pointer-events: none; white-space: normal; text-transform: none; letter-spacing: normal; font-weight: 400; } [data-theme="dark"] .job-mode-chip--in-training .chip-tooltip { background: #2a2a2e; border-color: #3a3a3f; color: #e8e8ea; } .job-mode-chip--in-training:hover .chip-tooltip { display: block; } .chip-tooltip-section { margin-bottom: 8px; } .chip-tooltip-section:last-child { margin-bottom: 0; } .chip-tooltip-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0058b0; margin-bottom: 2px; } [data-theme="dark"] .chip-tooltip-label { color: #60a0e0; } .conv-header { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; } .title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .conv-header h2 { flex: 1 1 auto; min-width: 0; } #artifact-slot { flex: 0 0 auto; } .conv-header h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; } .conversation-status { display: flex; align-items: flex-start; gap: 12px; min-width: 0; width: 100%; flex: 0 0 auto; } .conversation-status > * { min-width: 0; } .delegation-ledger { display: block; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 0; overflow: hidden; } .delegation-ledger[hidden] { display: none; } .manager-oversight-board { display: block; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%); border-radius: 8px; padding: 0; overflow: hidden; } .manager-oversight-board[hidden] { display: none; } .manager-oversight-board > summary { padding: 12px; } .manager-oversight-board > summary::before { margin-top: 2px; } .manager-oversight-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .manager-oversight-copy { display: grid; gap: 3px; min-width: 0; } .manager-oversight-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .manager-oversight-copy strong { font-size: 15px; color: var(--text); } .manager-oversight-meta { flex-shrink: 0; font-size: 12px; color: var(--muted); } .manager-oversight-list { display: grid; gap: 8px; padding: 0 12px 12px; } .manager-plan-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px; min-width: 0; } .manager-plan-step { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); color: var(--accent); font-size: 12px; font-weight: 800; } .manager-plan-body { display: grid; gap: 4px; min-width: 0; } .manager-plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .manager-plan-top strong, .manager-plan-empty strong { font-size: 12px; color: var(--text); overflow-wrap: anywhere; } .manager-plan-status { flex-shrink: 0; border-radius: 999px; padding: 2px 7px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; } .manager-plan-status.status-running, .manager-plan-status.status-submitted { border-color: color-mix(in srgb, #0b63ce 28%, var(--line)); background: #e8f1ff; color: #0b63ce; } .manager-plan-status.status-reviewed, .manager-plan-status.status-completed { border-color: color-mix(in srgb, #1c7c36 30%, var(--line)); background: #e9f7ee; color: #1c7c36; } .manager-plan-status.status-blocked, .manager-plan-status.status-failed { border-color: color-mix(in srgb, #b3261e 28%, var(--line)); background: #fdecea; color: #b3261e; } .manager-plan-meta, .manager-plan-review, .manager-plan-instructions, .manager-plan-empty span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; } .manager-plan-review { color: var(--text); } .manager-plan-empty { display: grid; gap: 3px; border: 1px dashed var(--line); background: var(--surface); border-radius: 8px; padding: 10px; min-width: 0; } .delegation-ledger > summary { padding: 12px; } .delegation-ledger > summary::before { margin-top: 2px; } .delegation-ledger-body { padding: 0 12px 12px; display: grid; gap: 10px; overflow-y: auto; } .delegation-ledger-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .delegation-ledger-copy { display: grid; gap: 3px; min-width: 0; } .delegation-ledger-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .delegation-ledger-copy strong { font-size: 15px; color: var(--text); } .delegation-ledger-meta { flex-shrink: 0; font-size: 12px; color: var(--muted); } .delegation-ledger-summary { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; } .delegation-task-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .delegation-task { display: grid; gap: 6px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 10px; } .delegation-task-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .delegation-task-assignee { font-size: 12px; font-weight: 700; color: var(--accent-strong); } .delegation-task-status { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 3px 7px; font-size: 10px; font-weight: 800; text-transform: uppercase; background: var(--line); color: var(--muted); } .delegation-task-status.status-running, .delegation-task-status.status-submitted { background: var(--state-working-soft); color: var(--state-working); } .delegation-task-status.status-reviewed, .delegation-task-status.status-completed { background: var(--state-complete-soft); color: var(--state-complete); } .delegation-task-status.status-blocked, .delegation-task-status.status-failed { background: var(--state-waiting-soft); color: var(--state-waiting); } .delegation-task-title { min-width: 0; font-size: 14px; color: var(--text); } .delegation-task-detail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .delegation-task-summary { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text); } .delegation-artifacts { display: flex; flex-wrap: wrap; gap: 6px; } .delegation-artifact, .delegation-review-note, .delegation-view-work { display: inline-flex; width: fit-content; max-width: 100%; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-strong); } .delegation-artifact { border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); cursor: pointer; } .delegation-artifact:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } /* Issue #1021: a child's pull request renders as an in this strip, so the chip is now keyboard-navigable where it was previously only a