/* ═══════════════════════════════════════════════════════════════════════════ AIBOTZA — DESIGN SYSTEM · "Ledger & Daybook" --------------------------------------------------------------------------- This is a product for someone who runs a COMPANY OF AI WORKERS, not a server rack. The aesthetic is therefore warm and editorial rather than telemetric: ivory paper and ink in light, a warm study-at-night charcoal in dark, pine-green as the single confident accent (ledger green — health, money, growth), ochre for "waiting on you", rust for "went wrong". Serif for headings and identity, sans for interface, mono for numbers and time. System fonts only — this box can be offline. ─── HOW TO USE (for other pages: bot detail, admin, signup) ─────────────── 1. 2. Put the theme bootstrap in BEFORE first paint: 3. Compose from the component classes below; never hard-code a hex. ─── TOKENS ─────────────────────────────────────────────────────────────── COLOUR (all theme-aware, flip automatically): --bg page canvas --bg-tint header/tabs wash --surface card face --surface-2 inset / hover --surface-3 deepest inset (code, thumbs) --line hairline --line-strong bolder divider --text primary ink --text-2 secondary --text-3 tertiary / micro-labels --accent pine green (brand action) --accent-ink text drawn ON accent --accent-soft tinted fill --accent-line tinted border --ok --warn --danger --info --spend signal hues --*-soft / --*-line tinted fill + border per signal --shadow-hue warm shadow base TYPE: --font-sans --font-serif --font-mono --t-2xs 10px · --t-xs 11px · --t-sm 12px · --t-md 13px · --t-base 15px --t-lg 17px · --t-xl 20px · --t-2xl 26px · --t-3xl 34px · --t-4xl 44px --lh-tight 1.15 · --lh-snug 1.35 · --lh-base 1.55 --track-wide 0.09em (micro caps) · --track-tight -0.02em (display) SPACE (4px base): --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 20 · --s6 24 --s7 32 · --s8 40 · --s9 56 · --s10 72 RADIUS: --r-xs 4 · --r-sm 6 · --r-md 10 · --r-lg 14 · --r-xl 20 --r-pill 999px ELEVATION: --e0 (hairline only) · --e1 rest · --e2 raised · --e3 modal MOTION: --dur-fast 120ms · --dur 200ms · --dur-slow 380ms --ease (standard) · --ease-out (entrances) All of it collapses to 1ms under prefers-reduced-motion. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */ :root { /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: ui-serif, Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Liberation Serif', serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-base: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 26px; --t-3xl: 34px; --t-4xl: 44px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --track-wide: 0.09em; --track-tight: -0.02em; /* Space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; /* Radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Motion */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --shell: 1520px; --gutter: var(--s6); /* Paper grain — inline SVG, no remote asset. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ─── LIGHT (default) ─── */ :root, :root[data-theme='light'] { color-scheme: light; --bg: #faf7f2; --bg-tint: #f6f1e9; --surface: #fffdfa; --surface-2: #f4efe6; --surface-3: #ece5d9; --line: #e5ded2; --line-strong: #d3c9b8; --text: #1e1b16; --text-2: #5b5449; --text-3: #7e7669; --accent: #1e6b4e; --accent-hover: #185940; --accent-ink: #fffdfa; --accent-soft: rgba(30, 107, 78, 0.09); --accent-line: rgba(30, 107, 78, 0.26); --ok: #2c7a58; --ok-soft: rgba(44, 122, 88, 0.1); --ok-line: rgba(44, 122, 88, 0.26); --warn: #a1650f; --warn-soft: rgba(161, 101, 15, 0.11); --warn-line: rgba(161, 101, 15, 0.28); --danger: #a5382a; --danger-soft: rgba(165, 56, 42, 0.09); --danger-line: rgba(165, 56, 42, 0.26); --info: #33528f; --info-soft: rgba(51, 82, 143, 0.09); --info-line: rgba(51, 82, 143, 0.24); --spend: #6b4382; --spend-soft: rgba(107, 67, 130, 0.09); --spend-line: rgba(107, 67, 130, 0.24); --shadow-hue: 46, 38, 26; --grain-opacity: 0.13; --grain-blend: multiply; --e0: 0 0 0 1px var(--line); --e1: 0 1px 2px rgba(var(--shadow-hue), 0.05), 0 0 0 1px var(--line); --e2: 0 2px 4px rgba(var(--shadow-hue), 0.05), 0 8px 20px -8px rgba(var(--shadow-hue), 0.12), 0 0 0 1px var(--line); --e3: 0 24px 60px -12px rgba(var(--shadow-hue), 0.28), 0 0 0 1px var(--line-strong); } /* ─── DARK ─── */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #14110e; --bg-tint: #191512; --surface: #1c1814; --surface-2: #241f19; --surface-3: #2b251e; --line: rgba(240, 228, 208, 0.09); --line-strong: rgba(240, 228, 208, 0.19); --text: #f2ebe0; --text-2: #b6ab9b; --text-3: #8b8175; --accent: #4fb98a; --accent-hover: #63c99a; --accent-ink: #07251a; --accent-soft: rgba(79, 185, 138, 0.13); --accent-line: rgba(79, 185, 138, 0.32); --ok: #57c08f; --ok-soft: rgba(87, 192, 143, 0.12); --ok-line: rgba(87, 192, 143, 0.3); --warn: #e0a34a; --warn-soft: rgba(224, 163, 74, 0.12); --warn-line: rgba(224, 163, 74, 0.32); --danger: #e2705c; --danger-soft: rgba(226, 112, 92, 0.12); --danger-line: rgba(226, 112, 92, 0.32); --info: #85a5ea; --info-soft: rgba(133, 165, 234, 0.12); --info-line: rgba(133, 165, 234, 0.3); --spend: #b892d8; --spend-soft: rgba(184, 146, 216, 0.12); --spend-line: rgba(184, 146, 216, 0.3); --shadow-hue: 0, 0, 0; --grain-opacity: 0.34; --grain-blend: overlay; --e0: 0 0 0 1px var(--line); --e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line); --e2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 26px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line); --e3: 0 28px 70px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-strong); } } /* Manual override wins over the OS preference in both directions. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #14110e; --bg-tint: #191512; --surface: #1c1814; --surface-2: #241f19; --surface-3: #2b251e; --line: rgba(240, 228, 208, 0.09); --line-strong: rgba(240, 228, 208, 0.19); --text: #f2ebe0; --text-2: #b6ab9b; --text-3: #8b8175; --accent: #4fb98a; --accent-hover: #63c99a; --accent-ink: #07251a; --accent-soft: rgba(79, 185, 138, 0.13); --accent-line: rgba(79, 185, 138, 0.32); --ok: #57c08f; --ok-soft: rgba(87, 192, 143, 0.12); --ok-line: rgba(87, 192, 143, 0.3); --warn: #e0a34a; --warn-soft: rgba(224, 163, 74, 0.12); --warn-line: rgba(224, 163, 74, 0.32); --danger: #e2705c; --danger-soft: rgba(226, 112, 92, 0.12); --danger-line: rgba(226, 112, 92, 0.32); --info: #85a5ea; --info-soft: rgba(133, 165, 234, 0.12); --info-line: rgba(133, 165, 234, 0.3); --spend: #b892d8; --spend-soft: rgba(184, 146, 216, 0.12); --spend-line: rgba(184, 146, 216, 0.3); --shadow-hue: 0, 0, 0; --grain-opacity: 0.34; --grain-blend: overlay; --e0: 0 0 0 1px var(--line); --e1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--line); --e2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 26px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line); --e3: 0 28px 70px -14px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-strong); } /* ─── 2. BASE ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Paper grain. Fixed, non-interactive, barely there — it stops large flat fields from reading as plastic. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } body > * { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; padding: 0; } h1, h2, h3, h4, h5, p { margin: 0; } svg { display: block; } ::selection { background: var(--accent-soft); color: var(--text); } /* Focus: one ring, everywhere, only for keyboard. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ─── 3. UTILITIES ──────────────────────────────────────────────────────── */ .hidden, [hidden] { display: none !important; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .serif { font-family: var(--font-serif); } .num { font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .flex { display: flex; } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .row { display: flex; align-items: center; gap: var(--s2); } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); } /* Micro caps — the connective tissue of the whole interface. */ .eyebrow { font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); } /* ─── 4. APP SHELL ──────────────────────────────────────────────────────── */ .shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); } .masthead { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-tint) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; gap: var(--s4); min-height: 62px; padding-block: 10px; } .brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; } .brand-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-serif); font-size: 15px; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } .brand-name { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--track-tight); white-space: nowrap; } .brand-rule { width: 1px; height: 22px; background: var(--line-strong); flex: none; } .tenant-name { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; color: var(--accent); letter-spacing: var(--track-tight); /* Defensive truncation, not just a narrow-viewport patch: with `.masthead-right`'s links unable to shrink (nowrap labels), flexbox used to starve THIS element down to near-zero width instead, and the tenant name wrapped mid-word inside that sliver — the literal "Rivera Tech / AiBotza / SINGLE WORKER" glyph-stacking Sam saw at 390px (loose-ends-20260730). An ellipsis is honest; overlapping letters are not. min-width:0 is required for a flex child to shrink below its content size at all. */ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .masthead-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); font-size: var(--t-md); } /* Below ~640px the masthead's own link row (My Fleets / Billing / Profile / killswitch / theme / Log out — `.h-link` and friends are all `white-space:nowrap` by design, short labels read worse abbreviated) cannot shrink to fit next to the brand. Previously flexbox resolved that by starving `.brand` toward zero width rather than wrapping anything, which is what corrupted the masthead into overlapping text on every authenticated page at 390px (loose-ends-20260730 finding 1 — 36px of page-level horizontal overflow on all 8 dashboard tabs, 73px on Profile). The fix is to let the row actually wrap: the brand keeps its own line, the link cluster gets the full row width below it and wraps its own children internally if even that doesn't fit on one line. Nothing is hidden or clipped — every link stays reachable, just on more than one line. `width:100%` (rather than relying on `.masthead-right` picking a width on its own once the outer row wraps) is deliberate: a flex item with flex-grow:0 does not reliably claim the full wrapped-row width, and an ambiguous width there is exactly the kind of thing that looks fine in one browser and regresses in another. Scoped to the breakpoint so desktop (verified at 1440px) is byte-for-byte unaffected — none of this fires unless the single-line layout has already failed to fit. */ @media (max-width: 640px) { .masthead-right { width: 100%; } .tenant-name { max-width: 55vw; } } .h-link { color: var(--text-2); font-size: var(--t-md); font-weight: 500; padding: 6px 8px; border-radius: var(--r-sm); white-space: nowrap; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .h-link:hover { color: var(--text); background: var(--surface-2); } .h-link.danger { color: var(--text-3); } .h-link.danger:hover { color: var(--danger); background: var(--danger-soft); } .h-link.admin { color: var(--warn); } .h-link.admin:hover { background: var(--warn-soft); } .user-email { color: var(--text-3); font-size: var(--t-sm); max-width: 190px; } /* ─── 5. TABS ───────────────────────────────────────────────────────────── */ .tabbar { border-bottom: 1px solid var(--line); background: var(--bg-tint); } .tabbar-inner { display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none; } .tabbar-inner::-webkit-scrollbar { display: none; } .tab-btn { position: relative; padding: 13px var(--s4) 12px; font-size: var(--t-md); font-weight: 600; color: var(--text-3); white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--dur-fast) var(--ease); } .tab-btn::after { content: ''; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center; transition: transform var(--dur) var(--ease-out); } .tab-btn:hover { color: var(--text-2); } .tab-btn.tab-active { color: var(--text); } .tab-btn.tab-active::after { transform: scaleX(1); } .tab-btn .tab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 2px; } /* ─── 6. CARDS ──────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e1); } .card-raised { box-shadow: var(--e2); } .card-pad { padding: var(--s5); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); } .card-title { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--track-tight); } .card-body { padding: var(--s5); } .section-title { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--track-tight); margin: 0 0 2px; } .section-sub { font-size: var(--t-md); color: var(--text-3); margin: 0 0 var(--s4); } .rule { height: 1px; background: var(--line); border: 0; margin: var(--s6) 0; } /* ─── 7. BUTTONS ────────────────────────────────────────────────────────── */ .btn, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-sm); font-size: var(--t-md); font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px); } .btn { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn:hover { background: var(--accent-hover); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--text-3); } .btn-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); } .btn-danger:hover { background: var(--danger); color: var(--surface); border-color: var(--danger); } .btn:disabled, .btn-ghost:disabled, .btn-danger:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn-sm { padding: 5px 11px; font-size: var(--t-sm); border-radius: var(--r-xs); } .btn-block { width: 100%; } .icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--text-3); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .icon-btn:hover { color: var(--accent); background: var(--accent-soft); } .icon-btn.danger:hover { color: var(--danger); background: var(--danger-soft); } /* Filter chips */ .chip { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-3); font-size: var(--t-sm); font-weight: 600; transition: all var(--dur-fast) var(--ease); } .chip:hover { color: var(--text-2); border-color: var(--line-strong); } .chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* Theme toggle */ .theme-toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-2); transition: all var(--dur-fast) var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); } .theme-toggle .ic-moon { display: none; } :root[data-theme='dark'] .theme-toggle .ic-moon { display: block; } :root[data-theme='dark'] .theme-toggle .ic-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .ic-moon { display: block; } :root:not([data-theme='light']) .theme-toggle .ic-sun { display: none; } } /* ─── 8. FORM CONTROLS ──────────────────────────────────────────────────── */ .field { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 12px; font-size: var(--t-md); color: var(--text); outline: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field:hover:not(:disabled) { border-color: var(--text-3); } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field::placeholder { color: var(--text-3); } .field:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-2); } textarea.field { resize: vertical; line-height: var(--lh-snug); } select.field { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237e7669' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } .field-label { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 5px; } .form-row { margin-bottom: var(--s3); } .status-msg { font-size: var(--t-sm); color: var(--text-2); margin-left: var(--s2); } .status-msg.ok { color: var(--ok); } .status-msg.bad { color: var(--danger); } input[type='checkbox'] { accent-color: var(--accent); width: 14px; height: 14px; } /* ─── 9. TABLES ─────────────────────────────────────────────────────────── */ table.data { width: 100%; border-collapse: collapse; font-size: var(--t-md); } table.data th { text-align: left; padding: 11px var(--s4); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } table.data th:first-child { border-top-left-radius: var(--r-lg); } table.data th:last-child { border-top-right-radius: var(--r-lg); } table.data td { padding: 11px var(--s4); border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; } table.data td.strong { color: var(--text); font-weight: 500; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr { transition: background var(--dur-fast) var(--ease); } table.data tbody tr:hover td { background: var(--surface-2); } .table-wrap { overflow-x: auto; border-radius: var(--r-lg); } /* ─── 10. PILLS, BADGES, TAGS ───────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .pill-plain::before { display: none; } .st-complete, .pill-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); } .st-in_progress, .pill-info { color: var(--info); background: var(--info-soft); border-color: var(--info-line); } .st-pending, .pill-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); } .st-failed, .pill-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } .st-review, .pill-spend { color: var(--spend); background: var(--spend-soft); border-color: var(--spend-line); } .st-blocked, .st-cancelled { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } .st-backlog, .pill-quiet { color: var(--text-3); background: var(--surface-2); border-color: var(--line); } .tag { display: inline-block; padding: 2px 7px; border-radius: var(--r-xs); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; } .count-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pill); background: var(--warn); color: #fff; font-size: var(--t-xs); font-weight: 800; font-variant-numeric: tabular-nums; } /* Live indicator */ .live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-2xs); font-weight: 800; letter-spacing: var(--track-wide); color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); } .live-pill .lp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 2.4s var(--ease) infinite; } .live-pill.reconnecting { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); } @keyframes breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* Kill switch */ .ks-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--ok-line); background: var(--ok-soft); color: var(--ok); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: all var(--dur-fast) var(--ease); } .ks-btn:hover { border-color: var(--ok); } .ks-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ks-btn.stopped { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); } .ks-btn.stopped .ks-dot { animation: breathe 1s var(--ease) infinite; } /* ─── 11. STATS ─────────────────────────────────────────────────────────── */ .stat { position: relative; background: var(--surface); border-radius: var(--r-md); padding: var(--s4) var(--s4) var(--s3); box-shadow: var(--e1); overflow: hidden; } .stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--stat-color, var(--accent)); opacity: 0.85; } .stat-label { font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 6px; } .stat-value { font-size: var(--t-2xl); font-weight: 650; line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; margin-top: 5px; color: var(--text); } .stat-value.tone { color: var(--stat-color); } .stat-sub { font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; min-height: 16px; } /* Thin proportional meter, for budget / completion ratios. */ .meter { height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin-top: var(--s2); } .meter > span { display: block; height: 100%; background: var(--meter-color, var(--accent)); border-radius: var(--r-pill); transition: width var(--dur-slow) var(--ease-out); } /* ─── 12. EMPTY STATES ──────────────────────────────────────────────────── */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s8) var(--s6); gap: var(--s2); } .empty-art { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); margin-bottom: var(--s1); } .empty-title { font-family: var(--font-serif); font-size: var(--t-lg); font-weight: 600; color: var(--text); letter-spacing: var(--track-tight); } .empty-body { font-size: var(--t-md); color: var(--text-3); max-width: 42ch; line-height: var(--lh-snug); } .empty-actions { margin-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; } .empty.compact { padding: var(--s6) var(--s4); } /* ─── 13. SKELETONS ─────────────────────────────────────────────────────── */ .skel { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s var(--ease) infinite; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } .skel-line { height: 10px; margin: 6px 0; } .skel-title { height: 14px; width: 45%; } .skel-row { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s5); border-bottom: 1px solid var(--line); } .skel-circle { width: 32px; height: 32px; border-radius: 50%; flex: none; } .skel-stat { height: 26px; width: 60%; margin-top: 6px; } /* ─── 14. TOASTS ────────────────────────────────────────────────────────── */ .toast-stack { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); max-width: min(420px, calc(100vw - 40px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--s3); padding: 12px var(--s4); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e3); border-left: 3px solid var(--accent); font-size: var(--t-md); animation: toastIn var(--dur-slow) var(--ease-out); } .toast.leaving { animation: toastOut var(--dur) var(--ease) forwards; } .toast-ok { border-left-color: var(--ok); } .toast-warn { border-left-color: var(--warn); } .toast-error { border-left-color: var(--danger); } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 650; color: var(--text); } .toast-text { color: var(--text-2); font-size: var(--t-sm); line-height: var(--lh-snug); white-space: pre-wrap; word-break: break-word; } .toast-close { color: var(--text-3); flex: none; padding: 2px; border-radius: var(--r-xs); } .toast-close:hover { color: var(--text); } @keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes toastOut { to { opacity: 0; transform: translateX(20px); } } /* ─── 15. MODALS ────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(12, 9, 6, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--s5); animation: fadeIn var(--dur) var(--ease); } .modal { width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--e3); padding: var(--s6); max-height: calc(100vh - 80px); overflow-y: auto; animation: modalIn var(--dur-slow) var(--ease-out); } .modal-title { font-family: var(--font-serif); font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--track-tight); margin-bottom: var(--s4); } .modal-err { color: var(--danger); font-size: var(--t-sm); background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--r-sm); padding: 8px 11px; margin-top: var(--s3); } /* The body of a knowledge entry under review (S28). Monospace and pre-wrapped on purpose: this is untrusted, agent-written text that may have been summarised from a hostile page, so it is shown as the literal characters someone is being asked to vouch for, never as rendered markup. The wider modal is for the same reason — a reviewer who has to scroll a 40-character column does not read, and a review nobody reads is worse than no review, because it grants trust anyway. */ .kb-review-modal { max-width: 720px; transition: max-width var(--dur) var(--ease); } /* S80 slice 1 — wide enough for the entry and the "Catch me up" chat side by side, so a reviewer can see the checklist and the entry text at once rather than the chat covering the thing it is explaining. */ .kb-review-modal.chat-open { max-width: 1180px; } .kb-entry-body { font-family: var(--font-mono); font-size: var(--t-sm); line-height: var(--lh-relaxed, 1.6); white-space: pre-wrap; word-break: break-word; max-height: 44vh; overflow-y: auto; padding: var(--s4); margin-bottom: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); } /* ── S80 slice 1: "Catch me up" — the gate chat ────────────────────────── Plain-language, consequences-first framing lives in the model prompt (gate-chat.mjs), not in the CSS; this is only the container. Two columns when open (`.kb-modal-columns`), the entry keeping its existing width and the chat taking a fixed side column so it reads like a sidebar, not a takeover. */ .kb-modal-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; } .kb-modal-columns.chat-open { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } .kb-chat-panel { display: flex; flex-direction: column; min-height: 0; max-height: 78vh; border-left: 1px solid var(--line); padding-left: var(--s5); } .kb-chat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); } .kb-chat-title { font-weight: 600; font-size: var(--t-sm); } .kb-chat-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px dashed var(--line); } .kb-chat-check { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-xs); line-height: 1.4; } .kb-chat-check .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; } .kb-chat-check.status-ok .dot { background: var(--ok); } .kb-chat-check.status-issue .dot { background: var(--danger); } .kb-chat-check.status-missing .dot { background: var(--danger); } .kb-chat-check.status-unknown .dot { background: var(--warn); } .kb-chat-messages { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); } .kb-chat-msg { font-size: var(--t-sm); line-height: 1.5; padding: 8px 11px; border-radius: var(--r-sm); } .kb-chat-msg.role-assistant { background: var(--surface-2); border: 1px solid var(--line); } .kb-chat-msg.role-user { background: var(--accent-soft); border: 1px solid var(--accent-line); align-self: flex-end; max-width: 90%; } .kb-chat-input-row { display: flex; gap: 8px; } .kb-chat-input-row .field { flex: 1; } .kb-chat-typing { font-size: var(--t-xs); margin-bottom: var(--s2); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } /* ─── 16. AVATARS & PRESENCE ────────────────────────────────────────────── */ /* Every worker gets a stable hue derived from its name, so the same face carries the same colour on the roster, the org chart and the task board. */ .avatar { position: relative; width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.02em; --av-bg: hsl(var(--av-h, 155) 38% 46% / 0.13); --av-fg: hsl(var(--av-h, 155) 42% 30%); background: var(--av-bg); color: var(--av-fg); box-shadow: inset 0 0 0 1px hsl(var(--av-h, 155) 38% 46% / 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .avatar { --av-bg: hsl(var(--av-h, 155) 40% 60% / 0.15); --av-fg: hsl(var(--av-h, 155) 55% 70%); } } :root[data-theme='dark'] .avatar { --av-bg: hsl(var(--av-h, 155) 40% 60% / 0.15); --av-fg: hsl(var(--av-h, 155) 55% 70%); } .avatar-sm { width: 26px; height: 26px; border-radius: 8px; font-size: var(--t-2xs); } .presence { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); } .presence.hot { background: var(--ok); } .presence.warm { background: var(--warn); } .presence.idle { background: var(--text-3); } /* No standing container to be present in — a hollow ring reads as "not applicable", not "offline". S14 kept these identities status='active' deliberately; the roster must not draw them as staffed workers. */ .presence.nodesk { background: transparent; border: 2px dashed var(--text-3); } /* ─── 17. ANIMATION ENTRANCES ───────────────────────────────────────────── */ .rise { animation: rise var(--dur-slow) var(--ease-out) backwards; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ─── 18. DAYBOOK (activity timeline) ─────────────────────────────────────── The activity feed is the answer to "what did my company do?", so it is set like a day book: a ruled left margin carrying the clock time, a marginal dot in the event's colour, then the entry. Sticky date headers keep the narrative anchored while scrolling. Reusable on the bot-detail page. */ .daybook { max-height: 620px; overflow-y: auto; overscroll-behavior: contain; } .daybook-day { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s3); padding: 7px var(--s5); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); } .daybook-day::after { content: ''; flex: 1; height: 1px; background: var(--line); } .entry { position: relative; display: grid; grid-template-columns: 62px 22px minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s2); padding: 9px var(--s5) 9px var(--s4); border-bottom: 1px solid var(--line); transition: background var(--dur-fast) var(--ease); } .entry:last-child { border-bottom: none; } .entry:hover { background: var(--surface-2); } .entry.fresh { animation: entryIn var(--dur-slow) var(--ease-out); } @keyframes entryIn { from { opacity: 0; transform: translateY(-6px); background: var(--accent-soft); } to { opacity: 1; transform: none; background: transparent; } } .entry-time { font-family: var(--font-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--text-3); text-align: right; padding-right: var(--s2); white-space: nowrap; } /* The ruled margin: a hairline running the length of the book. */ .entry-rail { position: relative; align-self: stretch; } .entry-rail::before { content: ''; position: absolute; left: 50%; top: -10px; bottom: -10px; width: 1px; background: var(--line); transform: translateX(-0.5px); } .entry-rail::after { content: ''; position: absolute; left: 50%; top: 7px; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); background: var(--entry-color, var(--text-3)); box-shadow: 0 0 0 3px var(--surface); } .entry:hover .entry-rail::after { box-shadow: 0 0 0 3px var(--surface-2); } .entry-main { min-width: 0; } .entry-line { font-size: var(--t-md); line-height: var(--lh-snug); } .entry-actor { font-weight: 650; color: var(--text); } .entry-action { color: var(--text-2); } .entry-summary { font-size: var(--t-sm); color: var(--text-3); line-height: var(--lh-snug); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry-kind { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--entry-color, var(--text-3)); opacity: 0.75; white-space: nowrap; padding-left: var(--s3); } .entry[data-evtype='task'] { --entry-color: var(--info); } .entry[data-evtype='agent'] { --entry-color: var(--ok); } .entry[data-evtype='audit'] { --entry-color: var(--warn); } .entry[data-evtype='spend'] { --entry-color: var(--spend); } .new-events-bar { display: block; width: 100%; padding: 8px; text-align: center; border: none; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--accent); font-size: var(--t-sm); font-weight: 700; } .new-events-bar:hover { background: var(--accent); color: var(--accent-ink); } /* ─── 19. ROSTER (the people of the company) ────────────────────────────── */ .roster-row { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: 10px var(--s4); border-bottom: 1px solid var(--line); transition: background var(--dur-fast) var(--ease); } .roster-row:last-child { border-bottom: none; } .roster-row:hover { background: var(--surface-2); } .roster-info { flex: 1; min-width: 0; } .roster-name { display: block; font-size: var(--t-md); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roster-role { display: block; font-size: var(--t-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .roster-act { opacity: 0; transition: opacity var(--dur-fast) var(--ease); flex: none; } .roster-row:hover .roster-act, .roster-row:focus-within .roster-act { opacity: 1; } .roster-row.gone { opacity: 0.5; } .roster-row.gone .roster-name { text-decoration: line-through; } .roster-row.gone .avatar { --av-bg: var(--surface-2); --av-fg: var(--text-3); } /* Ephemeral / desk-less roles: no standing container, so no presence to report. Muted, not struck through — the identity is still active, it is just not staffed the way a durable worker is. */ .roster-row.ephemeral { opacity: 0.64; } .roster-row.ephemeral .roster-name { color: var(--text-2); } .tag-nodesk { color: var(--text-3); background: var(--surface-2); border-color: var(--line); } .roster-sub { padding: 8px var(--s4) 6px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--line); } .link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line); font-size: var(--t-md); color: var(--text-2); transition: all var(--dur-fast) var(--ease); } .link-row:last-child { border-bottom: none; } .link-row:hover { color: var(--text); background: var(--surface-2); } .link-row .lr-key { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--text-3); } /* ─── 20. NOTICES (drift, warnings, callouts) ───────────────────────────── */ .notice { border-radius: var(--r-md); padding: 11px var(--s4); font-size: var(--t-sm); line-height: var(--lh-snug); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); } .notice b { font-weight: 700; } .notice ul { margin: 6px 0 0; padding-left: 18px; } .notice.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .notice.bad { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } /* ─── 21. CHAT ──────────────────────────────────────────────────────────── */ .chat-messages { min-height: 340px; max-height: 480px; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .bubble { max-width: 74%; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--t-md); line-height: var(--lh-snug); white-space: pre-wrap; word-break: break-word; animation: rise var(--dur) var(--ease-out); } .bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: var(--r-xs); } .bubble.bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: var(--r-xs); } .bubble.err { align-self: flex-start; background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); } .bubble.typing { display: flex; gap: 4px; align-items: center; padding: 14px; } .bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: breathe 1.2s var(--ease) infinite; } .bubble.typing i:nth-child(2) { animation-delay: 0.18s; } .bubble.typing i:nth-child(3) { animation-delay: 0.36s; } .pick-row { display: block; width: 100%; text-align: left; padding: 9px var(--s3); border-radius: var(--r-sm); border: 1px solid transparent; color: var(--text-2); transition: all var(--dur-fast) var(--ease); } .pick-row:hover { background: var(--surface-2); } .pick-row.sel { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); } .pick-row .pr-name { display: block; font-size: var(--t-md); font-weight: 600; } .pick-row .pr-sub { display: block; font-size: var(--t-xs); color: var(--text-3); } /* ─── 22. ORG CHART ─────────────────────────────────────────────────────── */ .org-card { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 132px; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e1); text-align: center; transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .org-card:hover { box-shadow: var(--e2); transform: translateY(-1px); } .org-name { font-size: var(--t-md); font-weight: 650; color: var(--text); line-height: var(--lh-snug); } .org-role { font-size: var(--t-xs); color: var(--text-3); } .org-line { width: 1px; height: 18px; background: var(--line-strong); } .org-paused { color: var(--danger); font-size: var(--t-2xs); font-weight: 700; margin-top: 2px; } .org-card.ephemeral { opacity: 0.62; } .org-nodesk { color: var(--text-3); font-size: var(--t-2xs); font-weight: 700; margin-top: 2px; } /* ─── 23. RESPONSIVE ────────────────────────────────────────────────────── */ @media (max-width: 1280px) { :root { --gutter: var(--s5); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1080px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } .user-email { display: none; } } @media (max-width: 720px) { :root { --gutter: var(--s4); } .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* ─── 24. REDUCED MOTION ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* Approval provenance (S80/S83, 2026-07-30) — "where did this come from?" collapsed by default so a queue stays scannable, and open enough to answer the question without leaving the page. */ .appr-origin { margin: 0.35rem 0 0.15rem; font-size: var(--t-sm); } .appr-origin > summary { cursor: pointer; color: var(--text-3); padding: 0.15rem 0; } .appr-origin > summary:hover { color: var(--text); } .appr-origin-body { display: grid; gap: 0.2rem; padding: 0.4rem 0 0.2rem 0.8rem; border-left: 2px solid var(--line); margin-top: 0.3rem; } .appr-origin-body .mono { word-break: break-word; } /* ─── 25. PAGE COMPANION (S83) — the launcher + panel `companion.js` mounts on every tenant-app page. Anchored bottom-LEFT deliberately: the toast stack (§14) already owns bottom-right at z-index 200, and a companion fighting toasts for the same corner is worse than either alone. Sits above ordinary content (z-index 60) but below a modal (100) and toasts (200), so opening a modal correctly covers it rather than the two floating surfaces overlapping. ────────────────────────────────────────── */ .pc-launcher { position: fixed; left: var(--s5); bottom: var(--s5); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); border: none; font-size: var(--t-sm); font-weight: 650; cursor: pointer; box-shadow: var(--e2); transition: transform var(--dur) var(--ease-out); } .pc-launcher:hover { transform: translateY(-1px); } .pc-launcher[aria-expanded="true"] { display: none; } .pc-launcher-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); animation: breathe 1.6s var(--ease) infinite; } .pc-panel { position: fixed; left: var(--s5); bottom: var(--s5); z-index: 60; width: min(380px, calc(100vw - var(--s5) * 2)); max-height: min(560px, 74vh); display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden; } .pc-panel.hidden { display: none; } .pc-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex: none; } .pc-title { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 650; color: var(--text); } .pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; animation: breathe 1.6s var(--ease) infinite; } .pc-close { background: none; border: none; color: var(--text-3); font-size: var(--t-xs); cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); } .pc-close:hover { color: var(--text); background: var(--surface-2); } .pc-log { flex: 1; min-height: 120px; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .pc-msg { font-size: var(--t-sm); line-height: var(--lh-base); max-width: 100%; } .pc-msg-founder { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .pc-msg-companion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .pc-bubble { padding: 8px 11px; display: inline-block; max-width: 92%; border-radius: var(--r-md); } .pc-msg-founder .pc-bubble { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-md) var(--r-md) 2px var(--r-md); } .pc-msg-companion .pc-bubble { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) var(--r-md) 2px; } .pc-proposal { margin-top: 2px; width: 100%; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .pc-proposal-head { padding: 6px 11px; background: var(--accent-soft); font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--accent); } .pc-proposal-body { padding: 9px 11px; } .pc-proposal-value { font-size: var(--t-sm); color: var(--text); line-height: var(--lh-snug); white-space: pre-wrap; margin-bottom: 6px; font-weight: 600; } .pc-proposal-note { font-size: var(--t-2xs); color: var(--text-3); margin-bottom: 8px; line-height: var(--lh-snug); } .pc-proposal-actions { display: flex; gap: 6px; } .pc-proposal-actions button { flex: 1; font-size: var(--t-2xs); padding: 6px 8px; } .pc-proposal-decided { opacity: 0.7; } .pc-proposal-decided .pc-proposal-decided { padding: 8px 11px; font-size: var(--t-2xs); color: var(--text-3); } .pc-busy { padding: 0 var(--s4) var(--s2); font-size: var(--t-2xs); color: var(--text-3); display: flex; align-items: center; gap: 6px; flex: none; } .pc-busy.hidden { display: none; } .pc-compose { display: flex; gap: 6px; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); flex: none; } .pc-input { flex: 1; resize: none; font-size: var(--t-sm); min-height: 38px; max-height: 96px; } .pc-send { flex: none; } .pc-err { margin: 0 var(--s4) var(--s3); padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-size: var(--t-2xs); } .pc-err.hidden { display: none; } @media (max-width: 560px) { .pc-panel { left: var(--s3); right: var(--s3); bottom: var(--s3); width: auto; } .pc-launcher { left: var(--s3); bottom: var(--s3); } } /* ── Key/value list ─────────────────────────────────────────────────────── Lifted verbatim out of bot.html's local