/* Babson AI Sandbox — flat color scheme, no gradient. * * Reverted from a body-level Babson-green-to-white gradient on * 2026-05-18. The gradient bled into dropdown menus, model-picker * popups, and made Babson-green B icons (Roger agents, Feedback * agent) invisible against the green portion of the page. Replaced * with deliberate, region-specific colors: * * - Chat area: white (LibreChat default) * - Sidebar: light gray (#f4f4f5 — Tailwind `zinc-100`) * - Babson green (#006644): reserved for accents on icons + the * send button. Identity comes through where it earns the space. * * Babson-green B icons read cleanly against the gray sidebar (~5.5:1 * contrast, passes WCAG AA). No more gradient gymnastics. */ :root { --babson-green: #006644; /* Conversation-panel green (2026-06-09): matches the Babson wordmark green * (#006241, same as babson-wordmark.svg / the favicon). White text on this * is ~6.3:1 contrast — passes WCAG AA. */ --babson-nav-green: #006241; } /* Sidebar — light gray for visual separation from the white chat area. * * LibreChat uses Tailwind `bg-surface-secondary*` classes for sidebar * surfaces (mirrors the `bg-surface-chat` / `bg-surface-primary` pattern * we already know about from the prior gradient work). Belt-and-suspenders * with element + role attribute selectors in case the class name shifts in * an upstream upgrade. */ [class*="bg-surface-secondary"], nav[aria-label*="conversation" i], aside[class*="sidebar" i] { background-color: #f4f4f5 !important; } /* ── Left panel → Babson green via THEME TOKENS (2026-06-09, approach v3) ──── * * Scope: the single

whose class WORD list contains * `bg-surface-primary-alt` (verified against the deployed JS bundle). ALL the * left-panel views swap inside this nav — Chats, Agent Builder, Prompts, * Memories — while the icon rail, the chat area, and portaled popovers/menus * (rendered at ) are outside it and keep the normal theme. * * Approach: LibreChat paints every component from theme TOKENS (--surface-*, * --text-*, --border-* — see :root/.dark in the deployed index.*.css), and CSS * variables resolve from the nearest ancestor. So instead of force-painting * individual components (approach v1/v2 — which fought LibreChat's own * hover/selected styling and the legacy gray rule above, producing * white-on-white pills in the builder/prompts/memories panels), we redefine * the tokens ON the nav. Every descendant — convo rows, hover/selected states, * title fade-out gradients, search field, form inputs, prompt cards — re-hues * consistently, in light AND dark mode, using LibreChat's own state design. */ nav[class~="bg-surface-primary-alt"] { /* surface ladder: base panel → raised → hover → selected */ --surface-primary: #006241; --surface-primary-alt: #006241; --surface-primary-contrast: #0b6a4b; --surface-secondary: #156f52; --surface-secondary-alt: #156f52; --surface-tertiary: #20795d; --surface-tertiary-alt: #20795d; --surface-hover: #2a8367; --surface-hover-alt: #2a8367; --surface-active: #348d71; --surface-active-alt: #348d71; --surface-dialog: #0b6a4b; --header-primary: #0b6a4b; --header-hover: #20795d; --header-button-hover: #20795d; /* text: white + soft green-whites for secondary/tertiary */ --text-primary: #ffffff; --text-secondary: #d9ece4; --text-secondary-alt: #c2e0d4; --text-tertiary: #abd3c4; /* borders: white-translucent ladder */ --border-light: rgba(255, 255, 255, 0.18); --border-medium: rgba(255, 255, 255, 0.28); --border-medium-alt: rgba(255, 255, 255, 0.28); --border-heavy: rgba(255, 255, 255, 0.38); --border-xheavy: rgba(255, 255, 255, 0.48); } /* Neutralize the legacy gray rule (top of file) INSIDE the panel. That rule * force-paints any [class*="bg-surface-secondary"] #f4f4f5 !important — which * inside the green panel produced near-white pills (with white text) on the * search wrapper, prompt cards, builder fields, and hovered rows. Same * !important, higher specificity, later in file → this wins inside the nav and * resolves to the green token instead. Outside the nav the gray stays as-is. */ nav[class~="bg-surface-primary-alt"] [class*="bg-surface-secondary"] { background-color: var(--surface-secondary) !important; } /* Inputs need only a readable placeholder on green (the stock * placeholder:text-gray-500 vanishes); the token --surface-secondary fill * already gives the field its definition — no added border (a bordered box * read as a stray outline once the fill landed). */ nav[class~="bg-surface-primary-alt"] input[class]::placeholder, nav[class~="bg-surface-primary-alt"] textarea[class]::placeholder { color: rgba(255, 255, 255, 0.72) !important; } /* ── Icon rail → darker forest green (babson.edu layered-greens look) ──────── * * The far-left icon rail (panel toggle, new chat, chats/agents/prompts/ * memories/files/settings/MCP icons, account avatar) is the

SIBLING of * the panel nav: "flex h-full flex-shrink-0 flex-col gap-2 border-r * border-border-light bg-surface-primary-alt px-2 py-2" (verified against the * deployed JS bundle). Scoped by the word-combo flex-shrink-0 + border-r + * bg-surface-primary-alt, which no other element carries. * * Same token technique as the panel above, but a DARKER, slightly desaturated * forest ladder — echoing babson.edu's dark top band sitting next to its * brighter greens: rail (#1d4636) → panel (#006241) → white chat area. */ div[class~="flex-shrink-0"][class~="border-r"][class~="bg-surface-primary-alt"] { --surface-primary: #1d4636; --surface-primary-alt: #1d4636; --surface-primary-contrast: #245241; --surface-secondary: #275441; --surface-secondary-alt: #275441; --surface-tertiary: #2f5f4b; --surface-tertiary-alt: #2f5f4b; --surface-hover: #356a54; --surface-hover-alt: #356a54; --surface-active: #3d755d; --surface-active-alt: #3d755d; --header-primary: #245241; --header-hover: #2f5f4b; --header-button-hover: #2f5f4b; --text-primary: #f3f7f0; --text-secondary: #d8e8db; --text-secondary-alt: #c2dac9; --text-tertiary: #b9d4c2; --border-light: rgba(255, 255, 255, 0.16); --border-medium: rgba(255, 255, 255, 0.26); --border-medium-alt: rgba(255, 255, 255, 0.26); --border-heavy: rgba(255, 255, 255, 0.36); --border-xheavy: rgba(255, 255, 255, 0.46); } /* Same legacy-gray neutralization inside the rail (hover:bg-surface-secondary * icon buttons would otherwise be force-painted #f4f4f5 at rest). */ div[class~="flex-shrink-0"][class~="border-r"][class~="bg-surface-primary-alt"] [class*="bg-surface-secondary"] { background-color: var(--surface-secondary) !important; } /* Hide the "Tools" dropdown button in the chat input (2026-06-30). * * The sliders-icon button (lucide Settings2) sitting between the attach * (paperclip) and "MCP Servers" buttons is LibreChat's ToolsDropdown trigger * (client/.../Input/ToolsDropdown.tsx). Its menu items are gated by agent * capabilities, and in our deployment (endpoints.agents.capabilities = * ["tools","context","ocr"]) code / web-search / file-search / skills / * artifacts are all OFF — so the ONLY live item left inside it is the MCP * submenu, which the dedicated "MCP Servers" button (MCPSelect) already * provides. The trigger is therefore pure redundancy wedged between two useful * controls, so we remove it. (Earlier — before the dedicated MCP button * existed — we instead kept the trigger and just suppressed its then-empty * popover; that fallback is retained below.) * * Anchor: the trigger's stable, unique id + aria-label, both literal strings * in the v0.8.7 source (so they survive minification). display:none drops it * from the flex badge row cleanly — `gap-2` reserves no space for a hidden * child, leaving [paperclip] [MCP Servers]. CSS (not a custom.js observer pass) * is the right tool here: the anchor needs no text-matching/ancestor logic, so * a static rule re-applies on every React re-render with zero flash. To restore * the button, delete this rule — the capability set is unchanged, so * ToolsDropdown still renders; it's only hidden. Re-verify the id/aria anchor * on any upstream bump (the base image is pinned to v0.8.7). */ #tools-dropdown-button, button[aria-label="Tools Options"] { display: none !important; } /* Defense-in-depth: suppress the dropdown's popover CONTENT, keyed off the body * attribute LibreChat sets while THIS menu is open (Radix uses it to lock body * scroll). With the trigger hidden above the menu can't open, so this is inert * — but it independently catches the menu if a future upstream change alters the * trigger's id/aria-label and defeats the hide. Scoped to this menu's body * attribute only, so other popovers (model picker, side panels) are untouched. */ body[data-dialog-prevent-body-scroll="tools-dropdown-menu"] [data-radix-popper-content-wrapper], body[data-dialog-prevent-body-scroll="tools-dropdown-menu"] [data-radix-menu-content], body[data-dialog-prevent-body-scroll="tools-dropdown-menu"] [role="menu"] { display: none !important; } /* New-chat icon in the "Chats" section header (v0.8.7) — its NewChatIcon * (button aria-label="New chat", Conversations.tsx) renders DARK because it * inherits a default color rather than the nav's white --text-primary token * (the "Chats" label right next to it IS white). Force the button white so the * icon's currentColor stroke turns white. Scoped to the GREEN PANEL nav — the * far-left icon-rail new-chat button is a sibling

, already white, so it's * untouched. (If a future upstream bump renders this still dark, the icon may * use a hardcoded fill/stroke instead of currentColor — add fill/stroke here.) */ nav[class~="bg-surface-primary-alt"] button[aria-label="New chat"], nav[class~="bg-surface-primary-alt"] button[aria-label="New chat"] svg { color: #ffffff !important; }