/* ─── CSS Variables ─────────────────────────────────────────────────────────── */ :root { /* Default: dark theme (GitHub Dark-ish). Override via :root.light for light mode. */ --bg-base: #0d1117; --bg-surface: #161b22; --bg-elevated: #21262d; --bg-card: #1c2128; --bg-hover: #2d333b; --border: #30363d; /* Border color reserved for glass-style capsules (conv-list-toggle, core pickers, search pill, wiki rail toggles, chips). Sits a notch lighter than --border in dark mode so the rim reads as "raised" even when --glass-glare-brightness is dialed low. Applied via the :root[data-style~="glass"] rule near the glass glare block. */ --border-glass: #4a5565; --text-primary: #e6edf3; --text-secondary: #8b949e; /* Body reading-text base. Default 13px keeps today's look; the "Uniform 14px text" toggle flips this to 14px on inline (drives every font-size:var(--fs-body) site, including JS-inlined cssText). */ --fs-body: 13px; /* Conversation list-row vertical padding (the row-height driver). Default 12px (the shorter height the user dialed in via the slider); the dev-GUI "Conv row height" slider still tunes it 8–20px. Selected cards use calc(this - 5px) and a +5px margin so total footprint is constant (no select jitter) at any value — see buildListItem in conversations.js. */ --conv-row-pad-y: 12px; /* Facet avatar/tile grid — the global default for every facet grid (the Discover page AND the add-voice sheet). Value lifted from the Discover grid so its roomier, responsive sizing is the standard: auto-fill columns with a 104px min so tiles keep their width and the count adapts to the container. */ --facet-grid-cols: repeat(auto-fill, minmax(104px, 1fr)); --facet-grid-gap: 16px 10px; /* In dark mode --text-muted aliases --text-secondary on purpose; the original #484f58 read as too dim against the dark surface. Light variants below keep their distinct muted shade. */ --text-muted: #8b949e; /* Accent blue is derived: --accent-blue-base is the raw hex (settable by the Accent color picker; dark/light mode each override below) and --accent-blue-sat-mult is a 0–1 multiplier driven by the "Blue saturation" slider in the Settings → Colors group. The derived --accent-blue value cascades to every consumer (.btn-primary, focus rings, sidebar accents, the iMessage-style Me bubble, etc.) so a single slider re-saturates the whole accent across the app. */ --accent-blue-base: #1c95ff; --accent-blue-sat-mult: 1.0; --accent-blue: hsl(from var(--accent-blue-base) h calc(s * var(--accent-blue-sat-mult)) l); --accent-green: #3fb950; --accent-orange: #d29922; --accent-red: #f85149; --accent-purple: #bc8cff; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-ui: Manrope, sans-serif; --fw-regular: 500; --fw-medium: 600; --fw-semibold: 700; --fw-bold: 800; /* Vertical-padding offset applied to nav rows (sidebar + facets nav). Driven by the dev GUI spacing slider. */ --nav-spacing-offset: 0px; /* Conversation list font scale — separate desktop and mobile so the dev GUI can tune each independently. Inner rows use em so they multiply against this baseline. */ --conv-list-scale-desktop: 1; --conv-list-scale-mobile: 1; --sidebar-width: 220px; --top-bar-height: 56px; /* Radius baseline doubled (formerly sm=8/md=12/lg=20/btn=10). The dev-GUI "Corner radius" slider scales these; 1.00× is the new default. Anyone with a stored hp:radius-scale from before the bump gets it halved once via the migration in index.html's pre-paint loader so the rendered look is preserved. */ --radius-sm: 13px; --radius-md: 19px; --radius-lg: 32px; --radius-pill: 100px; --radius-btn: 16px; --transition: 150ms ease; /* ── Page-header tokens ───────────────────────────────────────────────── Single source of truth for the chrome at the top of every primary view (Conversations, Discover, Account, Help, and the wiki sub-modes Chat / Identity / Edit / Wiki/Sources). Edit these to retune all page headers in one place. The .page-header CSS class below references them. */ --page-header-padding-y: 12px; --page-header-padding-x: 24px; --page-header-title-size: 1.1rem; /* Two height knobs: --page-header-height — wiki center-panel inner headers (Identity / Chat / Wiki sub-views). Defaults to 56px so they stay flush with the wiki sidebar's New Facet wrap and the global top bar. --nav-page-header-height — the 5 main-nav pages (Discover, Facets, Conversations, Account, Help). Tunable via the dev GUI slider so the chrome can be made shorter than the wiki rail. */ --page-header-height: 56px; --nav-page-header-height: 46px; --page-header-mobile-height: 44px; /* Floor the page-header content row at the height of the Conversations search input (28px). Title-only views (Discover/Account/Help/etc.) get the extra space as balanced vertical padding (align-items:center) so every page header outer-renders at the same total height. */ --page-header-content-min-height: 28px; /* ── Input-height token ───────────────────────────────────────────────── Single height for ALL typed-input affordances (text inputs, textareas, search bars, chat composers). 38px matches the chat-composer textarea min-height already used across conversations.js + wiki.js, and aligns with the Send button's padding (8px × 2 + ~22px content). Multiline fields use this as min-height and grow from there. The mobile rule (~line 1715) deliberately overrides to 44px for touch targets. */ --input-height: 38px; /* Selected-facet border opacity multiplier. Range 0–200, default 40. Applied to the border color of an active facet row via color-mix: border-mix-percent = clamp(0%, intensity * 0.5%, 100%) so 0 → invisible border, 40 → 20% opacity (calibrated baseline — subtle rim that reads as selection without dominating), 100 → 50% opacity, 200 → 100% fully opaque. Width stays fixed at 1px — the slider only controls how "lit" the rim color reads. Decoupled from --facet-selected-bg-intensity so border and bg are dialed independently. See cloudflare/pages/components/wiki.js buildSubRow for the consumer. */ --facet-selected-border-intensity: 0; /* Selected-facet background-tint intensity. Range 0–200, default 100. Multiplies the background color-mix percent applied to active rail rows: bg-mix-percent = clamp(0, intensity * 0.18%, 36%). 0 → fully transparent, 100 → 18% tint (baseline), 200 → 36% tint. Decoupled from --facet-selected-border-intensity so the user can dial border and bg independently. */ --facet-selected-bg-intensity: 100; /* Glass-style edge-glare brightness multiplier. Range 0–200, default 20. Scales the ::after layer's opacity (the existing 0.9 in dark / 0.35 in light) by intensity/100, so 0 = invisible glare, 20 = the calibrated default (subtle rim), 100 = the unscaled base, 200 = doubled. Only takes effect under :root[data-style~="glass"] because that's the only place the ::after layer exists. See the "Glass — specular edge glare" block below for the consumer rules. */ --glass-glare-brightness: 20; /* Nav logo (sidebar wordmark) size multiplier. Default 0.85 (= the dial's 85% baseline). The dev-GUI "Nav logo size" slider (Settings ⚙ popover, 50–150%) writes percent/100 into this var on documentElement; .sidebar-wordmark consumes it via transform:scale() from the leading edge. */ --nav-logo-scale: 0.85; /* Incoming message-bubble border intensity. Range 0–200, default 100. Opacity multiplier (intensity * 1%) on the calibrated baseline color color-mix(in srgb, var(--accent-blue) 10%, var(--border)) applied to all 4 edges of the 1px outline around incoming .conv-excerpt-bubble cells under the Liquid/Glass surface styles: 0 → fully transparent border (top, bottom, left, right all gone) 100 → 100% opaque baseline (matches the prior hardcode look) 200 → clamped at 100% by the browser (no-op above 100, kept in the range for slider parity with the other intensity controls) Outgoing "Me" bubbles are unaffected (they're solid var(--accent-blue)). No effect under the Flat surface style — the inline identity-color left bar set by conversations.js is a separate attribute. */ --incoming-bubble-border-intensity: 20; /* Identity-page card depth intensity. Range 0–200. Multiplier on the neutral drop shadow behind .identity-section-card and the .core-upload-cta that sits above the cards on the Core identity page. Purely CSS-internal now (no user control, no localStorage) — driven entirely by theme + hover. Dark mode is the default, so the base resting value is 0 (no shadow at rest); light mode overrides to 200 in its :root.light block. Hover rules below ease this to a per-theme target. The value is @property-registered (see "Identity card depth" block) so it tweens as a number and the box-shadow follows frame-by-frame. */ --identity-card-depth-intensity: 0; } :root.light { /* "Crisp" — default light variant. Near-black text, readable muted. */ --bg-base: #ffffff; --bg-surface: #f5f7fa; --bg-elevated: #ebeef3; --bg-card: #ffffff; --bg-hover: #e1e6ed; --border: #b8bec8; --border-glass: #a8b0c0; --text-primary: #000000; --text-secondary: #1a2236; --text-muted: #3a4255; --accent-blue-base: #1c95ff; --accent-green: #15692e; --accent-orange: #7d5400; --accent-red: #b0151f; --accent-purple: #6c3fc7; /* Identity card depth — light theme rests with a strong shadow (eases DOWN to 100 on hover; see the "Identity card depth" block). Dark mode rests at 0 in :root above and eases IN to 40 on hover. */ --identity-card-depth-intensity: 200; } /* Settings popover shell — anchored to the palette button. The .settings-popover modifier extends this base for the disclosure-grouped layout. */ .theme-variant-popover { position: absolute; top: calc(var(--top-bar-height) + 4px); right: 12px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,0.18); min-width: 200px; } .theme-variant-popover.hidden { display: none; } /* Dev GUI popover — font + accent customization. Reuses .theme-variant-popover shell for positioning; controls below get their own styling. */ .dev-gui-section { padding: 8px 10px; } .dev-gui-section + .dev-gui-section { border-top: 1px solid var(--border); } .dev-gui-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 6px; font-family: var(--font-ui); } .dev-gui-select { width: 100%; padding: 6px 8px; font-size: 0.82rem; background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-ui); cursor: pointer; } .dev-gui-select:focus { outline: none; border-color: var(--accent-blue); } .dev-gui-color-row { display: flex; gap: 8px; align-items: center; } .dev-gui-color { width: 36px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; cursor: pointer; flex-shrink: 0; } .dev-gui-range { width: 100%; cursor: pointer; accent-color: var(--accent-blue); } .dev-gui-reset { width: 100%; padding: 6px 10px; font-size: 0.78rem; background: var(--bg-base); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-ui); transition: background 120ms, color 120ms, border-color 120ms; } .dev-gui-reset:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-blue); } /* Settings popover — disclosure-grouped layout with inner scroll wrapper. Overrides the parent .theme-variant-popover gap/padding so the scroll container + footer can sit edge-to-edge inside the popover shell. */ .settings-popover { gap: 0; padding: 0; overflow: hidden; } .settings-popover-scroll { max-height: min(82vh, 680px); overflow-y: auto; overscroll-behavior: contain; } .settings-popover-footer { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; gap: 8px; flex-shrink: 0; } .settings-popover-footer .dev-gui-reset { margin: 0; flex: 1; } .settings-group { border-bottom: 1px solid var(--border); } .settings-group:last-child { border-bottom: none; } /* Hidden settings groups (e.g. dev-tuning controls suppressed on prod, leaving only the Theme light/dark toggle). Explicit so it beats the footer's display:flex; the .settings-group rule has no display of its own but this keeps both surfaces consistent. */ .settings-group[hidden], .settings-popover-footer[hidden] { display: none !important; } .settings-group-summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: var(--fw-semibold); color: var(--text-primary); font-family: var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase; } .settings-group-summary::-webkit-details-marker { display: none; } .settings-group-summary:hover { background: var(--bg-hover); } /* Revert-sheet per-hunk disclosure rows — suppress the native triangle marker (we render our own rotating circular chevron). */ .revert-hunk-summary { list-style: none; } .revert-hunk-summary::-webkit-details-marker { display: none; } .revert-hunk-summary::marker { content: ''; } /* Small ring spinner for the revert-sheet file headers while their AI summary loads. Reuses the global-search-spin keyframes. */ .revert-file-spinner { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent-blue); border-radius: 50%; animation: global-search-spin 0.7s linear infinite; flex-shrink: 0; } .settings-group-body { padding: 4px 0 8px; } .settings-group-chev { display: inline-block; font-size: 0.7rem; color: var(--text-muted); transition: transform 150ms; transform: rotate(180deg); } .settings-group[open] .settings-group-chev { transform: rotate(0deg); } /* ─── Reset & Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { height: 100%; overflow: hidden; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-ui); font-weight: var(--fw-medium); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Allow children to opt into safe-area insets via env(...) without re-declaring this on every block. */ } /* On mobile, switch the root height from 100% (which resolves against the layout viewport including iOS Safari URL bar) to dynamic viewport height so the actual visible area is what we lay out against. dvh isn't universally supported on older browsers — they fall back to the 100% above. */ @supports (height: 100dvh) { html, body { height: 100dvh; } } body { font-size: var(--fs-body); } /* Form controls AND buttons don't inherit body weight — the UA default is 400 (normal), which reads thin against the app's --fw-medium (600) body text. This was the "thin message input and many places like this", plus buttons that don't use the .btn class (e.g. .sidebar-feedback-btn "Give Feedback", .dev-gui-reset theme-settings toggles) — all unset, all fell to 400. Pin every text-entry surface and button to body weight so they match the UI. Class rules that set their own font-weight (.btn = --fw-medium, .btn-primary, etc.) still win on specificity, so this only lifts the unset ones — non-destructive. */ input, textarea, select, button { font-weight: var(--fw-medium); } a { color: var(--accent-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ─── Scrollbars ─────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* ─── Utility ────────────────────────────────────────────────────────────────── */ .hidden { display: none !important; } /* ─── App Shell ──────────────────────────────────────────────────────────────── */ #app { display: flex; height: 100%; overflow: hidden; } /* ─── Sidebar ────────────────────────────────────────────────────────────────── */ #sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--bg-surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; z-index: 100; transition: width var(--transition); } /* Sidebar: team header */ /* Match the top-bar height so the sidebar→main divider is one straight horizontal line instead of a step. box-sizing keeps the 1px border inside the height budget. Inner items are centered vertically. */ .sidebar-header { height: var(--top-bar-height); box-sizing: border-box; padding: 0 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .sidebar-team-name { font-family: var(--font-ui); font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Wordmark image replacing the plain team-name text in the header. Fills the full header area — grows to take all available width and scales to the tallest size that fits the header height (object-fit:contain preserves the ~4:1 aspect and never crops). Horizontally centered in the header. */ .sidebar-wordmark { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; /* User-resizable nav logo. --nav-logo-scale defaults to 0.85 (the dial's 85% baseline). The dev-GUI "Nav logo size" slider (Settings ⚙ popover) overrides it via a documentElement inline var. transform-origin:center grows/shrinks the wordmark about its center (kept horizontally centered via object-position:center); transform never affects layout, so the flex row, the Beta pill and the core picker never reflow; the scale paints over the header box (overflow:visible) instead of resizing it. */ transform: scale(var(--nav-logo-scale, 0.85)); transform-origin: center; } .sidebar-team-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sidebar-teammate-count { font-size: 10px; color: var(--text-muted); } /* ── Core picker ──────────────────────────────────────────────────────────── Sits between the team brand row and the nav. Single button that opens a listbox of Cores. Switching a Core hits POST /api/cores/:id/activate, swaps the JWT, and hard-reloads so every view rebinds to the new Core's scope. */ .sidebar-core-picker-wrap { position: relative; padding: 10px 12px 4px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .sidebar-core-picker { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 10px 5px 6px; font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-primary); cursor: pointer; text-align: left; transition: background var(--transition), border-color var(--transition); } .sidebar-core-picker:hover { background: var(--bg-hover); border-color: var(--border-strong, var(--border)); } .sidebar-core-picker[aria-expanded="true"] { background: var(--bg-hover); } /* Trailing ⋯ on the Core picker — opens the active Core's edit page. Sits OUTSIDE the picker capsule so its click doesn't toggle the picker menu. Sizing matches the picker's vertical footprint (~28px). */ /* Matches the facet rail rows' ⋯ "Manage" affordance exactly (built inline in wiki.js): bare muted glyph, no background/border chrome, color-only hover. (The mobile top-bar override below keeps a larger touch target.) */ .sidebar-core-edit-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background: transparent; border: none; color: var(--text-muted); font-size: 15px; line-height: 0; cursor: pointer; transition: color var(--transition); } .sidebar-core-edit-btn:hover { color: var(--text-primary); } .sidebar-core-picker-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* App-standard chevron — U+2303 ⌃ rotated via transform so stroke weight stays identical across orientations (matches the disclosure chevron in wiki.js). Closed = points down (rotate 180), open = points up (rotate 0). Animation is driven by the picker button's aria-expanded state, so the existing JS toggle is enough to flip the glyph. */ .sidebar-core-picker-chev { font-size: 1rem; line-height: 1; color: var(--text-secondary); flex-shrink: 0; display: inline-block; transform: rotate(180deg); transition: transform 120ms; } .sidebar-core-picker[aria-expanded="true"] .sidebar-core-picker-chev, .top-bar-core-picker[aria-expanded="true"] .sidebar-core-picker-chev { transform: rotate(0deg); } .sidebar-core-menu { position: absolute; top: calc(100% - 2px); left: 12px; /* Widen beyond the picker capsule so the avatar + display name fit comfortably even for longer Core names. min-width sets the floor; the menu may still grow with the wrapper, and clamps to the viewport on narrow screens. */ min-width: 240px; max-width: calc(100vw - 24px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); /* Float above sidebars, top bar, command palette, global-search dropdown, and rail content. Matches the top-bar Core menu (.top-bar-core-menu) and the global-search-results dropdown so all top-level dropdowns stack at the same tier. Modal overlays (1500+) still sit on top. */ z-index: 1000; font-family: var(--font-ui); } .sidebar-core-menu.hidden { display: none; } .sidebar-core-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 8px 10px; font-family: inherit; font-size: var(--fs-body); color: var(--text-primary); cursor: pointer; text-align: left; } .sidebar-core-menu-item:hover { background: var(--bg-hover); } .sidebar-core-menu-item.is-active { color: var(--accent-blue); font-weight: var(--fw-semibold); } .sidebar-core-menu-item:disabled { opacity: 0.5; cursor: default; } .sidebar-core-menu-check { width: 14px; text-align: center; color: var(--accent-blue); font-size: 11px; flex-shrink: 0; } .sidebar-core-menu-new .sidebar-core-menu-check { color: var(--text-secondary); font-weight: var(--fw-bold); } .sidebar-core-menu-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-core-menu-divider { height: 1px; background: var(--border); margin: 4px 2px; } /* Sidebar: nav */ .sidebar-nav { /* Size to content so the decorative render (.sidebar-render, flex:1) takes the remaining vertical slack and fills the gap toward the footer. Still shrinkable + scrollable when the nav list is taller than the viewport. */ flex: 0 1 auto; padding: 8px 0; overflow-y: auto; } .sidebar-group { margin-bottom: 4px; } .sidebar-group-label { padding: 6px 12px 3px; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav-item { position: relative; display: flex; align-items: center; gap: 8px; /* Height matches the Core picker capsule directly above (.sidebar-core-picker: 18px avatar + 10px padding + 2px border = 30px), so the entire left rail reads as one consistent capsule column. The shared calc(6px + nudge) vertical padding still drives a ~26px content box; the explicit min-height pads it out to 30px without bumping the calc (which other rows like .sidebar-overflow-toggle copy from this pattern). */ min-height: 30px; box-sizing: border-box; padding: calc(6px + var(--nav-spacing-offset)) 10px; /* Leading margin 18px puts the active dot ~6px from the sidebar's outer left edge — same column as the wiki rail's active-edit dot. Tighter than the previous 30px while still leaving the dot fully visible outside the capsule. */ margin: 1px 6px 1px 18px; border-radius: var(--radius-pill); color: var(--text-primary); cursor: pointer; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.2; transition: background var(--transition), color var(--transition); white-space: nowrap; overflow: visible; text-overflow: ellipsis; user-select: none; /* Transparent 1px baseline matches the facet rail rows (wiki.js buildSubRow/facet row) — same hairline language across the whole left rail, and the active state can paint its colored border without causing a 1px layout shift. */ border: 1px solid transparent; background: none; text-align: left; width: calc(100% - 24px); font-family: var(--font-ui); } .sidebar-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-nav-item.active { /* Bg + border opacity track the same intensity sliders the facet rail uses (wiki.js buildSubRow / facet row). Multipliers match exactly: • bg — clamp(0, --facet-selected-bg-intensity, 200) * 0.18% • border — clamp(0, --facet-selected-border-intensity, 200) * 0.5% Fallbacks match the :root defaults (100 / 40) so the main-nav active state and the facet rail's selected-row active state stay visually identical even when the user dials the sliders. */ background: color-mix( in srgb, var(--accent-blue) calc(clamp(0, var(--facet-selected-bg-intensity, 100), 200) * 0.18%), transparent ); border-color: color-mix( in srgb, var(--accent-blue) calc(clamp(0, var(--facet-selected-border-intensity, 40), 200) * 0.5%), transparent ); color: var(--text-primary); font-weight: var(--fw-bold); } /* Active-state leading-edge indicator — small dot in the gutter to the left of the capsule, vertically centered. Mirrors the facets sidebar sub-row dot pattern (buildSubRow in wiki.js) so the whole app uses one active-indicator language. The bottom-tab-bar indicator below mirrors this dot for mobile. */ .sidebar-nav-item.active::before { content: ''; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--accent-blue); border-radius: 50%; pointer-events: none; } /* Sidebar overflow ("⋯ More") — same nav-item chrome as the regular items but anchors a popover with Logs / Onboarding etc. The wrapper is position:relative so the menu can absolute-position relative to the toggle on desktop. */ .sidebar-overflow-wrap { position: relative; } .sidebar-overflow-menu { position: absolute; left: 8px; top: calc(100% + 6px); z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 180px; /* When the menu list overflows it scrolls in place rather than running off the fixed sidebar. */ max-height: calc(100vh - var(--top-bar-height) - 24px); overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); /* z-index/transform tricks here couldn't beat the sidebar's WebGL canvas layer — the menu is now portaled to on open (wireSidebarOverflow), so its stacking is resolved at the document root, above everything. */ } .sidebar-overflow-menu.hidden { display: none; } .sidebar-overflow-option { display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--nav-spacing-offset)) 10px; border: none; background: transparent; border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.2; text-align: left; cursor: pointer; } .sidebar-overflow-option:hover { background: var(--bg-hover); } /* ─── Conversation detail header ──────────────────────────────────────────── Desktop: members + actions inline as a single row at top-bar-height, the bottom border aligning with sibling headers (sidebar header, list-col New Chat sticky, viewHeader). Mobile (max-width: 767px): the two child rows stack — members row keeps top-bar-height with its own bottom border; actions row sits beneath at ~36px with another bottom border. CSS-only switch so the JS DOM stays identical across breakpoints (renderDetail builds both rows always). */ .conv-detail-header { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-shrink: 0; height: var(--top-bar-height); box-sizing: border-box; padding: 0 18px; border-bottom: 1px solid var(--border); } .conv-detail-header-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .conv-detail-header-row--members { flex: 1; flex-wrap: wrap; } .conv-detail-header-row--actions { flex-shrink: 0; justify-content: flex-end; margin-left: auto; } /* Sidebar-toggle icon (SF-symbol-style "sidebar.left"). Visible on every breakpoint — taps anchor to the leading edge of the actions row and toggle the conv-list-col via a class on .conv-body. Trailing action buttons (Distill / Delete / Merge) stay grouped on the trailing edge via Distill's `margin-left: auto` (set in JS). Visual treatment mirrors #wiki-rail-toggle (the hamburger that opens the facets drawer on the wiki page) — bordered elevated capsule, ☰ glyph, primary text color. */ /* Optical centering — `‹›` glyphs render slightly below the bounding-box center because their visual mass sits at x-height. `padding-bottom: 2px` shrinks the inner content area, which (with align-items:center) shifts the glyph up 1px so its optical mid-line lines up with the adjacent label / title text instead of dropping below it. box-sizing:border-box keeps the outer 28×28 footprint unchanged (capsule-standard height). */ .conv-list-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0 0 2px; box-sizing: border-box; /* Full circle + visible border + raised surface so the toggle reads as a real button against the panel in both light and dark themes. The prior bg-hover-only fill disappeared into the surrounding surface. */ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-primary); font-size: 17px; font-weight: var(--fw-semibold); line-height: 1; cursor: pointer; transition: background 120ms, border-color 120ms; flex-shrink: 0; } .conv-list-toggle:hover { background: var(--bg-hover); border-color: var(--text-muted); } /* Hides the conversation list column when the toggle is engaged. Applies on every breakpoint. !important is required — conv-list-col carries an inline `display: flex` set in JS, and inline styles beat class selectors without it. */ .conv-body.conv-list-hidden .conv-list-col { display: none !important; } /* Chain-mode silent rows. Two flavors: - .chain-silent-row--per-facet: one facet stayed silent (avatar + "X stayed silent" label, click "why?" expands the reason inline). - .chain-silent-row (no modifier): all-silent fallback (summary + per-facet reasons list). Both share the muted-text + rounded-tint look so the row visually belongs in the transcript at any --radius scale, instead of reading as a flat strip beside rounded peers (P2 #16). */ .chain-silent-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-elevated) 50%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text-muted); font-size: 0.78rem; font-family: var(--font-ui); font-style: italic; position: relative; } .chain-silent-row--per-facet { flex-direction: row; align-items: center; gap: 8px; } .chain-silent-row__summary { color: var(--text-secondary); font-style: normal; line-height: 1.45; } .chain-silent-row__toggle { align-self: flex-start; background: transparent; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; text-decoration: underline dotted; } .chain-silent-row__details { display: none; margin: 4px 0 0; padding: 0 0 0 16px; list-style: disc; color: var(--text-secondary); font-style: normal; line-height: 1.5; } .chain-silent-row__details > li { margin: 2px 0; } .chain-silent-row__label { font-size: 0.78rem; color: var(--text-muted); font-style: italic; } .chain-silent-row__why { background: transparent; border: 0; padding: 0 4px; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; text-decoration: underline dotted; font-family: var(--font-ui); } .chain-silent-row__reason { font-size: 0.75rem; color: var(--text-muted); font-style: italic; display: none; } .chain-silent-row__ts { margin-left: auto; font-size: 0.7rem; font-style: italic; color: var(--text-muted); font-family: var(--font-ui); flex-shrink: 0; } /* Conversation-list multi-participant avatar stack — desktop has plenty of horizontal room, so each avatar overlaps its predecessor by 7px. Mobile tightens the overlap to 11px so the "{N} members" label still has room beside the stack on a 320px-wide phone. */ .conv-list-avatar-stack > *:not(:first-child) { margin-left: -7px; } @media (max-width: 767px) { .conv-list-avatar-stack > *:not(:first-child) { margin-left: -11px; } /* Cap the visible avatar stack at 5 on phone — JS still renders up to 7 (sorted by most-recent-activity by the worker), but the trailing ones hide so the count + chev capsule fits in a 320px row. `!important` is required because `buildAvatar` sets `display: inline-flex` as an inline style on each avatar wrap, and inline styles beat class selectors without it. */ .conv-list-avatar-stack > *:nth-child(n+6) { display: none !important; } /* Drop the relative-time stamp on phone — list rows are too narrow to keep the timestamp + members capsule on the same line, and the topic row below is the higher-value information. */ .conv-list-ts { display: none; } } @media (max-width: 767px) { /* Mobile shows the members row inline alongside the toggle + actions, so the avatar (single-participant) or participants capsule (multi) is visible at the top of every conversation. Lock to nowrap + min-width:0 so long names truncate via ellipsis rather than wrapping to a second line and breaking the top-bar-height row. */ .conv-detail-header-row--members { flex-wrap: nowrap; min-width: 0; overflow: hidden; } } .sidebar-nav-item .nav-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; } .sidebar-nav-item .nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* Sidebar: decorative auto-rotating renders (monogram + pyramid). The stack grows to fill the gap between the nav and the footer and centres the pair; each slot has a fixed height (the renders are framed to it). */ .sidebar-render-stack { flex: 1 1 auto; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 0; overflow: hidden; } .sidebar-render { width: 100%; height: 180px; /* monogram slot */ } /* three.js mounts its