/* AGiXT Desktop sidebar styles * Layout, dark theme tuned for an always-on-top sidebar. * Activity/subactivity rendering mirrors the AGiXT web client conventions * (parent group with collapsible children, accent colors per type). */ /* Theme tokens. * * Dark is the default (lives on :root). Light is opt-in via * `` which app.js sets on boot from the user's * saved preference (system / light / dark). When set to system we * reflect the OS `prefers-color-scheme` and live-update on changes. * * Server-delivered desktop extensions reuse these CSS variables, so * flipping the attribute on recolors them automatically without * extension-side code. The few host rules that hardcoded * `rgba(255,255,255,…)` (scrollbar thumb, sidenav muted state, code * background, etc.) are explicitly overridden in the light block below * so the popover doesn't read as "mostly light with a few dark scars." */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: rgba(15, 17, 24, 0.96); --panel: rgba(20, 24, 36, 0.92); --panel-2: rgba(28, 32, 46, 0.92); --panel-hover: rgba(36, 41, 56, 0.92); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --border-muted: rgba(255, 255, 255, 0.05); --text: #e6e8ee; --text-dim: #a1a7b5; --text-faint: #6f7585; --accent: #6b7bff; --accent-2: #9a6cff; --accent-soft: rgba(107, 123, 255, 0.18); /* Third accent — used for small details that benefit from a distinct blue (link hover, sort arrow, info badge, spinner ring). Headings/titles inherit --text instead. */ --accent-blue: #5b8eff; /* User bubble shares --accent so it visually matches the rest of the accent surfaces (send button, audio play / progress / volume, 1x-2x-3x toggle, etc.). One color across every "blue" surface. */ --user-bubble: var(--accent); --assistant-bubble: rgba(36, 41, 56, 0.95); --activity: rgba(60, 80, 130, 0.30); --activity-thought: rgba(120, 90, 200, 0.22); --activity-error: rgba(220, 60, 80, 0.25); --activity-warn: rgba(220, 160, 60, 0.20); --activity-info: rgba(60, 140, 220, 0.20); --code-bg: rgba(255, 255, 255, 0.08); --code-block-bg: rgba(0, 0, 0, 0.4); --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22); --sidenav-icon: rgba(255, 255, 255, 0.55); --sidenav-icon-active: #fff; --sidenav-hover-bg: rgba(255, 255, 255, 0.04); --modal-backdrop: rgba(0, 0, 0, 0.55); --radius: 12px; --radius-sm: 8px; --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* "Dark" — modeled on VSCode Dark Modern. Neutral grayscale chrome (no * blue tint) with the brand accent kept intact. This is the default dark * variant the app resolves to from `system`; the deep-navy theme below * (`data-theme="dark"`, labeled "Dark Blue" in settings) is an explicit * opt-in for users who want the saturated blue palette. The internal * value stays `gray` so existing saved preferences keep working. */ :root[data-theme="gray"] { color-scheme: dark; --bg: #1f1f1f; --panel: #181818; --panel-2: #2a2a2a; --panel-hover: #2f2f2f; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --border-muted: rgba(255, 255, 255, 0.05); --text: #cccccc; --text-dim: #9d9d9d; --text-faint: #6e6e6e; /* Muted blue accent that sits naturally on the neutral gray chrome. Far less saturated than the dark theme's blue-purple — that one bloomed against #1f1f1f. Carries every accent surface (send btn, play/volume/progress in audible, 1x-2x-3x toggle, user bubble). Darkened further so the user bubble + send button don't shout against the muted gray surfaces. */ --accent: #3d6a93; --accent-2: #9a6cff; --accent-soft: rgba(61, 106, 147, 0.20); --accent-blue: #355c81; --user-bubble: var(--accent); --assistant-bubble: #2a2a2a; --activity: rgba(60, 80, 130, 0.22); --activity-thought: rgba(120, 90, 200, 0.18); --activity-error: rgba(220, 60, 80, 0.22); --activity-warn: rgba(220, 160, 60, 0.18); --activity-info: rgba(60, 140, 220, 0.18); --code-bg: rgba(255, 255, 255, 0.06); --code-block-bg: #181818; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.25); --sidenav-icon: rgba(255, 255, 255, 0.55); --sidenav-icon-active: #ffffff; --sidenav-hover-bg: rgba(255, 255, 255, 0.04); --modal-backdrop: rgba(0, 0, 0, 0.55); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } :root[data-theme="light"] { color-scheme: light; --bg: #f5f6fa; --panel: #ffffff; --panel-2: #eef0f5; --panel-hover: #e3e6ee; --border: rgba(15, 17, 24, 0.10); --border-strong: rgba(15, 17, 24, 0.20); --border-muted: rgba(15, 17, 24, 0.05); --text: #1a1d27; --text-dim: #565d6e; --text-faint: #8a90a0; --accent: #4f5dd1; --accent-2: #7a4dff; --accent-soft: rgba(79, 93, 209, 0.14); /* Darker blue so it stays readable against the white panel backgrounds without bloom. Same hue family as GitHub's link blue. */ --accent-blue: #1f6feb; --user-bubble: var(--accent); --assistant-bubble: #ffffff; --activity: rgba(60, 80, 130, 0.08); --activity-thought: rgba(120, 90, 200, 0.10); --activity-error: rgba(220, 60, 80, 0.10); --activity-warn: rgba(220, 160, 60, 0.12); --activity-info: rgba(60, 140, 220, 0.10); --code-bg: rgba(15, 17, 24, 0.06); --code-block-bg: #f1f3f8; --scrollbar-thumb: rgba(15, 17, 24, 0.18); --scrollbar-thumb-hover: rgba(15, 17, 24, 0.32); --sidenav-icon: rgba(15, 17, 24, 0.55); --sidenav-icon-active: #1a1d27; --sidenav-hover-bg: rgba(15, 17, 24, 0.05); --modal-backdrop: rgba(15, 17, 24, 0.40); --shadow: 0 12px 32px rgba(15, 17, 24, 0.12); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: var(--font); color: var(--text); background: transparent; overflow: hidden; /* Hard-clip at the window border. Any internal area that needs * scrolling (chat log, auth fields when small) handles its own * overflow inside the popover — never the body, otherwise we'd get * a chrome scrollbar that looks awful. */ } /* ---------- Tray-anchored popover ---------- * * The window is shown/hidden as a unit at the OS level. The `.dock-panel` * fills the whole window — borders + shadow give it the visual identity * of a Discord/Slack-style menu popover. */ .dock-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } /* Borderless windows don't get OS-native resize edges, so we render * our own grip corners. Tauri 2 ships with built-in resize behavior * for elements with the `data-tauri-resize-*` attributes. */ .resize-handle { position: fixed; width: 16px; height: 16px; z-index: 1000; cursor: nwse-resize; } .resize-handle-br { bottom: 0; right: 0; cursor: se-resize; background: linear-gradient(135deg, transparent 0%, transparent 55%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.12) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.18) 75%, transparent 75%, transparent 85%, rgba(255,255,255,0.24) 85%, rgba(255,255,255,0.24) 90%, transparent 90%); border-bottom-right-radius: 14px; } .resize-handle-bl { bottom: 0; left: 0; cursor: sw-resize; background: linear-gradient(225deg, transparent 0%, transparent 55%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0.12) 60%, transparent 60%, transparent 70%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.18) 75%, transparent 75%, transparent 85%, rgba(255,255,255,0.24) 85%, rgba(255,255,255,0.24) 90%, transparent 90%); border-bottom-left-radius: 14px; } .resize-handle:hover { background-color: rgba(255,255,255,0.06); } /* Topbar */ .topbar { display: flex; align-items: stretch; gap: 8px; /* Top padding grows to cover a device status bar / notch when one is reported via env(safe-area-inset-top); on desktop the inset is 0 so the original 8px still applies. Without this the brand mark gets clipped under the system status bar on Android/iOS. */ padding: max(8px, env(safe-area-inset-top)) 10px 8px; background: var(--panel); border-bottom: 1px solid var(--border); cursor: grab; user-select: none; -webkit-user-select: none; /* Anchor for the agent/convo popovers — they use top: 100% to drop down below the topbar. Without `relative` they fall through to the dock-panel and land at the bottom of the window. */ position: relative; } .brand { display: flex; align-items: center; flex-shrink: 0; } .brand-mark { width: 32px; height: 32px; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; } /* When no SVG is available we fall back to a gradient tile + initials. */ .brand-mark.fallback { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.5px; } .brand-mark.fallback img { display: none; } .brand-mark.fallback::after { content: attr(data-fallback); } /* Connection-state dot, overlaid on the logo. Hidden when connected so the topbar stays clean; only shows when there's a problem. */ .brand-conn { position: absolute; bottom: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ffd591; border: 1.5px solid var(--panel); display: block; } .brand-conn.connected { display: none; } .brand-conn.error { background: #ff6b7a; } /* Two stacked rows on the right side of the topbar. The agent chip and icon buttons share the top row; the conversation chip + new-conv button share the bottom row. The stack flexes against the logo so long agent or conversation names get the available width. `position: relative` is the anchor for the agent / convo popover menus inside; their `top: calc(100% + 4px)` lands at the bottom of the stack regardless of whether the stack lives in `.topbar` (popover mode) or has been relocated into the chat pane (window mode). */ .topbar-stack { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; position: relative; } body.auth-mode .topbar-stack { display: none; } /* When the landing iframe is showing, give it the full panel — the landing has its own header + branding, so the desktop topbar would just be redundant chrome above it. The Tauri drag region is still served by the iframe via window-level pointer events. */ body.auth-mode:has(#landing-screen:not([hidden])) .topbar { display: none; } /* Window mode: hide the global topbar (the OS title bar provides the drag region + close, and the brand identity), and slot the agent / conversation chips into the top of the chat pane via the `topbar-stack--in-chat` class added by app.js. Saves the ~76px of vertical chrome the topbar used to claim. */ body.window-mode:not(.auth-mode) .topbar { display: none; } .topbar-stack--in-chat { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--panel); flex: 0 0 auto; } /* Popovers anchored to the in-chat stack drop down INTO the chat surface — make sure they layer above the messages list. */ .topbar-stack--in-chat .popover-menu { z-index: 60; } .topbar-row { display: flex; align-items: center; gap: 4px; min-width: 0; } .topbar-row > .chip-btn { flex: 1 1 auto; min-width: 0; } .icon-btn { width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .icon-btn:hover { background: var(--panel-2); color: var(--text); } .icon-btn[aria-pressed="true"] { background: var(--accent); color: #fff; } /* Chip-style switchers — agent + conversation, hosted in the topbar. */ .chip-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-family: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; /* In the topbar both chips share a single flex track with the action buttons. Allow them to shrink so long agent/conversation names get ellipsised instead of pushing the row over the window width. */ flex: 1 1 0; min-width: 0; max-width: 100%; transition: background 0.12s ease, border-color 0.12s ease; } .chip-btn-icon { flex-shrink: 0; color: var(--text-faint); } .chip-btn:hover { background: var(--panel); border-color: var(--border-strong); } .chip-btn[aria-expanded="true"] { background: var(--panel); border-color: var(--accent); } .chip-btn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; text-align: left; } .popover-menu { position: absolute; top: calc(100% + 4px); left: 8px; right: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50; max-height: 380px; display: flex; flex-direction: column; overflow: hidden; } .popover-menu[hidden] { display: none; } .popover-menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); padding: 8px 10px 4px; } .popover-menu-search { padding: 8px 8px 4px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 1; } .popover-menu-search input { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 9px; font-family: inherit; font-size: 12px; box-sizing: border-box; } .popover-menu-search input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .popover-menu-list { overflow-y: auto; flex: 1; padding: 2px 4px 6px; } .popover-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit; font-size: 12px; color: var(--text); } .popover-menu-item:hover { background: var(--panel-2); } .popover-menu-item.is-selected { color: var(--text); } .popover-menu-item.is-selected .popover-menu-check { color: #5dd28f; } .popover-menu-check { width: 14px; flex-shrink: 0; color: transparent; } .popover-menu-item .agent-name { font-weight: 600; } .popover-menu-item .agent-company { color: var(--text-faint); font-size: 11px; margin-left: 4px; } .popover-menu-footer { border-top: 1px solid var(--border); padding: 4px; } .popover-menu-action { width: 100%; text-align: left; background: transparent; border: none; padding: 8px; font-family: inherit; font-size: 12px; color: var(--accent); cursor: pointer; border-radius: 6px; } .popover-menu-action:hover { background: var(--panel-2); } .convo-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .convo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .convo-time { font-size: 10.5px; color: var(--text-faint); } /* Chat scroll area */ .chat { flex: 1; overflow-y: auto; padding: 14px 12px; /* Flex column + `margin-top: auto` on `.messages` (below) anchors a short conversation to the bottom of the scroller so the latest activity sits just above the composer instead of floating at the top of an empty pane. When content grows past the visible height the auto-margin collapses and ordinary scrolling resumes. */ display: flex; flex-direction: column; /* `scroll-behavior: smooth` was here but it animates *user* scroll wheel events too, which makes the scrollbar feel sluggish when the user is just trying to skim the conversation. Programmatic scrolls (auto-scroll-to-bottom in chat.js) set scrollTop directly and don't need a CSS smooth — they're already instant. */ /* CSS scroll anchoring keeps the visible content pinned when chat content reflows (e.g. when the chat pane width changes from a resize-handle drag or a layout transition into window mode). */ overflow-anchor: auto; } .empty-state { text-align: center; color: var(--text-dim); margin-top: 60px; padding: 0 16px; } .empty-state-icon { font-size: 32px; margin-bottom: 8px; } .empty-state-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .empty-state-body { font-size: 13px; line-height: 1.5; } .messages { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } /* Message bubble */ .message { display: flex; flex-direction: column; max-width: 100%; } .message-row { display: flex; gap: 8px; align-items: flex-end; } .message-user { align-items: flex-end; } .message-user .message-row { justify-content: flex-end; } .message-assistant .message-row { justify-content: flex-start; } /* Timestamp pinned to the bubble's bottom edge. Hidden until the user hovers the message row. The full date sits in the title attribute. */ .message-ts { font-size: 10px; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; padding-bottom: 4px; opacity: 0; transition: opacity 0.12s ease; } .message-row:hover .message-ts { opacity: 1; } .bubble { border-radius: var(--radius); padding: 10px 12px; font-size: 13px; line-height: 1.5; max-width: 92%; word-wrap: break-word; overflow-wrap: anywhere; } .message-user .bubble { background: var(--user-bubble); color: #fff; border-bottom-right-radius: 4px; } .message-assistant .bubble { background: var(--assistant-bubble); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .message-meta { font-size: 10px; color: var(--text-faint); margin-top: 2px; padding: 0 4px; } /* Activity groups */ .activity { background: var(--activity); border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 4px 0; overflow: hidden; font-size: 12px; } .activity[data-type="thought"] { background: var(--activity-thought); } .activity[data-type="error"] { background: var(--activity-error); } .activity[data-type="warn"] { background: var(--activity-warn); } .activity[data-type="info"] { background: var(--activity-info); } .activity-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; user-select: none; color: var(--text-dim); } .activity-head .chev { transition: transform 0.15s ease; } .activity[aria-expanded="true"] .activity-head .chev { transform: rotate(90deg); } .activity-title { flex: 1; font-weight: 500; color: var(--text); } .activity-elapsed { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; flex: 0 0 auto; } .activity-elapsed:empty { display: none; } .activity-spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-faint); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display: none; } .activity[data-running="true"] .activity-spinner { display: inline-block; } .activity-body { padding: 0 10px 8px 28px; display: none; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-size: 11.5px; color: var(--text-dim); } .activity[aria-expanded="true"] .activity-body { display: block; } .tool-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim); margin: 4px 0 4px; align-self: flex-start; } .tool-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; } .tool-chip.pending .tool-chip-dot { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; } .tool-chip.ok .tool-chip-dot { background: #5dd28f; } .tool-chip.error { color: #ff8a96; border-color: rgba(255,138,150,0.3); } .tool-chip.error .tool-chip-dot { background: #ff8a96; } .subactivity { display: flex; gap: 8px; padding: 6px 0; align-items: flex-start; } .subactivity + .subactivity { border-top: 1px dashed var(--border); } .subactivity .sub-icon { flex: 0 0 auto; width: 16px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--text-faint); user-select: none; } .subactivity .sub-content { flex: 1 1 auto; min-width: 0; } .subactivity .sub-content .md { font-size: 11.5px; line-height: 1.45; } .subactivity[data-tag="THOUGHT"] .sub-icon { color: #c4b3ff; } .subactivity[data-tag="THOUGHT"] .sub-content { color: #c4b3ff; } .subactivity[data-tag="ERROR"] .sub-icon, .subactivity[data-tag="ERROR"] .sub-content { color: #ff8a96; } .subactivity[data-tag="WARNING"] .sub-icon, .subactivity[data-tag="WARNING"] .sub-content { color: #ffd591; } .subactivity[data-tag="INFO"] .sub-icon { color: #8bc7ff; } .subactivity[data-tag="CLIENT_TOOL"] .sub-icon { color: #9ee0a3; } .subactivity[data-tag="REMOTE"] .sub-icon { color: #74c2ff; } .subactivity[data-tag="DIAGRAM"] .sub-icon { color: #d8a3ff; } .subactivity[data-tag="EXECUTION"] .sub-icon { color: #ffc36b; } /* Tool-call group: one collapsed line per tool call ("Called ") * that, when expanded, reveals the request payload + every follow-up * subactivity (REMOTE queue, REMOTE complete, received result, uploads). */ details.sub-tool-group { margin: 4px 0; } details.sub-tool-group > summary.sub-tool-group-summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); padding: 3px 8px; border-radius: 5px; border: 1px solid transparent; background: rgba(158, 224, 163, 0.04); } details.sub-tool-group > summary.sub-tool-group-summary::-webkit-details-marker { display: none; } details.sub-tool-group > summary.sub-tool-group-summary::before { content: '▸'; display: inline-block; width: 10px; font-size: 10px; color: #9ee0a3; transition: transform 0.15s ease; } details.sub-tool-group[open] > summary.sub-tool-group-summary::before { transform: rotate(90deg); } details.sub-tool-group > summary.sub-tool-group-summary:hover { border-color: rgba(158, 224, 163, 0.25); background: rgba(158, 224, 163, 0.08); } .sub-tool-group-body { margin-top: 6px; padding: 6px 8px; border-left: 2px solid rgba(158, 224, 163, 0.2); margin-left: 6px; display: flex; flex-direction: column; gap: 4px; } /* CLIENT_TOOL — collapsed by default, expands on click */ details.sub-tool { margin: 0; } details.sub-tool > summary.sub-tool-summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; } details.sub-tool > summary.sub-tool-summary::-webkit-details-marker { display: none; } details.sub-tool > summary.sub-tool-summary::before { content: '▸'; display: inline-block; width: 10px; font-size: 10px; color: var(--text-faint); transition: transform 0.15s ease; } details.sub-tool[open] > summary.sub-tool-summary::before { transform: rotate(90deg); } details.sub-tool > summary.sub-tool-summary:hover { border-color: var(--border); background: rgba(255, 255, 255, 0.03); } .sub-tool-name { font-family: var(--mono); font-size: 11px; color: #9ee0a3; background: rgba(158, 224, 163, 0.08); padding: 1px 6px; border-radius: 4px; } .sub-tool-pre { margin: 6px 0 0; font-family: var(--mono); font-size: 10.5px; background: rgba(0, 0, 0, 0.35); padding: 6px 8px; border-radius: 5px; overflow-x: auto; white-space: pre; color: var(--text-dim); } /* EXECUTION — first line is the disclosure summary, body holds json args / * code / command output behind a click so the chat isn't a wall of tool I/O. */ details.sub-exec { margin: 0; width: 100%; min-width: 0; } details.sub-exec > summary.sub-exec-summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); padding: 2px 6px; border-radius: 4px; border: 1px solid transparent; max-width: 100%; } details.sub-exec > summary.sub-exec-summary::-webkit-details-marker { display: none; } details.sub-exec > summary.sub-exec-summary::before { content: '▸'; display: inline-block; width: 10px; font-size: 10px; color: #ffc36b; transition: transform 0.15s ease; flex: 0 0 auto; } details.sub-exec[open] > summary.sub-exec-summary::before { transform: rotate(90deg); } details.sub-exec > summary.sub-exec-summary:hover { border-color: rgba(255, 195, 107, 0.25); background: rgba(255, 195, 107, 0.06); } .sub-exec-title { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-exec-title p { margin: 0; display: inline; } .sub-exec-body { margin-top: 6px; padding: 6px 8px; border-left: 2px solid rgba(255, 195, 107, 0.2); margin-left: 6px; font-size: 11.5px; line-height: 1.45; } .sub-exec-body pre { background: rgba(0, 0, 0, 0.35); padding: 6px 8px; border-radius: 5px; overflow-x: auto; } .codex-events { display: flex; flex-direction: column; gap: 5px; } .codex-step .sub-exec-summary { background: rgba(158, 224, 163, 0.04); } .codex-step .sub-exec-title { display: inline-flex; align-items: center; gap: 6px; } .codex-response { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 6px; } /* REMOTE / command result terminal block */ .sub-remote { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .sub-remote-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: rgba(116, 194, 255, 0.08); font-size: 11px; } .sub-remote-name { font-family: var(--mono); color: #74c2ff; } .sub-remote-exit { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 999px; } .sub-remote-exit.ok { color: #5dd28f; background: rgba(93, 210, 143, 0.12); } .sub-remote-exit.err { color: #ff8a96; background: rgba(255, 138, 150, 0.15); } .sub-remote-out, .sub-remote-err { margin: 0; padding: 6px 8px; font-family: var(--mono); font-size: 10.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; background: rgba(0, 0, 0, 0.35); color: var(--text); } .sub-remote-err { color: #ff8a96; } /* Markdown content inside bubbles */ .md p { margin: 0 0 8px; } .md p:last-child { margin-bottom: 0; } /* Chapter / section titles in agent responses inherit the body text color (--text), which reads as white on dark/gray and as near-black on light. Earlier we colored these with --accent-blue, but on the gray theme that bloomed against the muted chrome — the user preferred a plain bold heading. --accent-blue is still available for small accents (links, sort arrows, info badges). */ .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 14px 0 6px; line-height: 1.25; } .md h1 { font-size: 19px; font-weight: 700; } .md h2 { font-size: 16px; font-weight: 700; } .md h3 { font-size: 14px; font-weight: 600; } .md h4, .md h5, .md h6 { font-size: 13px; font-weight: 600; } .md > h1:first-child, .md > h2:first-child, .md > h3:first-child, .md > h4:first-child { margin-top: 0; } /* Bubble text is white (or whatever the accent's foreground reads as); force markdown links inside it to inherit so they don't drop to the global --accent color and lose contrast on the bubble background. */ .message-user .md a { color: inherit; } .md code { font-family: var(--mono); font-size: 12px; background: var(--code-bg); padding: 1px 4px; border-radius: 4px; } .md pre { background: var(--code-block-bg); padding: 8px 10px; border-radius: 6px; overflow-x: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.4; margin: 6px 0; } .md pre code { background: transparent; padding: 0; } .md a { color: var(--accent); text-decoration: none; } .md a:hover { text-decoration: underline; } .md ul, .md ol { padding-left: 22px; margin: 6px 0; } .md li { margin: 2px 0; } .md img, .md video { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; } .md video { background: #000; } .md audio { width: 100%; margin: 6px 0; } .md table { border-collapse: collapse; margin: 6px 0; font-size: 11.5px; } .md th, .md td { border: 1px solid var(--border); padding: 4px 6px; text-align: left; } .md blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--accent); color: var(--text-dim); } .md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } /* Composer */ .composer { background: var(--panel); padding: 6px 10px; /* No top border — keeps the composer continuous with the sidenav at the bottom-left corner so they read as one control surface framing the chat content. */ } .composer-row { display: flex; align-items: center; gap: 6px; } .composer-input { flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-family: inherit; font-size: 13px; line-height: 1.4; resize: none; min-height: 32px; max-height: 160px; } .composer-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } /* Composer buttons share a footprint with the sidenav buttons so the "control surface" reads uniformly across the left rail and the bottom bar. Same 32×32, same 8px corners, same border-less hover highlight (already inherited from `.icon-btn:hover`). */ .composer-row .icon-btn, .composer-row .send-btn { width: 32px; height: 32px; flex-shrink: 0; } .composer-row .icon-btn { border-radius: 8px; border: none; } .send-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: var(--accent); color: #fff; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s ease; } .send-btn:hover { background: var(--accent-2); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Send/stop swap. The `display: flex` on .send-btn would normally override the HTML `hidden` attribute (UA `display: none`), so without this both buttons render side-by-side. Defer to [hidden] explicitly. */ .send-btn[hidden] { display: none; } /* Stop button shares the send-btn footprint (already covered by the .composer-row .send-btn rule) but reads as a destructive action. */ .send-btn.stop-btn { background: #e34555; } .send-btn.stop-btn:hover { background: #c83a48; } .send-btn.stop-btn svg { display: block; } .composer-status { font-size: 11px; color: var(--text-faint); margin-top: 2px; min-height: 0; } .composer-status:empty { display: none; } .composer-status.error { color: #ff8a96; } /* Attachments tray sits above the composer row. Chips show the file's basename with the full path on hover, and an × to drop it before sending. The selected files are local-only — they get cleared after the message goes out. The [hidden] override is load-bearing: without it the `display: flex` would override the HTML hidden attribute and the empty tray would keep reserving margin above the composer. */ .attachments { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .attachments[hidden] { display: none; } .attachment-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11px; color: var(--text); max-width: 100%; } .attachment-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; } .attachment-remove { width: 18px; height: 18px; border-radius: 50%; border: none; background: transparent; color: var(--text-faint); font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .attachment-remove:hover { background: var(--border); color: var(--text); } .attach-btn { color: var(--text-dim); } .attach-btn:hover { color: var(--text); } /* Mic button — tap to record, tap again to stop+transcribe+send. The data-state attribute toggles which inner glyph is visible. */ .mic-btn { color: var(--text-dim); position: relative; } .mic-btn:hover { color: var(--text); } .mic-btn .mic-icon-idle, .mic-btn .mic-icon-recording, .mic-btn .mic-icon-busy { display: none; } .mic-btn[data-state="idle"] .mic-icon-idle { display: inline-block; } .mic-btn[data-state="recording"] { color: #fff; background: #e34555; border-color: #e34555; } .mic-btn[data-state="recording"] .mic-icon-recording { display: inline-block; width: 10px; height: 10px; background: #fff; border-radius: 2px; animation: mic-pulse 1.2s ease-in-out infinite; } .mic-btn[data-state="busy"] .mic-icon-busy { display: inline-block; animation: spin 0.8s linear infinite; } @keyframes mic-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.7; } } .composer-status.speaking { color: #5dd28f; } /* Child role shell: keep the chat available, but make voice the primary action and remove administrative/navigation affordances. */ body.child-mode .topbar-stack > .topbar-row:first-child, body.child-mode #btn-agent-training, body.child-mode #btn-share, body.child-mode #btn-delete-conversation, body.child-mode .sidenav-btn[data-view]:not([data-view="chat"]):not([data-view="xtschool"]):not([data-view^="xtschool_"]):not([data-view="audible"]), body.child-mode .sidenav-more-btn, body.child-mode .sidenav-more-popover, /* The "Put your agent to work" suggestion strip above the composer doesn't belong in the kid surface — kids talk to AGiXT through the mic, not through agent-management prompt builders. */ body.child-mode #prompt-guidance { display: none !important; } body.child-mode .composer { padding: 12px 16px 14px; } body.child-mode .attachments, body.child-mode #btn-attach, body.child-mode #btn-workspace, body.child-mode #composer-input, body.child-mode #btn-send { display: none !important; } body.child-mode .composer-row { justify-content: center; } body.child-mode #btn-mic { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } body.child-mode #btn-mic:hover:not(:disabled) { background: var(--accent-2); } body.child-mode #btn-mic:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } body.child-mode #btn-mic svg { width: 28px; height: 28px; } body.child-mode #btn-mic .mic-icon-recording { width: 18px; height: 18px; } body.child-mode .composer-status { margin-top: 8px; text-align: center; font-size: 12px; } /* Auth screen */ .auth-screen { flex: 1; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 18px; min-height: 0; } .auth-screen[hidden] { display: none; } /* Landing screen — pre-auth marketing page hosted in an iframe so the brand's CSS stays isolated from the desktop client's tokens. The floating "Sign in" pill in the top-right is rendered by the host (not the iframe) so it works even if a brand forgets to add an auth CTA. */ .landing-screen { flex: 1; display: flex; position: relative; min-height: 0; background: var(--bg); } .landing-screen[hidden] { display: none; } .landing-screen iframe { flex: 1; width: 100%; height: 100%; border: 0; background: var(--bg); } .chat-screen { flex: 1; display: flex; flex-direction: row; min-height: 0; } .chat-screen[hidden] { display: none; } /* Trial / billing lifecycle banner — appears at the top of the dock-panel (directly under the topbar) so it spans the full window width and is visually unmissable, instead of being squeezed into the chat column. */ .trial-banner { flex: 0 0 auto; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, #ffb774 34%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, #ffb774 16%, var(--panel)), color-mix(in srgb, var(--panel) 92%, #5dd28f 8%)); color: var(--text); } .trial-banner-icon { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #ffcf8a; background: color-mix(in srgb, #ffb774 18%, var(--panel-2)); border: 1px solid color-mix(in srgb, #ffb774 24%, var(--border)); } .trial-banner-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .trial-banner-title { font-size: 13px; font-weight: 700; color: var(--text); } .trial-banner-copy { font-size: 12px; line-height: 1.35; color: var(--text-dim); } .trial-banner-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .trial-banner-btn, .trial-banner-primary, .trial-banner-close { height: 32px; border-radius: 8px; border: 1px solid var(--border); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } .trial-banner-btn { padding: 0 12px; background: var(--panel-2); color: var(--text); } .trial-banner-primary { padding: 0 13px; background: var(--accent); border-color: var(--accent); color: #fff; } .trial-banner-close { width: 32px; padding: 0; background: transparent; color: var(--text-dim); } .trial-banner-btn:hover, .trial-banner-close:hover { background: var(--panel-hover); color: var(--text); } .trial-banner-primary:hover { filter: brightness(1.07); } .trial-banner-info { border-bottom-color: color-mix(in srgb, #8bc7ff 34%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, #8bc7ff 14%, var(--panel)), color-mix(in srgb, var(--panel) 92%, #5dd28f 8%)); } .trial-banner-info .trial-banner-icon { color: #8bc7ff; background: color-mix(in srgb, #8bc7ff 18%, var(--panel-2)); border-color: color-mix(in srgb, #8bc7ff 24%, var(--border)); } .trial-banner-bad { border-bottom-color: color-mix(in srgb, #ff8a96 36%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, #ff8a96 14%, var(--panel)), color-mix(in srgb, var(--panel) 92%, #ffb774 8%)); } .trial-banner-bad .trial-banner-icon { color: #ff8a96; background: color-mix(in srgb, #ff8a96 18%, var(--panel-2)); border-color: color-mix(in srgb, #ff8a96 24%, var(--border)); } @media (max-width: 760px) { .trial-banner { grid-template-columns: auto minmax(0, 1fr); } .trial-banner-actions { grid-column: 1 / -1; justify-content: flex-start; } } /* Right-hand pane that hosts the active view's content. The sidenav sits to its left and we want this column to shrink/grow to fill the remaining width. min-width:0 lets the inner chat scroller behave correctly inside the flex row. */ .chat-screen-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; } /* One pane per registered section. Active pane fills the column; all others are display:none via [hidden]. Each pane manages its own internal layout (chat: scroller + composer; future sections can render whatever fits). */ .view-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; } .view-pane[hidden] { display: none; } /* Server-delivered extension pages get a default scroll container so they don't bleed past the dock-panel; extensions can still set their own overflow on their root if they need fixed footers/etc. */ .view-pane.view-pane-extension { overflow: auto; } /* Framed layout (manifest opt-in: `"layout": "framed"`). The host draws a thin header strip — same color as the topbar + sidenav so the chrome reads as one continuous band across the top of the window — with the manifest label as the title and a flex actions slot the extension can populate via `ctx.headerActionsEl` / `ctx.setHeaderActions(...)`. The body below it is where the extension mounts its content; it owns its own scroll so the header stays pinned. Switching from `view-pane.view-pane-extension`'s default `overflow: auto` to `overflow: hidden` here is what makes that pinning work. */ /* `:not([hidden])` is load-bearing: without it the `display: flex` below outranks `.view-pane[hidden] { display: none }` (specificity 30 vs 11) and every framed pane renders simultaneously, stacking their headers down the chat-screen-main column. */ .view-pane.view-pane-extension.is-framed:not([hidden]) { overflow: hidden; display: flex; flex-direction: column; } .ext-pane-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); flex: 0 0 auto; min-height: 0; /* Stacking context — needed so absolutely-positioned dropdowns anchored inside the header (e.g. the machines column picker) paint OVER the body's content. Without it the body, being a later sibling, paints over header descendants. */ position: relative; z-index: 2; } .ext-pane-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin: 0; flex: 0 0 auto; color: var(--text); } .ext-pane-actions { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; /* Push actions to the right by default — extensions typically put a refresh icon, search input, and column picker here. */ justify-content: flex-end; } .ext-pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; /* Flex column so extensions can rely on `height: 100%` / `flex: 1` children resolving against a definite parent. The list view in machines uses `min-height: 100%` (single child grows to fill + content beyond scrolls); the detail / remote views use `height: 100%` with their OWN inner overflow:auto on the detail body — that pattern needs the parent to be a flex container with a definite height, otherwise the child collapses. */ display: flex; flex-direction: column; } /* Host-side polish overlay — improves the default look-and-feel of server-delivered extensions without touching their own scoped CSS. Hover lift on action buttons, accent focus ring on inputs/selects, slightly heavier card presence with subtle inner highlight on the top edge. Each rule targets the common class shapes the extensions use (`*-table`, `*-card`, `*-primary`, `*-secondary`, `*-search`, `*-tab`, etc.) so they pick the polish up without per-page edits. */ .view-pane-extension button { transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.08s ease, box-shadow 0.14s ease; } .view-pane-extension button:active:not(:disabled) { transform: translateY(0.5px); } .view-pane-extension button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .view-pane-extension input:focus, .view-pane-extension select:focus, .view-pane-extension textarea:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(107, 123, 255, 0.18) !important; } .view-pane-extension input[type="search"], .view-pane-extension input[type="text"], .view-pane-extension input[type="email"], .view-pane-extension input[type="password"], .view-pane-extension select, .view-pane-extension textarea { font-family: var(--font); } /* Bump card presence — extensions use varied class prefixes (mx-card, co-card, ct-card, …); target every outer `-card` class without bleeding into their `-card-*` subelements. The previous selector `[class*="-card"]` matched any class string containing "-card" anywhere, which silently also matched `mx-card-head`, `mx-card-title`, `mx-card-body`, `co-card-content`, etc. Each match drew a 1px inset top-highlight, producing visible hairlines next to card titles (the "lines in the table headers" bug reported on /machines). The two-clause selector below restricts the match to classes that either *end* with `-card` (the only class on the element) OR are followed by a space (one of multiple classes on the element). `mx-card-head` matches neither, so nested subelements no longer pick up the polish. */ .view-pane-extension [class$="-card"], .view-pane-extension [class*="-card "] { position: relative; } .view-pane-extension [class$="-card"]::before, .view-pane-extension [class*="-card "]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Table wrapper polish — soft shadow on the rounded box. */ .view-pane-extension [class*="-table-wrap"] { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 18px rgba(0, 0, 0, 0.22); } /* Active filter pill gets a subtle accent glow. */ .view-pane-extension [class*="-tab"].is-active { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--accent) inset; } /* Primary action buttons — accent glow on hover so the call-to-action reads stronger than the secondary buttons next to it. */ .view-pane-extension [class*="-primary"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.1) inset; } .view-pane-extension [class*="-primary"]:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 2px 6px rgba(107, 123, 255, 0.32), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } /* Page title spacing tweak — more breathing room above the table. */ .view-pane-extension h2[class*="-title"] { font-feature-settings: "ss01", "ss02", "cv11"; } /* Make code/mono cells slightly more visible against the bg. */ .view-pane-extension code { letter-spacing: 0.005em; } /* Slicker page-header structure — push search inputs to the right edge so the title + action buttons cluster on the left, and give each header more breathing room. Targets the common class shapes (`*-title-row`, `*-search`, `*-tabs`) so every extension picks the spacing up without per-page edits. */ .view-pane-extension [class*="-title-row"] { gap: 10px; align-items: center; flex-wrap: wrap; row-gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); margin-bottom: 4px; } .view-pane-extension [class*="-title-row"] > [class*="-search"] { margin-left: auto; } .view-pane-extension [class*="-title-row"] > h2[class*="-title"] { margin-right: 8px; /* small visual gap between title text and the action buttons that follow */ } /* Filter-tab row — extra top space so it isn't visually fused to the action buttons above it. */ .view-pane-extension [class*="-tabs"] { padding-top: 4px; } /* Server-registered sidenav buttons either render a built-in monochrome SVG (resolved from the icon registry by name) or fall back to text/emoji. Sized to match the static chat + settings SVG icons so the rail reads as one coherent control surface. */ .sidenav-btn-icon { font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .sidenav-btn-icon svg { display: block; width: 20px; height: 20px; } /* Workspace-open layout — chat pane stays visible alongside the workspace editor. `.chat-screen-main` flips to a row, the chat pane takes a fixed slim column, and `#workspace-screen` (mounted as a sibling by workspace.js) fills the rest. */ /* Window-mode: the popover has been promoted to a real OS window. The chat pane stays alongside any extension/workspace content via `body.with-content-pane`; when chat is the only thing showing, it fills the whole width. */ body.window-mode .chat-screen-main { flex-direction: row; } body.window-mode .view-pane[data-view="chat"] { flex: 1 1 auto; min-width: 0; } body.window-mode.with-content-pane .view-pane[data-view="chat"] { flex: 0 0 var(--chat-pane-width, 340px); min-width: 0; border-right: 1px solid var(--border); } body.window-mode.chat-collapsed .view-pane[data-view="chat"] { display: none; } body.window-mode .dock-panel { border-radius: 0; border: 0; box-shadow: none; } body.window-mode .resize-handle { display: none; } /* Drag handle between chat pane and content area. Hidden in popover mode and in chat-only window mode (no content next to chat). Doubles as the collapse-chat affordance via a chevron button. */ .chat-resize-handle { display: none; flex: 0 0 4px; background: transparent; cursor: col-resize; position: relative; user-select: none; margin-left: -1px; z-index: 2; } body.window-mode.with-content-pane .chat-resize-handle { display: flex; align-items: center; justify-content: center; } .chat-resize-handle:hover, .chat-resize-handle.is-dragging { background: rgba(107, 123, 255, 0.35); } /* Stacked handle controls — expand (fill window) above, collapse (hide chat) below. Centered on the seam; revealed on hover/focus. */ .chat-handle-actions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 4px; } .chat-expand-btn, .chat-collapse-btn { width: 18px; height: 36px; padding: 0; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease; } .chat-resize-handle:hover .chat-expand-btn, .chat-resize-handle:hover .chat-collapse-btn, .chat-expand-btn:focus-visible, .chat-collapse-btn:focus-visible { opacity: 1; } .chat-expand-btn:hover, .chat-collapse-btn:hover { color: var(--text); background: var(--panel); } /* Expanded — chat fills the whole content area, the content pane (extension or workspace) is hidden. The sidenav icons remain the way back to whatever page was open. Mutually exclusive with the collapsed state. */ body.window-mode.chat-expanded.with-content-pane .view-pane[data-view="chat"] { flex: 1 1 auto; border-right: 0; } body.window-mode.chat-expanded.with-content-pane .chat-screen-main > .view-pane:not([data-view="chat"]), body.window-mode.chat-expanded.with-content-pane .chat-screen-main > #workspace-screen { display: none; } body.window-mode.chat-expanded .chat-resize-handle { display: none; } /* Collapsed re-expand strip — replaces the chat pane when collapsed. */ .chat-collapsed-strip { display: none; flex: 0 0 28px; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 0; gap: 8px; background: var(--panel); border-right: 1px solid var(--border); cursor: pointer; color: var(--text-dim); font-family: inherit; border-top: 0; border-bottom: 0; border-left: 0; } .chat-collapsed-strip:hover { background: var(--panel-2); color: var(--text); } body.window-mode.chat-collapsed .chat-collapsed-strip { display: flex; } body.window-mode.chat-collapsed .chat-resize-handle { display: none; } .chat-collapsed-strip-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } /* ---------- Mobile portrait: one surface at a time -------------------- On a phone in portrait the 340px chat-beside-content split is too cramped, so we collapse to a single active surface. app.js stamps `body.mobile-portrait` from a matchMedia listener (`(orientation: portrait) and (max-width: 820px)`); desktop and landscape never get the class, so every rule below is inert there and the split experience is unchanged. Behaviour: picking a sidenav section shows that page full-width with the agent chat collapsed to the existing pop-open "Chat" strip. Tap the strip and chat slides up as a full-screen overlay over the page; the Back bar returns to the page. This reuses the exact collapse/strip machinery the desktop split already has — the only difference is chat overlays the page instead of taking a side column. */ /* Chat open over a content page: cover the whole content area instead of taking a fixed side column. `.chat-screen-main` is position:relative, so inset:0 fills it (the sidenav is its sibling and stays put). The page stays mounted underneath. When collapsed, the existing `body.window-mode.chat-collapsed .view-pane[data-view="chat"] { display:none }` rule plus the strip still apply unchanged. */ body.mobile-portrait.window-mode.with-content-pane:not(.chat-collapsed) .view-pane[data-view="chat"] { position: absolute; inset: 0; z-index: 40; flex: none; width: 100%; border-right: 0; background: var(--bg); } /* No seam to drag when only one surface shows at a time. */ body.mobile-portrait.window-mode .chat-resize-handle { display: none; } /* The pop-open "Chat" affordance keeps the exact same look it has when collapsed on desktop (the vertical edge strip) so it reads as part of the app rather than a bolted-on mobile control. The only mobile concessions: a slightly wider touch target and a raised z-index so it always stays tappable above page content. Once each page flexes to mobile (no horizontal overflow) the strip is no longer buried, so no special positioning is needed — it stays the inline left-edge column it is on desktop. */ body.mobile-portrait.window-mode.chat-collapsed .chat-collapsed-strip { flex-basis: 38px; z-index: 60; } /* ---- Status bar / notch / home-indicator (mobile only) ------------- In window mode the global `.topbar` (which carried the env(safe-area-inset-top) padding) is hidden, so without this the chat/content surface renders under the device status bar and its top row of controls can't be tapped. Inset the whole app shell by the reported safe areas; on desktop every env() is 0 so this is a no-op. Scoped away from auth-mode because the auth/landing screens keep their own topbar inset. */ body.window-mode:not(.auth-mode) .dock-panel { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ---- Team chat: columns → slide-over drawers (mobile portrait) ----- The Discord-style layout is four side-by-side columns (company rail 56px · channel list 220px · content · member list 220px). On a phone that crushes the message surface to a sliver. Keep the thin company rail inline, but float the channel + member lists as absolute drawers over the content so the conversation always gets the full width. The existing `.tc-channels-collapsed` / `.tc-members-collapsed` rules (display:none) still close them; team-chat.js drives those classes from a transient mobile state so a phone session never overwrites the desktop collapse preference. */ body.mobile-portrait .view-pane-team-chat .tc-body { position: relative; } body.mobile-portrait .view-pane-team-chat .tc-content { flex: 1 1 auto; min-width: 0; } body.mobile-portrait .view-pane-team-chat .tc-channel-list, body.mobile-portrait .view-pane-team-chat .tc-member-list { position: absolute; top: 0; bottom: 0; z-index: 8; width: min(80vw, 300px); box-shadow: 0 0 34px rgba(0, 0, 0, 0.45); } body.mobile-portrait .view-pane-team-chat .tc-channel-list { left: 56px; /* docked just right of the 56px company rail */ } body.mobile-portrait .view-pane-team-chat .tc-member-list { right: 0; } /* ===== Mobile portrait: make every page flex ======================== The panes were designed for a wide desktop split; on a phone their fixed multi-column layouts overflow, producing window-level side-scrollbars and truncated content. These rules (all gated on body.mobile-portrait, so desktop/landscape are untouched) clip the page, turn list+detail layouts into single-surface drawers, and let genuinely-wide content (tables, code) scroll inside its own box instead of widening the whole app. */ /* Nothing produces a window-level horizontal scrollbar or bleeds over the chat strip — every pane clips and scrolls internally. */ body.mobile-portrait .chat-screen-main { overflow: hidden; } /* Tables are the #1 side-scroll culprit. Scroll them inside their own wrapper rather than widening the page — covers the app's own *-table-wrap convention and server-delivered extensions. */ body.mobile-portrait [class*="-table-wrap"], body.mobile-portrait [class*="-table-scroll"], body.mobile-portrait .view-pane-extension [class*="table"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Header / toolbar rows wrap instead of overflowing; tab strips that can't wrap (segmented controls) scroll horizontally. */ body.mobile-portrait .cn-header, body.mobile-portrait .pl-header, body.mobile-portrait .as-header, body.mobile-portrait .as-panel-toolbar, body.mobile-portrait .view-pane-extension [class*="-title-row"], body.mobile-portrait .view-pane-extension [class*="-toolbar"] { flex-wrap: wrap; row-gap: 8px; } body.mobile-portrait .cn-scope-tabs, body.mobile-portrait .pl-scope-tabs, body.mobile-portrait .us-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Workspace: the Files tree becomes a right-side slide-over drawer so the editor always gets the full width (same pattern as team chat). The collapsed 28px re-expand strip is untouched — it's already thin enough and is the affordance to reopen the drawer. */ body.mobile-portrait .wk-body { position: relative; } body.mobile-portrait .wk-sidebar { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: min(82vw, 300px); box-shadow: 0 0 34px rgba(0, 0, 0, 0.45); } body.mobile-portrait .wk-sidebar-resize { display: none; } /* List+editor panes (chains, prompts) already stack via their own ≤720px viewport media query; guarantee the list spans full width and the editor can shrink so neither forces a side-scroll on a phone. */ body.mobile-portrait .cn-list, body.mobile-portrait .pl-list { width: 100%; max-width: 100%; } body.mobile-portrait .cn-editor, body.mobile-portrait .pl-editor, body.mobile-portrait .cn-step-body, body.mobile-portrait .pl-edit-grid { min-width: 0; } /* Inputs / title wrappers that hard-pin a min-width wider than a phone would otherwise blow out their row. */ body.mobile-portrait .as-search-wrap, body.mobile-portrait .cn-editor-titlewrap, body.mobile-portrait .pl-editor-titlewrap { min-width: 0; } /* Generic server-extension safety. Their CSS is delivered, not editable here, so clamp media/code/tables to the viewport and let wide blocks scroll internally; flow rows wrap rather than overflow. */ body.mobile-portrait .view-pane-extension { overflow: auto; } body.mobile-portrait .view-pane-extension img, body.mobile-portrait .view-pane-extension pre, body.mobile-portrait .view-pane-extension table, body.mobile-portrait .view-pane-extension video { max-width: 100%; } body.mobile-portrait .view-pane-extension pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.mobile-portrait .view-pane-extension [class*="-row"], body.mobile-portrait .view-pane-extension [class*="-actions"], body.mobile-portrait .view-pane-extension [class*="-filters"] { flex-wrap: wrap; } /* Back bar — present only while the chat overlay is up on a phone. `order:-1` floats it above the agent/conversation stack that app.js relocates in as the chat pane's first child in window mode. */ .chat-mobile-back { display: none; } body.mobile-portrait.window-mode.with-content-pane:not(.chat-collapsed) .chat-mobile-back { order: -1; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; width: 100%; padding: 11px 14px; background: var(--panel); border: 0; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } body.mobile-portrait.window-mode.with-content-pane:not(.chat-collapsed) .chat-mobile-back:hover { background: var(--panel-2); } body.mobile-portrait.window-mode.with-content-pane:not(.chat-collapsed) .chat-mobile-back:active { background: var(--panel-2); transform: translateY(0.5px); } /* VSCode-style activity bar. Top group lists sections (Chat, …); bottom group is reserved for pinned actions (currently just app settings). New sections are added by dropping a `.sidenav-btn[data-view=…]` into `.sidenav-top` and a matching `.view-pane[data-view=…]` into `.chat-screen-main`. */ .sidenav { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; width: 44px; padding: 8px 0; gap: 2px; background: var(--panel); /* No right border — the panel/bg colour difference is enough of a seam, and the lack of a line lets the sidenav read as part of the same "control surface" as the composer below. */ } .sidenav-top, .sidenav-bottom { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; } /* `min-height: 0` lets the top group shrink below its natural content size when the window is short — without it the flex item floors at `min-height: auto` (content size) and pushes the bottom group off-screen. `overflow: hidden` clips any tail buttons before the JS overflow pass swaps them into the "···" popover, and is what makes `scrollHeight > clientHeight` observable so the reflow can detect the overflow in the first place. */ .sidenav-top { flex: 1 1 auto; min-height: 0; overflow: hidden; } .sidenav-bottom { flex: 0 0 auto; } /* Brand mark slot at the top of the sidenav. Decorative — chat is always present in the application, so the brand replaces what used to be a redundant Chat nav button. */ .sidenav-brand { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; flex-shrink: 0; } .sidenav-brand .brand-mark { width: 28px; height: 28px; } .sidenav-btn { width: 32px; height: 32px; /* Pin the row height — without this, when `.sidenav-top` is squeezed (min-height: 0 lets it shrink below content size), flex-shrink defaults to 1 and the browser compresses each button down to its min-content size (~20px from the inner SVG). That made the icons read as smashed together and also fooled the overflow reflow into measuring shrunken row heights, so it thought every button fit and never invoked the "···" popover. The brand already pins itself the same way (.sidenav-brand has flex-shrink: 0). */ flex-shrink: 0; border-radius: 8px; border: none; background: transparent; /* VSCode activity-bar treatment: muted gray by default, full contrast on hover/active. Icons inherit `currentColor` from the SVG. */ color: var(--sidenav-icon); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; position: relative; transition: color 0.14s ease, background 0.14s ease; } .sidenav-btn:hover { color: var(--sidenav-icon-active); background: var(--sidenav-hover-bg); } .sidenav-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; } .sidenav-btn.is-active { color: var(--sidenav-icon-active); background: transparent; } /* VSCode-style accent rail running along the left edge of the active button. -4px from the button left = flush with the sidenav's left edge (button is 32px in 40px sidenav, centered, so 4px each side). */ .sidenav-btn.is-active::before { content: ""; position: absolute; left: -4px; top: 4px; bottom: 4px; width: 2px; border-radius: 0 2px 2px 0; background: var(--accent); } /* Instant CSS tooltip — replaces the 1.5s browser-default `title` delay with VSCode's "appears immediately on hover" feel. */ .sidenav-btn[data-tooltip] { /* anchor for ::after */ } .sidenav-btn[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 4px; background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transform-origin: left center; transition: opacity 0.08s ease; z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,0.35); } .sidenav-btn:hover[data-tooltip]::after, .sidenav-btn:focus-visible[data-tooltip]::after { opacity: 1; } /* Hide the native browser tooltip on these buttons so we don't get the double-flash of CSS tooltip + system tooltip after the delay. */ .sidenav .sidenav-btn[title] { /* keep the attribute for a11y */ } /* Drag-sort affordances — only middle-group buttons (non-chat, non-admin-slot) are draggable, and only `.sidenav-top` listens for reordering. The is-dragging button fades; the drop target shows a thin accent rail above or below it via box-shadow (the ::before pseudo-element is already in use for the active-state rail). */ .sidenav-btn.is-dragging { opacity: 0.35; cursor: grabbing; } .sidenav-btn.is-drop-above, .sidenav-more-row.is-drop-above { box-shadow: inset 0 2px 0 var(--accent); } .sidenav-btn.is-drop-below, .sidenav-more-row.is-drop-below { box-shadow: inset 0 -2px 0 var(--accent); } /* Overflow handling — when the sidenav can't fit every middle-group button, the tail items get `is-overflow-hidden` (display:none) and a `.sidenav-more-btn` appears as the last visible row. Clicking the More button opens a `.sidenav-more-popover` listing the hidden items; each row activates that view on click and can be dragged into the visible rail to pin it. */ .sidenav-btn.is-overflow-hidden { display: none; } .sidenav-more-btn .more-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin: 0 1px; } .sidenav-more-btn[aria-expanded="true"] { color: var(--sidenav-icon-active); background: var(--sidenav-hover-bg); } .sidenav-more-btn.has-active-hidden::after { /* small dot in the corner indicating an active view is hiding */ /* `::after` is already used by [data-tooltip], so use a separate dot element rendered via a child instead — see .more-active-dot. */ } .more-active-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); pointer-events: none; } .sidenav-more-popover { position: fixed; z-index: 60; min-width: 180px; max-width: 280px; max-height: 70vh; overflow-y: auto; padding: 4px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); display: flex; flex-direction: column; gap: 1px; } .sidenav-more-popover[hidden] { display: none; } .sidenav-more-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; border: none; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; user-select: none; width: 100%; } .sidenav-more-row:hover, .sidenav-more-row:focus-visible { background: var(--sidenav-hover-bg); outline: none; } .sidenav-more-row.is-active { color: var(--sidenav-icon-active); } .sidenav-more-row.is-active::before { content: ""; width: 2px; align-self: stretch; border-radius: 0 2px 2px 0; background: var(--accent); margin-left: -8px; margin-right: 2px; } .sidenav-more-row.is-dragging { opacity: 0.35; cursor: grabbing; } .sidenav-more-row .more-row-icon { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--sidenav-icon); } .sidenav-more-row.is-active .more-row-icon { color: var(--sidenav-icon-active); } .sidenav-more-row .more-row-label { flex: 1 1 auto; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Notification dot — used by the bottom gear when an action (e.g. a downloaded desktop update) is waiting for the user. Subtle so it doesn't compete with other UI. */ .sidenav-btn.has-pending::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); } .auth-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; } .auth-tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 6px; } .auth-tab { flex: 1; background: transparent; border: none; color: var(--text-dim); padding: 8px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; } .auth-tab[aria-selected="true"] { background: var(--accent); color: #fff; } .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); } .field[hidden], .auth-pane[hidden], .auth-row[hidden] { display: none !important; } .field-label { text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; } .field-meta { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; color: var(--text-faint); opacity: 0.7; } .field-hint { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .field input[type="email"], .field input[type="text"], .field input[type="password"], .field input[type="url"], .field select, .field textarea { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-family: inherit; font-size: 12px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--accent); border-color: var(--accent); } /* Native