/* Chat with All — timing-tower slate with provider-hued lanes. * Hues encode the provider (information, not decoration): * amber = Anthropic · teal = OpenAI · violet = Workers AI * All metering (model ids, prices, latency) is monospace. * Dark is the default; theme.js stamps data-theme on before paint. */ :root { --bg: #101318; --panel: #171b22; --panel-2: #1d222b; --line: #262c37; --line-strong: #39414f; --text: #e7eaf1; --muted: #8f96a6; --hue-anthropic: #e8a352; --hue-openai: #45c4ab; --hue-workers-ai: #a08df0; --danger: #e07a6a; --ok: #6fbf8f; --primary-hover: #fff; --radius: 10px; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: dark; } :root[data-theme="light"] { --bg: #f4f5f8; --panel: #ffffff; --panel-2: #edeff4; --line: #dcdfe6; --line-strong: #b8bfcc; --text: #1b1f27; --muted: #5d6472; --hue-anthropic: #b06f14; --hue-openai: #0f8a74; --hue-workers-ai: #6a51d9; --danger: #c14b3a; --ok: #257a4d; --primary-hover: #000; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font: 15px/1.55 var(--sans); min-height: 100vh; display: flex; flex-direction: column; } .mono { font-family: var(--mono); } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 12.5px; } a { color: inherit; } /* --- Header ---------------------------------------------------------- */ header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px 12px; border-bottom: 1px solid var(--line); } .brand h1 { margin: 0; font-size: 19px; font-weight: 750; letter-spacing: -0.02em; } .brand-all { position: relative; padding-bottom: 2px; } .brand-all .tri { position: absolute; left: 0; right: 0; bottom: -3px; display: flex; height: 3px; border-radius: 2px; overflow: hidden; } .brand-all .tri i { flex: 1; } .brand-all .tri .a { background: var(--hue-anthropic); } .brand-all .tri .o { background: var(--hue-openai); } .brand-all .tri .w { background: var(--hue-workers-ai); } .tagline { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); } .session { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .navlink { font-size: 13px; color: var(--muted); text-decoration: none; } .navlink:hover { color: var(--text); } .credits { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); } .topup { font-size: 13px; color: var(--muted); } button { font: 600 13.5px/1 var(--sans); border-radius: 8px; padding: 9px 14px; cursor: pointer; border: 1px solid transparent; } button.primary { background: var(--text); color: var(--bg); } button.primary:hover { background: var(--primary-hover); } button.primary:disabled { opacity: 0.45; cursor: default; } button.ghost { background: transparent; color: var(--muted); border-color: var(--line-strong); } button.ghost:hover { color: var(--text); border-color: var(--muted); } button:focus-visible { outline: 2px solid var(--hue-openai); outline-offset: 2px; } /* Label names the theme you'd switch TO (no JS label bookkeeping). */ .theme-toggle::after { content: "Light"; } :root[data-theme="light"] .theme-toggle::after { content: "Dark"; } /* --- Hero (signed out) ------------------------------------------------ */ .hero { max-width: 560px; margin: 48px auto 8px; padding: 0 20px; text-align: center; } .hero h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 10px; font-weight: 750; } .hero p { color: var(--muted); margin: 0 0 18px; } .hero button { margin-bottom: 10px; } /* --- Lanes ------------------------------------------------------------- */ main { flex: 1; display: flex; flex-direction: column; padding: 16px 16px 0; min-height: 0; overflow-y: auto; } .lanes { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; min-height: 0; overflow-x: auto; padding-bottom: 4px; } .lane { display: flex; flex-direction: column; min-height: 320px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--lane-hue, var(--line-strong)); border-radius: var(--radius); min-width: 0; } .lane[data-provider="anthropic"] { --lane-hue: var(--hue-anthropic); } .lane[data-provider="openai"] { --lane-hue: var(--hue-openai); } .lane[data-provider="workers-ai"] { --lane-hue: var(--hue-workers-ai); } .lane-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); } .lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lane-hue, var(--line-strong)); flex-shrink: 0; } .lane.busy .lane-dot { animation: pulse 1.1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .lane.busy .lane-dot { animation: none; } } .lane-model { flex: 1; min-width: 0; font: 500 12.5px var(--mono); color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; } .lane-remove { padding: 4px 8px; font-size: 14px; background: none; border: none; color: var(--muted); } .lane-remove:hover { color: var(--danger); } .lane-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; } .lane-empty { color: var(--muted); font-size: 13px; text-align: center; margin: auto; } .msg-user { align-self: flex-end; max-width: 92%; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); border-bottom-right-radius: 3px; padding: 8px 11px; white-space: pre-wrap; overflow-wrap: break-word; } /* Replies are rendered markdown (markdown.js) — block spacing comes from the * emitted tags, so no pre-wrap here (user bubbles keep it). */ .msg-bot { overflow-wrap: break-word; font-size: 14.5px; } .msg-bot p { margin: 0 0 8px; } .msg-bot > :last-child { margin-bottom: 0; } .msg-bot h1, .msg-bot h2, .msg-bot h3, .msg-bot h4, .msg-bot h5, .msg-bot h6 { margin: 10px 0 6px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .msg-bot h1 { font-size: 16.5px; } .msg-bot h2 { font-size: 15.5px; } .msg-bot ul, .msg-bot ol { margin: 0 0 8px; padding-left: 20px; } .msg-bot li { margin: 2px 0; } .msg-bot code { font: 12.5px var(--mono); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; } .msg-bot pre.codeblock { margin: 0 0 8px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; } .msg-bot pre.codeblock code { background: none; border: none; padding: 0; font: 12.5px/1.5 var(--mono); white-space: pre; } .msg-bot blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 2px solid var(--line-strong); color: var(--muted); } .msg-bot hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; } .msg-bot table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 8px; font-size: 13px; } .msg-bot th, .msg-bot td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; } .msg-bot th { background: var(--panel-2); font-weight: 650; } .msg-bot a { color: var(--hue-openai); } .msg-err { color: var(--danger); font-size: 13px; border-left: 2px solid var(--danger); padding-left: 9px; } .msg-err p { margin: 0 0 3px; } .msg-err .err-head { font-weight: 650; } .msg-err .err-why { color: var(--muted); } .msg-err .err-cost { color: var(--ok); font: 11.5px var(--mono); } .msg-err .err-detail summary { cursor: pointer; color: var(--muted); font: 11.5px var(--mono); } .msg-err .err-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; margin: 4px 0 0; } /* Budget-scaled run hit its output cap - nudge toward a top-up. */ .msg-cut { margin: 0; font: 12px var(--mono); color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 9px; } .msg-cut a { color: var(--hue-openai); } /* Live call status under a pending answer: spinner, phase, elapsed clock. */ .msg-status { display: flex; align-items: center; gap: 8px; font: 11.5px var(--mono); color: var(--muted); } .msg-status .spin { width: 10px; height: 10px; flex-shrink: 0; border: 1.5px solid var(--line-strong); border-top-color: var(--lane-hue, var(--muted)); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .msg-status .spin { animation: none; } } .msg-status .clock { color: var(--text); } /* Per-answer receipt: the two axes this app exists to expose. */ .msg-receipt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 7px; } .msg-receipt .chip { border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; white-space: nowrap; } .msg-receipt .chip.cost { color: var(--ok); border-color: var(--ok); } .msg-receipt .chip.warn-chip { color: var(--danger); border-color: var(--danger); } .msg-receipt .chip.muted-chip { opacity: 0.7; } .msg-receipt .chip-spacer { flex: 1; min-width: 0; } button.small-btn { font-size: 11.5px; padding: 4px 9px; border-radius: 6px; } .msg-err button.small-btn { margin-top: 6px; } .lane-rate { margin: 0; padding: 5px 10px 0; font-size: 11px; color: var(--muted); } .lane-include { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); cursor: pointer; flex-shrink: 0; } .lane-include input { accent-color: var(--lane-hue, var(--hue-openai)); margin: 0; } .catalogue-note { margin: 0 0 10px; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 9px; } .lane-actions { display: flex; gap: 8px; padding: 10px 0 12px; align-items: center; flex-wrap: wrap; } .lane-actions .spacer { flex: 1; min-width: 0; } /* --- Readout ------------------------------------------------------------- * The free, browser-derived conclusion under the lanes: standouts (fastest, * cheapest, longest) and the shared/unique word read. Deliberately quieter than * a lane — it is a reading aid, and must not look like a fifth answer. */ .readout { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--hue-openai); border-radius: var(--radius); padding: 10px 14px; margin: 10px 0 0; } .readout-head { margin: 0 0 6px; font-size: 13px; font-weight: 650; } .readout-sub { color: var(--muted); font-weight: 400; } .readout-stand { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: 11.5px; } .readout-stand .chip { border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; color: var(--text); white-space: nowrap; } .readout-words { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .readout-words strong { color: var(--text); font-weight: 600; } .readout-words.unique strong { color: var(--hue-workers-ai); } .readout-words.shared strong { color: var(--hue-openai); } /* --- History ------------------------------------------------------------- */ .history-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; } .history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .history-head h2 { font-size: 15px; margin: 0 0 4px; } .history-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .history-item { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); } .history-q { margin: 0 0 3px; font-weight: 600; overflow-wrap: anywhere; } .history-meta { margin: 0 0 6px; color: var(--muted); } .history-agree { margin: 0 0 6px; overflow-wrap: anywhere; } .history-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* --- About and FAQ -------------------------------------------------------- */ .about { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 14px; } .about > summary { cursor: pointer; font-weight: 650; font-size: 14px; } .about-body { padding-top: 6px; max-width: 68ch; } .about-body h2 { font-size: 14.5px; margin: 14px 0 4px; } .about-body p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; } .about-body a { color: var(--hue-openai); } /* --- Composer ----------------------------------------------------------- */ .composer { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); padding: 8px 16px 10px; } .meter { margin: 0 0 6px; font-size: 11.5px; color: var(--muted); min-height: 1.2em; } /* A blocked run (short balance, unavailable lane, no lanes ticked) must not * look like the ordinary grey estimate line. */ .meter.short { color: var(--danger); } /* `.short` is set by app.js whenever the meter is carrying the reason the Ask * button is OFF (no lanes ticked, a lane that cannot be priced, not enough * credits). A blocked run explained in the same grey as the ordinary price line * is a message nobody reads. */ .meter.short { color: var(--danger); } .composer-row { display: flex; gap: 10px; align-items: flex-end; } #prompt { flex: 1; resize: none; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; font: 15px/1.5 var(--sans); } #prompt:focus-visible { outline: 2px solid var(--hue-openai); outline-offset: 1px; } #ask { padding: 12px 22px; } .credit-note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; } /* --- Toasts --------------------------------------------------------------- */ #toasts { position: fixed; bottom: 100px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; } .toast { background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 13px; font-size: 13px; max-width: 340px; cursor: pointer; } .toast.err { border-color: var(--danger); } .toast a { color: var(--hue-openai); } /* --- Mobile ---------------------------------------------------------------- */ @media (max-width: 768px) { header { flex-wrap: wrap; } .lanes { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr; overflow-x: visible; } .lane { min-height: 220px; max-height: 45vh; } .hero h2 { font-size: 24px; } }