/* --------------------------------------------------------------------------- Theme tokens. The theme is always an explicit data-theme on : an inline script in the head resolves the stored choice or the OS preference before first paint, so there is exactly one source of truth here and no duplicated media-query palette to keep in sync. ------------------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --bg-a: #1a1a2e; --bg-b: #16213e; --header-bg: rgba(0,0,0,0.3); --surface: rgba(255,255,255,0.05); --surface-raised: rgba(255,255,255,0.09); --surface-sunken: rgba(0,0,0,0.35); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.35); --text: #ffffff; --text-muted: #aab4c0; --text-dim: #99a2ad; --heading: #cfe6fb; /* --accent is a text/stroke colour in nine of its ten uses, so it stays bright and the one filled use (#send) takes a dark label instead. Hover therefore brightens; darkening would fight the label. */ --accent: #64b5f6; --accent-hover: #8ac7f8; --on-accent: #0d2136; --user-bubble: #3b73ae; --on-user-bubble: #ffffff; --error-bg: rgba(198,40,40,0.35); --error-step-bg: rgba(198,40,40,0.20); --error-line: #ef5350; --error-text: #ffcdd2; --kind-frame: #64b5f6; --kind-llm: #ba68c8; --kind-adapter: #ffb74d; --kind-default: #5a6472; --code-text: #b6c2cf; --inline-code-bg: rgba(0,0,0,0.30); --inline-code-text: #b3e5fc; --marker: #8fb8dd; --tok-key: #7fd4f5; --tok-str: #c3e88d; --tok-num: #f78c6c; --tok-bool: #c792ea; --tok-null: #8892a4; --shadow: 0 1px 2px rgba(0,0,0,0.3); } :root[data-theme="light"] { color-scheme: light; --bg-a: #f5f7fb; --bg-b: #e7edf7; --header-bg: rgba(255,255,255,0.75); --surface: #ffffff; --surface-raised: #f3f6fb; --surface-sunken: #eef2f9; --border: rgba(18,35,64,0.11); --border-strong: rgba(18,35,64,0.50); /* The muted/dim ramp has to be darker than the dark theme's mirror image: on a near-white surface the same greys land around 3:1. */ --text: #16202e; --text-muted: #4b5a70; --text-dim: #636e7f; --heading: #12395f; --accent: #1565c0; --accent-hover: #0d4c94; --on-accent: #ffffff; --user-bubble: #1565c0; --on-user-bubble: #ffffff; --error-bg: #fdeaea; --error-step-bg: #fdf1f1; --error-line: #d64545; --error-text: #8a2020; --kind-frame: #1565c0; --kind-llm: #7b3fb5; --kind-adapter: #b06a12; --kind-default: #b9c3d1; --code-text: #2c3a4d; --inline-code-bg: rgba(18,35,64,0.07); --inline-code-text: #0b5878; --marker: #5a7fa6; /* Darker token hues: the dark-theme palette is unreadable on white. */ --tok-key: #0b6a83; --tok-str: #146b32; --tok-num: #a4501a; --tok-bool: #6b3fa0; --tok-null: #646e7d; --shadow: 0 1px 2px rgba(18,35,64,0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%); background-attachment: fixed; color: var(--text); transition: background-color 0.2s ease, color 0.2s ease; /* Column layout so the panes can claim every pixel below the header and scroll internally, rather than sizing to content and leaving a gap. */ display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Header */ .header { position: relative; text-align: center; padding: 1.5rem 4rem; background: var(--header-bg); border-bottom: 1px solid var(--border); } .header h1 { font-size: 1.6rem; color: var(--accent); margin-bottom: 0.25rem; } .header p { color: var(--text-muted); font-size: 0.9rem; } /* Theme toggle */ .theme-toggle { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 0.6rem; background: var(--surface-raised); color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .icon { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Show the icon for the theme you would switch TO. */ :root[data-theme="dark"] .icon-moon { display: none; } :root[data-theme="light"] .icon-sun { display: none; } /* Layout */ .panes { display: grid; /* --split is the chat column's share; the resizer writes it, app.js restores it from localStorage. */ grid-template-columns: var(--split, 45%) 0.75rem minmax(0, 1fr); gap: 0.375rem; padding: 1.5rem; max-width: 1600px; width: 100%; margin: 0 auto; align-items: stretch; /* Fill the space the header leaves. min-height:0 lets the children's own overflow work instead of the grid growing to fit them. */ flex: 1; min-height: 0; } /* Resizer: a wide hit area around a thin rail, so it is easy to grab but visually quiet until you reach for it. */ .resizer { align-self: stretch; min-height: 12rem; position: relative; cursor: col-resize; border: none; background: none; touch-action: none; } .resizer::before { content: ""; position: absolute; inset: 0 calc(50% - 1px); background: var(--border-strong); border-radius: 1px; transition: background 0.15s ease, inset 0.15s ease; } .resizer:hover::before, .resizer:focus-visible::before, body.resizing .resizer::before { background: var(--accent); inset: 0 calc(50% - 1.5px); } .resizer:focus-visible { outline: none; } .resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 1.5rem; transform: translate(-50%, -50%); background-image: radial-gradient(circle, var(--text-dim) 1px, transparent 1px); background-size: 2px 6px; opacity: 0; transition: opacity 0.15s ease; } .resizer:hover::after, body.resizing .resizer::after { opacity: 1; } body.resizing { cursor: col-resize; user-select: none; } .chat-pane, .process-pane { background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; box-shadow: var(--shadow); /* Both panes are full-height columns whose scrollable region is the list inside them, so neither leaves dead space below its content. */ display: flex; flex-direction: column; min-height: 0; } .toggle { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); cursor: pointer; flex: none; } .messages { flex: 1; min-height: 0; overflow-y: auto; margin-bottom: 1rem; } .message { padding: 0.75rem 1rem; margin-bottom: 0.75rem; border-radius: 0.6rem; line-height: 1.5; overflow-wrap: anywhere; } /* Plain-text messages (what the user typed, error text) keep their line breaks. Markdown-rendered ones use real block elements instead. */ .message.plain { white-space: pre-wrap; } .message.user { background: var(--user-bubble); color: var(--on-user-bubble); } .message.assistant { background: var(--surface-raised); } .message.error { background: var(--error-bg); border-left: 3px solid var(--error-line); color: var(--error-text); } .message .hint { display: block; margin-top: 0.5rem; font-size: 0.85rem; opacity: 0.85; } .composer { display: flex; gap: 0.5rem; flex: none; } #question { flex: 1; padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--surface-raised); color: var(--text); font-size: 1rem; } #question::placeholder { color: var(--text-dim); } #question:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; } #send { padding: 0.7rem 1.4rem; border: none; border-radius: 0.5rem; background: var(--accent); color: var(--on-accent); font-size: 1rem; cursor: pointer; } #send:hover:not(:disabled) { background: var(--accent-hover); } #send:disabled { opacity: 0.5; cursor: default; } #send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .process-pane h2 { font-size: 1.1rem; color: var(--accent); margin-bottom: 1rem; flex: none; } .steps { flex: 1; min-height: 0; overflow-y: auto; } .empty { color: var(--text-dim); font-size: 0.9rem; } .step { background: var(--surface-raised); border-left: 3px solid var(--kind-default); border-radius: 0.4rem; padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.9rem; } .step[data-kind="mcp_frame"] { border-left-color: var(--kind-frame); } .step[data-kind="llm"] { border-left-color: var(--kind-llm); } .step[data-kind="adapter"] { border-left-color: var(--kind-adapter); } .step[data-status="error"] { border-left-color: var(--error-line); background: var(--error-step-bg); } .step-head { display: flex; align-items: center; gap: 0.5rem; } .step-icon { width: 1.1rem; text-align: center; flex-shrink: 0; } .step-title { font-weight: 600; flex: 1; word-break: break-word; } .step-duration { color: var(--text-dim); font-size: 0.75rem; flex-shrink: 0; } .step-desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; } .step.expandable .step-head { cursor: pointer; } .step.expandable .step-title::after { content: " ▾"; color: var(--text-dim); } .step.expandable[data-open="true"] .step-title::after { content: " ▴"; } .step-detail { margin-top: 0.5rem; padding: 0.5rem; background: var(--surface-sunken); border-radius: 0.3rem; overflow-x: auto; } .step-detail pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.5; color: var(--code-text); white-space: pre; tab-size: 2; } /* JSON syntax colours. */ .tok-key { color: var(--tok-key); } .tok-str { color: var(--tok-str); } .tok-num { color: var(--tok-num); } .tok-bool { color: var(--tok-bool); } .tok-null { color: var(--tok-null); font-style: italic; } .detail-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 0.4rem 0 0.2rem; } .detail-label:first-child { margin-top: 0; } /* Markdown, sized to sit inside a chat bubble without shouting. */ .md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; } .md p { margin: 0 0 0.6rem; } .md h1, .md h2, .md h3, .md h4 { margin: 0.9rem 0 0.4rem; line-height: 1.3; color: var(--heading); } .md h1 { font-size: 1.15rem; } .md h2 { font-size: 1.05rem; } .md h3 { font-size: 0.98rem; } .md h4 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .md ul, .md ol { margin: 0 0 0.6rem; padding-left: 1.35rem; } .md li { margin-bottom: 0.3rem; } .md li::marker { color: var(--marker); } .md strong { color: var(--text); font-weight: 650; } .md em { color: var(--text-muted); } .md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 0.25rem; background: var(--inline-code-bg); color: var(--inline-code-text); } .md pre { margin: 0 0 0.6rem; padding: 0.6rem 0.7rem; border-radius: 0.35rem; background: var(--inline-code-bg); overflow-x: auto; } .md pre code { background: none; padding: 0; font-size: 0.78rem; line-height: 1.5; } .md hr { border: none; border-top: 1px solid var(--border); margin: 0.8rem 0; } /* Markdown inside a step detail is prose, not code: let it wrap. */ .step-detail .md { font-size: 0.8rem; color: var(--text-muted); } .spinner { display: inline-block; width: 0.7rem; height: 0.7rem; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 1100px) { /* Stacked: a horizontal split has nothing left to divide, and locking the body to the viewport would trap the content. */ body { display: block; height: auto; overflow: visible; min-height: 100vh; } .panes { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; } .resizer { display: none; } .chat-pane { min-height: 60vh; } .messages, .steps { flex: 0 1 auto; overflow-y: visible; } } @media (max-width: 640px) { .header { padding: 1.25rem 3.5rem; } .header h1 { font-size: 1.3rem; } } @media (prefers-reduced-motion: reduce) { /* Scoped rather than a blanket override: the spinner is the only animation here, so there is nothing else to suppress. */ .spinner { animation: none; border-top-color: var(--accent); } .resizer::before, .resizer::after { transition: none; } body { transition: none; } }