/* Bachs docs assistant widget. Injected at the edge, so it lives alongside Mintlify's own styles. Everything is namespaced under #bachs-ai to avoid collisions. Colors follow Mintlify's theme: light by default, overridden when carries the .dark class. */ #bachs-ai { --bx-accent: #006cfa; --bx-accent-fg: #ffffff; --bx-radius: 16px; --bx-bg: #ffffff; --bx-fg: #1b1d21; --bx-muted: #6b7280; --bx-border: rgba(0, 0, 0, 0.1); --bx-panel-bg: #ffffff; --bx-bubble-user: #006cfa; --bx-bubble-user-fg: #ffffff; --bx-bubble-ai: #f3f4f6; --bx-bubble-ai-fg: #1b1d21; --bx-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); --bx-field-bg: #ffffff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: fixed; z-index: 2147483000; /* above Mintlify's header/sidebar */ left: 0; right: 0; bottom: 0; pointer-events: none; /* only children capture clicks */ } html.dark #bachs-ai, :root[data-theme="dark"] #bachs-ai { --bx-bg: #16181d; --bx-fg: #e7e9ee; --bx-muted: #9aa1ad; --bx-border: rgba(255, 255, 255, 0.12); --bx-panel-bg: #101216; --bx-bubble-ai: #23262d; --bx-bubble-ai-fg: #e7e9ee; --bx-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --bx-field-bg: #1c1f26; } #bachs-ai * { box-sizing: border-box; } /* ---- Collapsed prompt bar (bottom-center) ---- */ .bx-bar { pointer-events: auto; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--bx-field-bg); color: var(--bx-fg); border: 1px solid var(--bx-border); border-radius: 999px; box-shadow: var(--bx-shadow); cursor: pointer; font-family: inherit; text-align: left; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, filter 0.15s ease; } .bx-bar:hover { filter: brightness(1.03); border-color: var(--bx-accent); } .bx-bar .bx-spark { color: var(--bx-accent); display: inline-flex; flex: none; } .bx-bar-label { flex: 1; color: var(--bx-muted); font-size: 14px; } /* Hidden while scrolling: slide down out of view, non-interactive. */ #bachs-ai.bx-scrolling .bx-bar { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; } /* When the panel is open, the bar is replaced by the panel. */ #bachs-ai.bx-open .bx-bar { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(140%); } .bx-kbd { font-size: 11px; color: var(--bx-muted); border: 1px solid var(--bx-border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; } .bx-send { flex: none; width: 30px; height: 30px; border-radius: 999px; border: none; background: var(--bx-accent); color: var(--bx-accent-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter 0.15s ease; } .bx-send:hover { filter: brightness(1.08); } .bx-send svg { width: 16px; height: 16px; } /* ---- Expanded chat panel (docked right, like the screenshot) ---- */ .bx-panel { pointer-events: auto; position: absolute; right: 18px; bottom: 18px; width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 90px)); display: none; flex-direction: column; background: var(--bx-panel-bg); color: var(--bx-fg); border: 1px solid var(--bx-border); border-radius: var(--bx-radius); box-shadow: var(--bx-shadow); overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); } #bachs-ai.bx-open .bx-panel { display: flex; opacity: 1; transform: translateY(0) scale(1); } .bx-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bx-border); } .bx-head .bx-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .bx-spark { color: var(--bx-accent); display: inline-flex; } .bx-head-actions { margin-left: auto; display: flex; gap: 2px; } .bx-icon-btn { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--bx-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .bx-icon-btn:hover { background: rgba(128, 128, 128, 0.15); color: var(--bx-fg); } .bx-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; } .bx-log::-webkit-scrollbar { width: 8px; } .bx-log::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 999px; } .bx-empty { color: var(--bx-muted); font-size: 13px; line-height: 1.5; margin: auto 0; text-align: left; } .bx-empty strong { color: var(--bx-fg); } .bx-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .bx-chip { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--bx-border); background: transparent; color: var(--bx-fg); cursor: pointer; } .bx-chip:hover { border-color: var(--bx-accent); color: var(--bx-accent); } .bx-msg { display: flex; flex-direction: column; max-width: 100%; } .bx-msg.user { align-items: flex-end; } .bx-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; } .bx-msg.user .bx-bubble { background: var(--bx-bubble-user); color: var(--bx-bubble-user-fg); border-bottom-right-radius: 4px; max-width: 85%; } .bx-msg.ai .bx-bubble { background: var(--bx-bubble-ai); color: var(--bx-bubble-ai-fg); border-bottom-left-radius: 4px; } .bx-bubble p { margin: 0 0 8px; } .bx-bubble p:last-child { margin-bottom: 0; } .bx-bubble ul, .bx-bubble ol { margin: 4px 0 8px; padding-left: 20px; } .bx-bubble li { margin: 2px 0; } .bx-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: rgba(128, 128, 128, 0.2); padding: 1px 5px; border-radius: 5px; } .bx-bubble pre { background: rgba(128, 128, 128, 0.16); padding: 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; } .bx-bubble pre code { background: none; padding: 0; } .bx-bubble a { color: var(--bx-accent); text-decoration: underline; } .bx-msg.user .bx-bubble a { color: #fff; } .bx-bubble .bx-mdh { font-weight: 700; font-size: 13.5px; margin: 10px 0 4px; } .bx-bubble .bx-mdh:first-child { margin-top: 0; } /* tables scroll inside their own container so the panel never scrolls sideways */ .bx-bubble .bx-tablewrap { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; } .bx-bubble table { border-collapse: collapse; font-size: 12.5px; width: 100%; } .bx-bubble th, .bx-bubble td { border: 1px solid var(--bx-border); padding: 5px 8px; text-align: left; vertical-align: top; } .bx-bubble thead th { font-weight: 600; background: rgba(128, 128, 128, 0.14); } .bx-sources { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; } .bx-source { font-size: 11px; color: var(--bx-muted); border: 1px solid var(--bx-border); border-radius: 999px; padding: 3px 9px; text-decoration: none; } .bx-source:hover { color: var(--bx-accent); border-color: var(--bx-accent); } .bx-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; } .bx-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--bx-muted); animation: bx-blink 1.2s infinite ease-in-out both; } .bx-typing span:nth-child(2) { animation-delay: 0.2s; } .bx-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes bx-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } .bx-compose { border-top: 1px solid var(--bx-border); padding: 10px; display: flex; align-items: flex-end; gap: 8px; } .bx-textarea { flex: 1; resize: none; border: 1px solid var(--bx-border); border-radius: 12px; background: var(--bx-field-bg); color: var(--bx-fg); font-family: inherit; font-size: 13.5px; line-height: 1.4; padding: 9px 12px; max-height: 120px; outline: none; } .bx-textarea:focus { border-color: var(--bx-accent); } .bx-compose .bx-send { width: 36px; height: 36px; } .bx-foot { font-size: 10.5px; color: var(--bx-muted); text-align: center; padding: 0 10px 8px; } @media (max-width: 640px) { .bx-panel { right: 8px; left: 8px; width: auto; bottom: 8px; height: min(70vh, calc(100vh - 70px)); } .bx-bar { bottom: 14px; } } @media (prefers-reduced-motion: reduce) { #bachs-ai .bx-bar, #bachs-ai .bx-panel { transition: none; } }