/* ============================================================ BT Pro*C Assistant — drop-in stylesheet Skinned to match the BT OracleEBS AI Workspace aesthetic: near-black canvas, cyan/teal accents with soft glow, IBM Plex type, monospace micro-labels, rounded dark panels. Replaces frontend/style.css — no markup changes required. (Optional: add IBM Plex fonts in , see note at bottom.) ============================================================ */ :root { --bg: #0a0c10; --sidebar: #0c0f14; --panel: #12161c; --panel-2: #0e1319; --border: #1e242d; --border-soft: #1a212b; --accent: #22d3ee; /* cyan */ --accent-2: #2dd4bf; /* teal */ --accent-soft: #10222b; --accent-line: #1e4550; --accent-ink: #06222b; /* text on cyan fills */ --text: #dfe4ea; --text-strong: #e2e7ee; --muted: #8a94a3; --label: #5a6675; --ok: #34d399; --warn: #f0a44a; --danger: #f2685c; --user-bubble-a: #15323a; --user-bubble-b: #123038; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; /* each panel scrolls internally */ } body { font-family: var(--sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-size: 14px; } @keyframes bt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } /* ---------- layout ---------- */ .app { display: grid; grid-template-columns: 292px 1fr 380px; height: 100vh; overflow: hidden; transition: grid-template-columns .2s ease; } /* collapsed states — toggle these classes on .app (see JS at bottom) */ .app.left-collapsed { grid-template-columns: 0 1fr 380px; } .app.right-collapsed { grid-template-columns: 292px 1fr 0; } .app.left-collapsed.right-collapsed { grid-template-columns: 0 1fr 0; } .app.left-collapsed .sidebar { display: none; } .app.right-collapsed .code-pane { display: none; } /* when the sidebar is collapsed, keep the mode tabs clear of the ☰ toggle */ .app.left-collapsed .mode-tabs { padding-left: 62px; } .sidebar, .code-pane { height: 100vh; background: var(--sidebar); border-right: 1px solid var(--border-soft); padding: 20px 18px; overflow-y: auto; } .code-pane { border-right: none; border-left: 1px solid var(--border-soft); } /* ---------- panel toggle buttons ---------- */ /* Small floating buttons pinned to the top corners of the window. Add the two