/* GercOS Track A, phase 1 (CSS only). Loaded AFTER the app CSS. Source: Eva trackA-package-r2 (theme-trackA.css), reduced to Boss-approved CSS-only items. NEVER touched: --sidebar-width --header-height --vvh --keyboard-offset. Pending with Boss (easy to change here): --ink-muted, --state-error. */ :root:root{ --ink-muted:#A89A88; /* PENDING Boss sign-off */ --state-error:#FF6B6B; /* PENDING Boss sign-off */ --state-live:#00BBF9; /* live/listening only */ --ta-raised:#1D1D20; --focus-ring:#E8D399; --hit-min:44px; --bg-base:#0D0D0E; --bg-raised:#161618; --bg-elevated:var(--ta-raised); --gercos-gold:#C5A059; --gercos-gold-light:#E8D399; --gercos-teal:#C5A059; --gercos-teal-glow:rgba(197,160,89,.35); --text-primary:#F3E6D4; --text-tertiary:var(--ink-muted); --semantic-danger:var(--state-error); --semantic-warning:#FF9F1C; --semantic-info:#E8D399; --voice-glow:rgba(197,160,89,.4); --border-glass:rgba(243,230,212,.10); --chat-user-bg:rgba(197,160,89,.12); --chat-user-border:rgba(197,160,89,.55); --chat-leo-glow:none; } /* second (teal) accent -> brass */ .ambient-glow--secondary{background:radial-gradient(circle,rgba(197,160,89,.10) 0,transparent 70%)} /* status badges: speaking = brass (was blue), listening = live cyan, thinking = amber, recording = error */ .badge-speaking{background:rgba(197,160,89,.14);color:#E8D399;border:1px solid rgba(197,160,89,.55)} .badge-listening{background:rgba(0,187,249,.12);color:var(--state-live);border:1px solid rgba(0,187,249,.5)} .badge-thinking{background:rgba(255,159,28,.12);color:#FF9F1C;border:1px solid rgba(255,159,28,.5)} .badge-recording{background:color-mix(in srgb,var(--state-error) 14%,transparent);color:var(--state-error);border:1px solid color-mix(in srgb,var(--state-error) 50%,transparent)} /* blue speaking orb state -> brass */ button.voice-orb--speaking{--voice-glow:rgba(197,160,89,.45);background:linear-gradient(145deg,#B08A48,#8C6239)} @keyframes voice-pulse-speaking{0%,to{box-shadow:0 0 0 0 var(--voice-glow)}33%{box-shadow:0 0 0 10px rgba(197,160,89,.2)}66%{box-shadow:0 0 0 20px transparent}} /* transcript: no fade mask, no per-bubble opacity, stable scrollbar */ .transcript-falloff{-webkit-mask-image:none!important;mask-image:none!important;overflow-anchor:auto;scrollbar-gutter:stable} .transcript-falloff [style*="opacity"]{opacity:1!important} /* focus ring (app removes outlines) */ :is(button,[role="button"],a,input,textarea,select,[role="option"]):focus-visible{outline:2px solid var(--focus-ring)!important;outline-offset:2px!important} /* 44px hit sizes: sidebar toggle, send. Orb is 56px already; never hidden. */ button[aria-label="Toggle sidebar"],#leo-chat-send-btn{min-width:var(--hit-min)!important;min-height:var(--hit-min)!important} #leo-voice-btn{min-width:var(--hit-min)!important;min-height:var(--hit-min)!important} /* hide Encrypt Now (composer) and the green/red call buttons. Never by aria-label "Start voice session" (shared with the orb); orb guarded. */ button.bg-\[\#22c55e\]:not(#leo-voice-btn), button.bg-\[\#ef4444\]:not(#leo-voice-btn){display:none!important} /* header sub-line "Online" (was semantic success green) -> muted ink, no second accent */ .gercos-header p .text-\[var\(--semantic-success\)\]{color:var(--ink-muted)} /* --- deploy B additions (badge spacing + composer/transcript overlap). NEVER touches --vvh / --keyboard-offset / composerHeight logic. --- */ /* status badges: a little more air (live utilities are px-3 py-1) */ .badge-closed,.badge-listening,.badge-recording,.badge-thinking,.badge-speaking{letter-spacing:.04em!important;padding:.3rem .95rem!important} /* composer strip: opaque so transcript text never shows through the gradient (stray fragments behind CHOOSE AGENT) */ .fixed.bottom-0.right-0.z-20>.border-t{background:#0D0D0E!important;background-image:none!important} /* transcript bottom room: the app pads the page by composerHeight+8, but composerHeight measures only the inner composer box; the fixed strip is taller (border, pt-2, pb-2+safe-area, the row above it). Extra room inside the transcript keeps the last bubble clear of the strip. Inline padding is untouched. */ .transcript-falloff{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))!important} /* --- deploy D additions (gold auth buttons, Eva spec, Boss-approved 2026-10-01). CSS only; !important needed to beat the buttons' inline style. --- Targets ONLY #passkey-signin (login) and #register-passkey (register). Was: linear-gradient(135deg,#6366f1,#8b5cf6) + #fff text. bg #D4AF37 / text #0B0B0C (contrast 9.36:1). Focus ring = theme-trackA --focus-ring (#E8D399, defined in :root:root above). */ #passkey-signin,#register-passkey{background:#D4AF37!important;background-image:none!important;color:#0B0B0C!important} #passkey-signin:focus-visible,#register-passkey:focus-visible{outline:2px solid var(--focus-ring,#E8D399)!important;outline-offset:2px!important} /* ===== Eva Track A r2d (theme-trackA.css, sha256 3b7a4818094ebbaf), appended verbatim ===== */ /* ========================================================================== theme-trackA.css -- ROUND 2 (r2c, v163/v164 selectors) -- GercOS Track A "mechanical vault" ADDITIVE OVERRIDE LAYER for the live app. Load AFTER the app CSS. DESIGN PACKAGE ONLY: not built, not deployed, no network, no fonts fetched. Rules of this file 1. Section A : new variables (--ta-*, radius, spacing, focus ring, hit, pills) + overrides of LIVE palette variables. Values only. 2. Section B : the few selector rules that variables cannot reach. Selectors are the REAL v163/v164 hooks, verified by Ling in a read-only check of the live source (see handoff-r2-for-ling.md, "v163/v164 check-uitkomst"). No open-verification tags are left in this file; the few remaining doubts are written as NOTE. 3. NEVER touched, NEVER redefined, NEVER referenced in a value: --sidebar-width --header-height --vvh --keyboard-offset (layout/viewport plumbing belongs to the app). 4. One accent only: brass/gold. Cyan #00BBF9 = LIVE / BUFFERING only. No second teal accent. No blue "speaking" colour. 5. Shared chunks: header and sidebar are shared by 9 pages. Every rule that touches them is scoped with :has(.transcript-falloff) so only the Talk page is affected. Talk-only hooks (orb, badges, picker, bubbles) are specific enough not to need that scope. 6. Live tokens verified to exist (v163/v164): --bg-base, --bg-raised, --bg-elevated, --text-primary, --text-tertiary, --gercos-gold, --gercos-gold-light, --gercos-bronze, --gercos-teal, --semantic-danger, --glass-border, --focus-ring (#E8D399), --voice-glow, --text-secondary (#d4cfc4, live; NOT overridden by default, see A2). All four --semantic-* exist live: danger #ef4444, info #3b82f6, success #22c55e, warning #f59e0b. --semantic-error and --semantic-live do NOT exist live. NOT seen defined live: --text-muted (Ling). We define it ourselves in Section A2 so it always resolves. 7. Login / register buttons (#passkey-signin, #register-passkey): gold #D4AF37 with dark label is already LIVE as v164. Nothing in this file. ========================================================================== */ /* -------------------------------------------------------------------------- SECTION A -- variables :root:root (specificity 0,2,0) beats a plain :root / html.dark declaration in the app CSS regardless of load order. Do not use !important on variables. -------------------------------------------------------------------------- */ :root:root { /* ---- A1. Track A source tokens (NEW variables, --ta- prefix) ---------- */ --ta-brass: #C5A059; /* the single accent */ --ta-brass-hi: #E8D399; /* hover / active text / focus ring */ --ta-bronze: #8C6239; /* borders + large text ONLY (3.6:1) */ --ta-obsidian: #0D0D0E; --ta-carbon: #161618; --ta-raised: #1D1D20; /* hover row / menu hover (derived) */ --ta-amber: #FF9F1C; /* thinking */ --ta-emerald: #00F5D4; /* healthy/success -- NOT used on Talk */ --ta-cyan: #00BBF9; /* LIVE / BUFFERING ONLY */ --ta-error: #FF6B6B; /* derived -- PENDING sign-off */ --ta-ink: #F3E6D4; --ta-ink-muted: #A89A88; /* derived -- PENDING sign-off */ --ta-on-brass: #0D0D0E; /* label on brass fill */ /* ---- A2. OVERRIDES of live palette variables (see token-mapping.md) --- */ --bg-base: var(--ta-obsidian); /* live #0a0a0a */ --bg-raised: var(--ta-carbon); /* live: raised panels/cards */ --gercos-gold: var(--ta-brass); /* live #d4af37 */ /* --gercos-bronze (live #b38b5e) is deliberately NOT overridden: it is 6.26:1 on obsidian and safe for text. Track A bronze #8C6239 is only 3.6:1 and is exposed as --border-strong below (borders only). */ --text-primary: var(--ta-ink); /* --text-muted: Ling did not see it defined live. We keep our own definition so it always resolves (NOTE: if it turns out to exist live, this line overrides it; check once on the live page). */ --text-muted: var(--ta-ink-muted); /* --text-secondary IS defined live (#d4cfc4) and is used by badges, sidebar links and the sidebar toggle. We do NOT override it by default: our dim #A89A88 made those elements too dark. OPTION, Boss beslist (uncomment only if Boss wants a warmer/dimmer secondary text everywhere): --text-secondary: var(--ta-ink-muted); */ /* All four --semantic-* exist live (danger #ef4444, info #3b82f6, success #22c55e, warning #f59e0b). The overlay overrides danger, info and warning. Success is overridden to emerald but not used on Talk. --semantic-error does NOT exist live: use --semantic-danger. */ --semantic-danger: var(--ta-error); --semantic-warning: var(--ta-amber); --semantic-info: var(--ta-brass-hi); /* info is NOT blue any more */ --semantic-success: var(--ta-emerald); /* live #22c55e; not used on Talk */ /* --semantic-live does NOT exist live. Our own NEW token (cyan = LIVE). */ --semantic-live: var(--ta-cyan); /* ---- A3. NEW variables: shape ---------------------------------------- */ --radius: 2px; --radius-pill: 2px; /* pills are deliberately not round */ --radius-orb: 50%; /* the ONE round element: the voice orb */ /* ---- A4. NEW variables: spacing (4pt) -------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- A5. NEW variables: hit size + focus ------------------------------ */ --hit-min: 44px; --focus-ring: var(--ta-brass-hi); /* = #E8D399; token exists live (v163) */ --focus-ring-w: 2px; --focus-ring-off: 2px; /* ---- A6. NEW variables: borders / surfaces --------------------------- */ --border-hairline: rgba(140, 98, 57, 0.55); --border-strong: var(--ta-bronze); --border-accent: var(--ta-brass); --surface-hover: rgba(243, 230, 212, 0.06); --surface-selected: rgba(197, 160, 89, 0.12); /* ---- A7. NEW variables: chat surface + bubbles ------------------------ */ --chat-bg-color: var(--ta-obsidian); --chat-bg-image: repeating-linear-gradient(0deg, rgba(197,160,89,0.035) 0 1px, transparent 1px 48px); --bubble-agent-bg: rgba(243, 230, 212, 0.06); --bubble-agent-border: rgba(243, 230, 212, 0.10); --bubble-user-bg: rgba(197, 160, 89, 0.12); --bubble-user-border: rgba(197, 160, 89, 0.55); /* ---- A8. NEW variables: status pills --------------------------------- speaking = BRASS (was blue). live = cyan. thinking = amber. error = red. ready/idle = muted ink (no emerald on Talk). */ --pill-speaking-fg: var(--ta-brass-hi); --pill-speaking-bg: rgba(197,160,89,0.14); --pill-speaking-bd: rgba(197,160,89,0.55); --pill-live-fg: var(--ta-cyan); --pill-live-bg: rgba(0,187,249,0.12); --pill-live-bd: rgba(0,187,249,0.50); --pill-thinking-fg: var(--ta-amber); --pill-thinking-bg: rgba(255,159,28,0.12); --pill-thinking-bd: rgba(255,159,28,0.50); --pill-error-fg: var(--ta-error); --pill-error-bg: rgba(255,107,107,0.12);--pill-error-bd: rgba(255,107,107,0.50); --pill-ready-fg: var(--ta-ink-muted);--pill-ready-bg: transparent; --pill-ready-bd: var(--ta-bronze); /* ---- A9. NEW variables: type + motion (local fonts only) -------------- */ --font-ceremonial: "Krungthep", "Sukhumvit Set", "Thonburi", "Hiragino Sans", serif; --font-ui: "Krub", "Sarabun", "Helvetica Neue", system-ui, sans-serif; --fs-caption: 12px; --fs-small: 13px; --fs-body: 15px; --fs-lead: 17px; --fs-title: 24px; --lh-body: 1.55; --tracking-ceremonial: 0.08em; --dur: 120ms; } /* -------------------------------------------------------------------------- SECTION B -- selector rules that variables cannot reach (hard-coded inline styles in the live app). Why !important is needed: inline style="..." always beats a stylesheet rule -> !important is the only CSS way to override it. Every !important below is scoped as narrowly as possible and is listed in handoff-r2-for-ling.md section 4. Scope helper used below: .gercos-shell:has(.transcript-falloff) = "the shell, but only on the page that contains the transcript". -------------------------------------------------------------------------- */ /* B1. Scroll-darkening fix. Verified v163 hook. The mask fades the top/bottom of the transcript to transparent, which darkens the text while scrolling. Remove it; text stays static. */ .transcript-falloff { mask-image: none; -webkit-mask-image: none; overflow-anchor: auto; /* stop content jumping when heights change */ scrollbar-gutter: stable; /* no horizontal shift when scrollbar shows */ } /* B2. Inline row opacity (1 / 0.95 / 0.9 / 0.85 from scroll position). Verified v162-v164: the inline opacity sits on the ROW, not on the bubble: div.flex.transition-opacity.duration-300 (+ justify-end user / justify-start agent) inside div.space-y-4. The rows are NOT direct children of .transcript-falloff, so the old `.transcript-falloff > *` matched nothing. This is the rule that is already live in v162-v164. Inline style needs !important. */ .transcript-falloff [style*="opacity"] { opacity: 1 !important; } /* B3. Shell: header + sidebar (SHARED chunk, 9 pages -> scoped with :has). Verified: .gercos-shell wraps .gercos-sidebar, .gercos-main, header.gercos-header. Sidebar modifiers --open / --collapsed are left to the app (no rule). Backdrop button.gercos-sidebar-backdrop: no restyle needed. Sidebar: the live sidebar background is a GRADIENT set with the `background` shorthand, so setting only background-color does not override it. We set the `background` shorthand ourselves (it also resets background-image). !important is a safety margin against the live shorthand rule; it is listed in the !important table (handoff section 4). */ .gercos-shell:has(.transcript-falloff) header.gercos-header { background-color: var(--bg-raised); border-bottom-color: var(--border-hairline); } .gercos-shell:has(.transcript-falloff) aside.gercos-sidebar { background: var(--ta-carbon) !important; border-right-color: var(--border-hairline); } /* Page colour: verified. .gercos-main has NO inline background; the page colour is .gercos-shell { background: var(--bg-base) }, and --bg-base is already re-pointed to obsidian in Section A2. So there is no rule for .gercos-main (and no .chat-surface exists). The real chat background is an INLINE gradient on a div.absolute.inset-0 inside the backdrop (div.pointer-events-none.absolute.inset-0, aria-hidden). Only inline can be beaten by !important, so this is the single narrow !important for the surface, scoped to the Talk page. VERIFIED by Ling (v164 source): this selector matches exactly 1 element on /voice. The same backdrop also exists on status and conversations, but the :has(.transcript-falloff) scope keeps them out. */ .gercos-shell:has(.transcript-falloff) .pointer-events-none.absolute.inset-0[aria-hidden="true"] > div.absolute.inset-0 { background-color: var(--chat-bg-color) !important; background-image: var(--chat-bg-image) !important; } /* B4. Hit areas >= 44px. min-* needs !important against inline 36px. Sidebar toggle today 36, send today 36. Toggle + send + attach hooks verified (toggle scoped: shared header). The sidebar toggle and sidebar links use --text-secondary, which is live (#d4cfc4) and is deliberately not overridden (A2). */ .gercos-shell:has(.transcript-falloff) header.gercos-header button[aria-label="Toggle sidebar"], #leo-chat-send-btn, button[aria-label="Add photo, video, or file"] { min-width: var(--hit-min) !important; min-height: var(--hit-min) !important; } /* the voice orb keeps its own size but never goes below 44px. DO NOT hide it. DO NOT select it by aria-label (handoff section 6). */ #leo-voice-btn { min-width: var(--hit-min) !important; min-height: var(--hit-min) !important; } /* B5. Status badges (inline colours incl. the blue "speaking" badge). Verified classes: .badge-closed .badge-listening .badge-recording .badge-thinking .badge-speaking. Live / buffer / error badge variants do NOT exist (so --pill-error-* is unused on Talk). Mapping: closed = ready (muted), listening + recording = LIVE (cyan), thinking = amber, speaking = brass (NOT blue). */ .badge-closed, .badge-listening, .badge-recording, .badge-thinking, .badge-speaking { border-radius: var(--radius-pill) !important; } .badge-closed { background: var(--pill-ready-bg) !important; border-color: var(--pill-ready-bd) !important; color: var(--pill-ready-fg) !important; } .badge-listening, .badge-recording { background: var(--pill-live-bg) !important; border-color: var(--pill-live-bd) !important; color: var(--pill-live-fg) !important; } .badge-thinking { background: var(--pill-thinking-bg) !important; border-color: var(--pill-thinking-bd) !important; color: var(--pill-thinking-fg) !important; } .badge-speaking { background: var(--pill-speaking-bg) !important; border-color: var(--pill-speaking-bd) !important; color: var(--pill-speaking-fg) !important; } /* B6. Composer strip (verified, semi-stable: Tailwind utility chain). Only the top hairline; layout stays with the app (app variables stay untouched). */ .fixed.bottom-0.right-0.z-20 > .border-t { border-top-color: var(--border-hairline); } /* Send button. Verified: #leo-chat-send-btn. Enabled state has an INLINE background: linear-gradient(135deg, var(--gercos-bronze), var(--gercos-gold)); disabled state is inline rgba(179,139,94,0.25); label colour inline #0a0a0a (dark on brass, stays as is, so no colour override). Inline -> !important. Always use the id, never `form button[type=submit]`. The enabled rule excludes the disabled state, so the live dimmed look of a disabled Send stays untouched. VERIFIED by Ling (v164 source): Send uses a real `disabled` attribute plus an inline style, and no aria-disabled. So :not(:disabled) is the right and only guard needed. */ #leo-chat-send-btn { border-radius: var(--radius) !important; } #leo-chat-send-btn:not(:disabled) { background: var(--ta-brass) !important; background-image: none !important; border: 1px solid var(--ta-brass) !important; } #leo-chat-send-btn:not(:disabled):hover { background: var(--ta-brass-hi) !important; } /* B7. Orb -> flat brass ring. Keeps the element and its handlers. Verified: the state is a CLASS on the button itself (no data-live, no data-state, no aria-pressed): voice-orb--closed | --listening | --recording | --thinking | --speaking. The orb gradients/shadows come from those .voice-orb--* CSS classes and are NOT !important, and not inline. So NO !important is needed here: the id selector (1,0,0) beats a class (0,1,0); the state selectors (1,1,0) beat both. Colour follows the pills: live = cyan, thinking = amber, speaking = brass (never blue). */ #leo-voice-btn { background: var(--ta-carbon); background-image: none; border: 1.5px solid var(--ta-brass); box-shadow: none; border-radius: var(--radius-orb); } #leo-voice-btn.voice-orb--closed { border-color: var(--ta-brass); } #leo-voice-btn.voice-orb--listening { border-color: var(--ta-cyan); } #leo-voice-btn.voice-orb--recording { border-color: var(--ta-cyan); box-shadow: 0 0 0 4px rgba(0, 187, 249, 0.14); } #leo-voice-btn.voice-orb--thinking { border-color: var(--ta-amber); } #leo-voice-btn.voice-orb--speaking { border-color: var(--ta-brass-hi); } /* B8. Chat bubbles. Verified: the bubble is div.chat-bubble.chat-message plus chat-user.chat-bubble-user (user) or chat-leo (agent), with NO inline style. (The rows around them, div.flex.justify-end / .justify-start, carry the inline opacity: see B2.) No !important: the two-class selector beats single Tailwind utilities and live single-class bubble rules. NOTE: if a live rule on .chat-bubble-user / .chat-leo turns out to be more specific, check visually on the page; only then add a narrow !important. The live .chat-user has a GOLD box-shadow. We reset it below (a second glow, not Track A); no !important for now, same note applies. */ .chat-bubble { border-radius: var(--radius); } .chat-bubble.chat-leo { background: var(--bubble-agent-bg); border: 1px solid var(--bubble-agent-border); color: var(--text-primary); } .chat-bubble.chat-user { background: var(--bubble-user-bg); border: 1px solid var(--bubble-user-border); color: var(--text-primary); box-shadow: none; /* resets the live gold glow on .chat-user */ } /* Thinking bubble (verified: .chat-bubble[role="status"]) -> amber. */ .chat-bubble[role="status"] { background: var(--pill-thinking-bg); border-color: var(--pill-thinking-bd); color: var(--pill-thinking-fg); } /* Author label. In v163 the label is only reachable as the first

of the bubble: FRAGILE (would also hit a bubble that has no label). The :not(:only-child) guard protects single-paragraph bubbles. RECOMMENDED markup change: give the label the class .chat-author; the second selector is already here so the switch needs no CSS change. */ .chat-bubble > p:first-child:not(:only-child), .chat-bubble > .chat-author { font: 600 var(--fs-caption)/1 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); } .chat-bubble.chat-user > p:first-child:not(:only-child), .chat-bubble.chat-user > .chat-author { color: var(--gercos-gold); } /* B9. Focus ring everywhere (the app removes outlines). outline-offset 2px: the ring sits on the dark page, NOT on the gold buttons. */ :where(button, [role="button"], a, input, textarea, select, [role="option"]):focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 2px; } /* B10. Remove the second (teal) accent (green/red round buttons). CSS-only stopgap; proper removal is a markup change (phase 3). HARD GUARD: every rule is `:not(#leo-voice-btn)`. The orb must stay visible. NEVER hide by aria-label for green/red: the orb shares that text at rest. Verified v163/v164: green and red are Tailwind classes, NOT inline style, so `[style*="#22c55e"]` matches nothing. Hooks: green button.bg-\[\#22c55e\] aria-label "Start voice session" red button.bg-\[\#ef4444\] aria-label "End voice session" Red is already hidden in the live overlay; green is not yet. Both are kept here so the package stands on its own. */ button.bg-\[\#22c55e\]:not(#leo-voice-btn), button.bg-\[\#ef4444\]:not(#leo-voice-btn) { display: none !important; } /* B10b. Encrypt Now: BESLOTEN, BLIJFT STAAN (Boss). No hide rule. The hide rule that used to live here is removed. Hook for reference: button.btn-primary[aria-label="Encrypt session now"], text "Encrypt Now" (shows "Sealed" when the session is closed). Look: the button keeps the single brass accent through the normal tokens (--gercos-gold is re-pointed to brass in A2). No separate rule. Fact (Ling, v164 source): the button is currently a DUMMY (modal, setTimeout 1800 ms, sets sealed=true and sessionStorage ["gercos-session-sealed"]="1"; no fetch, no crypto). It only drives labels: the button, the header badge "Encrypted" and the sidebar item "Session Sealed". Making it real is separate work owned by Ling. */ /* B11. Native