/* ========================================================================= Design tokens. Onyx is the default (dark) theme; [data-theme="light"] overrides them for light mode. The theme is set on by an inline script in index.html and toggled by the header button. ========================================================================= */ :root, [data-theme="dark"] { /* Lead with system-ui so the whole app uses the same font the input dock already uses (the OS UI font), which renders heavier than the old -apple-system-led stack on Windows. */ --font-app: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --page: #0A0D12; --app: #0E1116; --surface: #0B0E13; --header-bg: #0E1116; --title: #F3F5F9; --subtle: #8A92A4; --border: #232A35; --bot-bg: #232B37; --bot-text: #E6EAF1; --bubble-border: #333D4B; --user-bg: #5B5BD6; --user-text: #FFFFFF; --accent: #6366F1; --accent-hover: #7679F7; --accent-text: #FFFFFF; --focus-ring: rgba(99, 102, 241, 0.35); --input-bg: #1B2027; --input-text: #E7EAF0; --placeholder: #6B7280; --pill-bg: #1B2027; --pill-text: #C7CDD8; --pill-border: #2C333F; --ghost-bg: transparent; --ghost-border: #2C333F; --ghost-text: #AEB6C4; --ghost-hover: #1B2027; --code-bg: #08090D; --code-header-bg: #0E1116; --code-text: #D7DBE3; --code-border: #1C222C; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.4); } [data-theme="light"] { --page: #ECEEF2; --app: #FFFFFF; --surface: #EEF1F6; --header-bg: #FFFFFF; --title: #161A22; --subtle: #6B7280; --border: #E5E8EE; --bot-bg: #FFFFFF; --bot-text: #1E2430; --bubble-border: #DDE1E9; --user-bg: #5B5BD6; --user-text: #FFFFFF; --accent: #5B5BD6; --accent-hover: #4F4FC9; --accent-text: #FFFFFF; --focus-ring: rgba(91, 91, 214, 0.22); --input-bg: #F4F5F8; --input-text: #1E2430; --placeholder: #9AA0AE; --pill-bg: #F1F2F5; --pill-text: #454B59; --pill-border: #E2E5EA; --ghost-bg: #FFFFFF; --ghost-border: #E2E5EA; --ghost-text: #5A6072; --ghost-hover: #F1F2F5; --code-bg: #0E1320; --code-header-bg: #161C2B; --code-text: #D7DBE3; --code-border: #222A3A; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 34px rgba(16, 24, 40, 0.10); } *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-app); min-height: 100vh; margin: 0; padding: 0; background-color: var(--page); color: var(--bot-text); overflow-x: hidden; transition: background-color 0.25s ease, color 0.25s ease; } /* Form controls don't inherit font by default — force them to so the dock, dropdown, and buttons all match the rest of the app. */ input, select, textarea, button { font-family: inherit; } /* Centered app card */ .container { background: var(--app); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; max-width: 820px; margin: 24px auto; height: calc(100vh - 48px); display: flex; flex-direction: column; border: 1px solid var(--border); transition: background-color 0.25s ease, border-color 0.25s ease; } /* When running inside Tableau (iframe), use all available space */ body.in-extension .container { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; border: none; border-radius: 0; height: 100vh; min-height: 0; } /* ---- Header ------------------------------------------------------------- */ header { background: var(--header-bg); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--border); transition: background-color 0.25s ease, border-color 0.25s ease; } .header-main { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Logo sits on a white chip so it stays crisp in both light and dark themes */ .brand-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; border-radius: 10px; padding: 5px; } .brand-logo img { height: 40px; width: auto; display: block; } .header-main h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--title); letter-spacing: -0.01em; } .header-main p { margin: 3px 0 0; font-size: 13px; color: var(--subtle); } .header-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Custom-styled select with overlaid chevron */ .select-wrap { position: relative; display: inline-flex; align-items: center; } .select-wrap select { appearance: none; -webkit-appearance: none; height: 42px; background: var(--pill-bg); color: var(--pill-text); border: 1px solid var(--pill-border); border-radius: 10px; padding: 0 34px 0 14px; font-size: 13px; font-weight: 500; cursor: pointer; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .select-wrap:hover select { border-color: var(--accent); color: var(--title); } .select-wrap select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .select-wrap .chev { position: absolute; right: 11px; display: flex; pointer-events: none; color: var(--pill-text); transition: color 0.2s ease; } .select-wrap:hover .chev { color: var(--title); } /* ---- Icon buttons (ghost + send) --------------------------------------- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease, opacity 0.2s ease; } .icon-btn:active { transform: scale(0.94); } .icon-btn.ghost { width: 42px; height: 42px; border-radius: 50%; background: var(--ghost-bg); border: 1px solid var(--ghost-border); color: var(--ghost-text); } .icon-btn.ghost:hover:not(:disabled) { background: var(--ghost-hover); color: var(--title); } .icon-btn.ghost:disabled { opacity: 0.4; cursor: default; } .icon-btn.send { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--accent-text); position: relative; } .icon-btn.send:hover:not(:disabled) { background: var(--accent-hover); } .icon-btn.send:disabled { cursor: default; } /* Loading spinner for the send button (keeps it from wiping the icon) */ .icon-btn.send.loading svg { display: none; } .icon-btn.send.loading::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Theme toggle shows the CURRENT theme: moon in dark, sun in light. */ #themeToggle .icon-moon { display: none; } #themeToggle .icon-sun { display: block; } [data-theme="dark"] #themeToggle .icon-moon { display: block; } [data-theme="dark"] #themeToggle .icon-sun { display: none; } /* Match the toggle's surface to the assistant dropdown for a consistent set */ #themeToggle { background: var(--pill-bg); border-color: var(--pill-border); color: var(--pill-text); } #themeToggle:hover:not(:disabled) { background: var(--ghost-hover); border-color: var(--accent); color: var(--title); } /* ---- Chat area ---------------------------------------------------------- */ .chat-box { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 22px 24px; background: var(--surface); min-height: 0; transition: background-color 0.25s ease; } .message { margin: 14px 0; padding: 12px 16px; border-radius: 14px; max-width: 80%; line-height: 1.5; font-size: 15px; width: fit-content; } .message.user { background: var(--user-bg); color: var(--user-text); margin-left: auto; border-bottom-right-radius: 5px; } .message.bot { background: var(--bot-bg); color: var(--bot-text); border: 1px solid var(--bubble-border); border-bottom-left-radius: 5px; } .trace-btn { display: inline-block; margin-top: 10px; padding: 6px 12px; background: transparent; color: var(--accent); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12.5px; transition: background-color 0.2s ease; } .trace-btn:hover { background: var(--ghost-hover); } /* ---- Trace panel (JSON drawer) ----------------------------------------- */ .trace-panel { display: none; border-top: 1px solid var(--code-border); background: var(--code-bg); color: var(--code-text); max-height: 40vh; overflow: auto; } .trace-panel.open { display: block; } .trace-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--code-header-bg); border-bottom: 1px solid var(--code-border); font-weight: 500; font-size: 13px; color: var(--code-text); } .trace-close { padding: 6px 12px; background: transparent; color: var(--code-text); border: 1px solid var(--code-border); border-radius: 6px; cursor: pointer; font-size: 12px; } .trace-close:hover { background: rgba(255, 255, 255, 0.06); } #traceContent { padding: 14px 16px; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } /* ---- Input dock (Dock B: capsule with embedded send) ------------------- */ .input-area { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--app); border-top: 1px solid var(--border); transition: background-color 0.25s ease, border-color 0.25s ease; } .composer { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 5px 5px 18px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.25s ease; } .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .composer input { flex: 1; border: none; background: transparent; color: var(--input-text); font-size: 15px; outline: none; padding: 9px 0; } .composer input::placeholder { color: var(--placeholder); } /* ---- Charts returned by the create_chart tool -------------------------- */ .chart-img { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 640px) { .container { max-width: 100vw; width: 100vw; margin: 0; border: none; border-radius: 0; height: 100vh; } header { padding: 16px; flex-wrap: wrap; } .header-main h1 { font-size: 18px; } .chat-box { padding: 16px; } .input-area { padding: 12px 14px; } .message { max-width: 88%; } }