/* ============================================================ Free AI Agent — ChatGPT-style UI, dark (default) + light. Theme is switched via . ============================================================ */ :root, :root[data-theme="dark"] { --bg: #212121; /* main chat surface */ --bg-sidebar: #171717; --bg-elevated: #2f2f2f; /* hover, cards */ --bg-elevated-2: #424242; --bg-input: #303030; --bg-user: #303030; /* user message bubble */ --text: #ececec; --text-2: #cfcfcf; --muted: #afafaf; --faint: #8f8f8f; --border: rgba(255,255,255,.10); --border-2: rgba(255,255,255,.16); --accent: #8ab4ff; /* links / focus */ --accent-soft: rgba(138,180,255,.16); --good: #19c37d; --warn: #e0a83a; --danger: #ff6b6b; /* the "primary" button color flips with the theme so it always contrasts */ --primary-bg: #ececec; --primary-fg: #1a1a1a; --primary-hover:#ffffff; color-scheme: dark; } :root[data-theme="light"] { --bg: #ffffff; --bg-sidebar: #f9f9f9; --bg-elevated: #ececec; --bg-elevated-2: #e0e0e0; --bg-input: #f4f4f4; --bg-user: #f0f0f0; --text: #0d0d0d; --text-2: #2d2d2d; --muted: #5d5d5d; --faint: #8f8f8f; --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.16); --accent: #2563eb; --accent-soft: rgba(37,99,235,.10); --good: #0e9f6e; --warn: #b4690e; --danger: #dc2626; --primary-bg: #1a1a1a; --primary-fg: #ffffff; --primary-hover:#000000; color-scheme: light; } :root { --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --topbar-h: 56px; --rail-w: 268px; --radius: 12px; --radius-sm: 8px; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; -webkit-font-smoothing: antialiased; /* no grey flash when tapping controls on iOS; keep chat/rail scroll from bouncing the whole page or triggering pull-to-refresh */ -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } #app { display: grid; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; overflow: hidden; /* only the transcript / rail scroll, never the page */ } /* ============ Top bar ============ */ .topbar { display: flex; align-items: center; gap: 18px; padding: 0 18px 0 0; /* No divider line. The left slice matches the sidebar and the right slice matches the chat area (hard stop at the rail width), so the bar blends into both columns. */ background: linear-gradient(to right, var(--bg-sidebar) 0 var(--rail-w), var(--bg) var(--rail-w)); position: relative; } .topbar-rail { width: var(--rail-w); min-width: 0; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; height: 100%; border-right: 1px solid var(--border); } .topbar-brand { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .brand-mark { width: 34px; height: 34px; flex: none; /* the sprout icon is its own rounded square — no chip background needed */ } .brand-mark svg { width: 100%; height: 100%; display: block; } .brand-text { min-width: 0; display: flex; flex-direction: column; justify-content: center; } .brand-text h1 { font-weight: 700; font-size: 18px; margin: 0; line-height: 1.1; letter-spacing: -.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subtitle { display: none; } /* readiness + model picker */ .topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; } .topbar-model { display: flex; align-items: center; gap: 9px; padding: 6px 12px; min-width: 150px; max-width: 250px; min-height: 36px; flex: 0 1 auto; /* status indicator, not a content bubble: ghost fill so it reads as chrome */ border: 1px solid transparent; border-radius: 9px; background: transparent; position: relative; } .topbar-model[data-state="ready"] { background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 30%, transparent); } .topbar-model[data-state="loading"] { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .topbar-model[data-state="error"] { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--faint); } .model-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .mm-top { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; } .status-line { font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-pct { font-size: 11px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .status-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; } .topbar-model[data-state="loading"] .status-dot { background: var(--warn); animation: blink 1s steps(2) infinite; } .topbar-model[data-state="ready"] .status-dot { background: var(--good); } .topbar-model[data-state="error"] .status-dot { background: var(--danger); } .topbar-model[data-state="ready"] .status-line { color: var(--muted); } .topbar-model[data-state="error"] .status-line { color: var(--danger); } .topbar-model[data-state="ready"] .status-sub { display: none; } /* once ready the pill only shows "Model ready"; shrink to it and drop the empty percentage slot so space-between doesn't leave a gap after the text */ .topbar-model[data-state="ready"] { min-width: 0; } .topbar-model[data-state="ready"] .status-pct { display: none; } @keyframes blink { 50% { opacity: .25; } } .topbar-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; border-radius: 0 0 999px 999px; } .topbar-model[data-state="ready"] .topbar-progress, .topbar-model[data-state="error"] .topbar-progress { display: none; } .progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .25s ease; } /* Per-file download breakdown — shown only while a multi-shard (Transformers.js) model is loading, so the user sees each file's own bar instead of one flickering. Anchored to the .topbar itself (its direct parent, position: relative), dropping just below the bar on the right — the mobile query turns it into a static row. */ .download-panel { position: absolute; top: calc(100% + 8px); right: 14px; z-index: 30; width: 280px; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); box-shadow: 0 18px 48px rgba(0,0,0,.28); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .download-panel[hidden] { display: none; } .dl-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; } .dl-name { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dl-pct { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; } .dl-track { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--bg-elevated-2); overflow: hidden; } .dl-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .25s ease; } .dl-row.done .dl-name { color: var(--faint); } .dl-row.done .dl-fill { background: var(--good); } /* Size to the selected model's text so the trigger rescales per model (no trailing gap for short descriptions); cap it and truncate beyond that. */ .model-picker { position: relative; width: max-content; min-width: 180px; max-width: 360px; flex: none; } .model-picker-button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 12px; color: var(--text); /* a control, not a bubble: flat outlined trigger distinct from the chat */ background: transparent; border: 1px solid var(--border-2); border-radius: 10px; text-align: left; transition: background .12s ease, border-color .12s ease; } .model-picker-button:hover:not(:disabled), .model-picker.open .model-picker-button { background: var(--bg-elevated); border-color: var(--faint); } .model-picker-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .model-picker-button:disabled { opacity: .5; cursor: not-allowed; } .model-picker-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; } .model-picker-name { font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .model-picker-meta { font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .model-picker-button svg { width: 18px; height: 18px; flex: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: transform .12s ease; } .model-picker.open .model-picker-button svg { transform: rotate(180deg); } .model-picker-menu { /* Above the download panel (z 30): while a model downloads, an opened picker menu must win, not hide behind the progress popover. */ position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(360px, 70vw); max-height: min(420px, calc(100vh - 72px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 18px 48px rgba(0,0,0,.28); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .model-picker-menu::-webkit-scrollbar { width: 8px; } .model-picker-menu::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; } .model-option { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 11px; border: 0; border-radius: 12px; color: var(--text); background: transparent; text-align: left; } .model-option:hover:not(:disabled), .model-option[aria-selected="true"] { background: var(--bg-elevated-2); } .model-option:disabled { opacity: .55; cursor: default; } .model-option-name { min-width: 0; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .model-option-size { color: var(--muted); font-size: 12px; white-space: nowrap; } .model-option-rec { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; color: var(--primary-fg); background: var(--primary-bg); font-size: 10px; font-weight: 700; } .model-option-best { grid-column: 1 / -1; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* theme toggle */ .icon-btn { width: 34px; height: 34px; flex: none; padding: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-elevated); color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s; } .icon-btn:hover:not(:disabled) { background: var(--bg-elevated-2); } .icon-btn .ic { display: none; } :root[data-theme-choice="system"] .icon-btn .ic-system { display: inline; } :root[data-theme-choice="light"] .icon-btn .ic-light { display: inline; } :root[data-theme-choice="dark"] .icon-btn .ic-dark { display: inline; } .model-hint { display: none; } /* sidebar toggle in the rail header */ .rail-toggle { width: 30px; height: 30px; border-color: transparent; background: transparent; color: var(--muted); font-size: 15px; } .rail-toggle:hover:not(:disabled) { background: var(--bg-elevated); } /* ============ Workspace ============ */ .workspace { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: minmax(0, 1fr); min-height: 0; } /* collapsed sidebar: drop the rail column and let the chat span full width */ #app.rail-collapsed .workspace { grid-template-columns: 1fr; } #app.rail-collapsed .rail { display: none; } #app.rail-collapsed .topbar { background: var(--bg); } /* no rail slice to match anymore */ /* ---------- Sidebar ---------- */ .rail { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg-sidebar); } .panel { padding: 14px 12px; } .panel + .panel { border-top: 1px solid var(--border); } .panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin-bottom: 8px; padding: 0 10px; } .panel-head h2 { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin: 0; } .file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .file-list li { flex: 0 0 auto; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; } .file-list li.doc { display: flex; align-items: stretch; gap: 0; padding: 0; position: relative; } .file-list li.doc:hover { background: var(--bg-elevated); } .file-list li.doc .doc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; text-align: left; padding: 8px 10px; color: inherit; font: inherit; } .file-list li.doc .doc-del { flex: none; align-self: stretch; background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 11px; padding: 0 11px; opacity: 0; transition: opacity .12s ease, color .12s ease; } .file-list li.doc:hover .doc-del { opacity: 1; } .file-list li.doc .doc-del:hover { color: var(--danger); } .file-list li.doc .ic { flex: none; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); background: var(--bg-elevated); border-radius: 5px; padding: 5px 5px; line-height: 1; } .file-list li .name { font-weight: 500; font-size: 13px; word-break: break-word; line-height: 1.35; color: var(--text); } .file-list li .meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .file-list .empty { background: none; border: 1px dashed var(--border-2); color: var(--faint); text-align: center; font-size: 12px; padding: 14px; border-radius: var(--radius-sm); } /* "New chat" button atop the Chats panel */ .new-chat-btn { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); } .new-chat-btn:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); border-color: var(--border); } .new-chat-btn .nc-plus { font-size: 16px; line-height: 1; } .chats-panel { flex: 2 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .docs-panel, .skills-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .chats-panel .new-chat-btn { flex: none; } .chats-panel .panel-head { margin-bottom: 8px; flex: none; } .docs-panel .panel-head, .skills-panel .panel-head { flex: none; } .chats-panel .conv-list, .docs-panel .file-list, .skills-panel .file-list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } .chats-panel .conv-list::-webkit-scrollbar, .docs-panel .file-list::-webkit-scrollbar, .skills-panel .file-list::-webkit-scrollbar { width: 8px; } .chats-panel .conv-list::-webkit-scrollbar-thumb, .docs-panel .file-list::-webkit-scrollbar-thumb, .skills-panel .file-list::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; } /* conversation list */ .conv-list li.conv { flex: 0 0 auto; display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; cursor: pointer; border-radius: var(--radius-sm); transition: background .12s; } .conv-list li.conv:hover { background: var(--bg-elevated); } .conv-list li.conv.active { background: var(--bg-elevated); } .conv-list li.conv .conv-open { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; background: none; border: none; color: inherit; padding: 8px 10px; text-transform: none; letter-spacing: 0; font-weight: 400; } .conv-list li.conv .conv-open:hover { background: none; color: inherit; } .conv-list li.conv .conv-open .name { font-weight: 400; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .conv-list li.conv .conv-open .meta { font-size: 10px; color: var(--faint); } .conv-list li.conv .conv-del { flex: none; align-self: stretch; width: 30px; padding: 0; background: none; color: var(--faint); border: none; font-size: 12px; opacity: 0; transition: opacity .12s, color .12s; } .conv-list li.conv:hover .conv-del, .conv-list li.conv.active .conv-del { opacity: 1; } .conv-list li.conv .conv-del:hover { color: var(--danger); } /* in-app delete confirmation */ .conv-list li.conv { position: relative; } .conv-confirm { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 11px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--danger); animation: confirm-in .12s ease; } @keyframes confirm-in { from { opacity: 0; transform: translateX(6px); } } .conv-confirm .cc-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--danger); text-transform: none; letter-spacing: 0; white-space: nowrap; } .conv-confirm button { flex: none; padding: 5px 11px; font-size: 11px; letter-spacing: 0; text-transform: none; border-radius: 7px; } .conv-confirm .cc-yes { background: var(--danger); border-color: var(--danger); color: #fff; } .conv-confirm .cc-yes:hover { filter: brightness(1.1); background: var(--danger); border-color: var(--danger); color: #fff; } .conv-confirm .cc-no { background: transparent; border-color: var(--border-2); color: var(--text); } .conv-confirm .cc-no:hover { background: var(--bg-elevated-2); color: var(--text); } .file-list li.proc { border: 1px dashed var(--border-2); } .file-list li.proc.failed { border-color: var(--danger); border-style: solid; color: var(--danger); } .file-list li.proc .meta { display: flex; align-items: center; gap: 8px; } .progress { height: 4px; background: var(--bg-elevated); border-radius: 999px; overflow: hidden; } .progress.sm { height: 4px; margin-top: 8px; } .rail-foot { margin-top: auto; padding: 12px; } /* ============ Buttons ============ */ button { font-family: var(--sans); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--primary-bg); color: var(--primary-fg); padding: 8px 14px; transition: background .12s, color .12s, border-color .12s, opacity .12s; } button:hover:not(:disabled) { background: var(--primary-hover); } button:disabled { opacity: .4; cursor: not-allowed; } button.mini { padding: 4px 10px; font-size: 12px; background: transparent; color: var(--muted); border-color: var(--border); } button.mini:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); } button.ghost { background: transparent; color: var(--text); border-color: var(--border); } button.ghost:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); } button.ghost.danger { color: var(--danger); border-color: var(--border); width: 100%; } button.ghost.danger:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--danger); color: var(--danger); } /* ============ Conversation ============ */ .chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); } .transcript { flex: 1; overflow-y: auto; padding: 24px 20px 40px; } /* Empty new chat: vertically center the greeting + composer as one group (ChatGPT style). Once messages exist the composer drops back to the bottom. */ .chat.is-empty { justify-content: center; } .chat.is-empty .transcript { flex: 0 0 auto; overflow: visible; padding-bottom: 12px; } .chat.is-empty .empty-state { margin-top: 0; } .chat.is-empty .composer { margin-bottom: 0; } /* onboarding empty state — centered greeting */ .empty-state { max-width: 600px; margin: 14vh auto 0; text-align: center; color: var(--muted); } /* the sprout mark, larger than the topbar one, leading the greeting */ .es-logo { width: 56px; height: 56px; margin: 0 auto 18px; } .es-logo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 18px rgba(147, 214, 46, .3)); } /* Quiet micro-label, NOT a pill — a pill here read as a twin of the oval composer right below it (two stacked ovals). */ .es-kicker { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .empty-state h2 { font-weight: 600; color: var(--text); font-size: 32px; line-height: 1.15; margin: 0 0 14px; letter-spacing: -.025em; } .empty-state p { line-height: 1.65; font-size: 15px; margin: 0 auto 22px; max-width: 460px; color: var(--muted); } /* Example-prompt chips: soft rounded rectangles (deliberately not full pills) that fill the composer — give the empty page something tappable. */ .es-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; } .es-chip { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; transition: background .12s ease, border-color .12s ease, color .12s ease; } .es-chip:hover:not(:disabled) { background: var(--bg-elevated-2); border-color: var(--border-2); color: var(--text); } .empty-state code { background: var(--bg-elevated); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 12px; color: var(--text); } .kbd { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text); vertical-align: middle; } .kbd svg { display: block; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; } .note { max-width: 760px; margin: 0 auto 18px; padding: 12px 15px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--border-2); color: var(--text-2); font-size: 13px; line-height: 1.6; } /* messages */ .msg { max-width: 760px; margin: 0 auto 22px; } .msg .role { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .msg .bubble { background: transparent; border: none; padding: 2px 0; white-space: pre-wrap; line-height: 1.7; word-wrap: break-word; color: var(--text); } /* user messages: a rounded gray bubble aligned to the right (ChatGPT style) */ .msg.user { display: flex; flex-direction: column; align-items: flex-end; } .msg.user .role { color: var(--muted); flex-direction: row-reverse; } .msg.user .bubble { max-width: 80%; display: inline-block; background: var(--bg-user); border-radius: 20px; padding: 10px 16px; } .msg .bubble code { font-family: var(--mono); background: var(--bg-elevated); border-radius: 5px; padding: 1px 5px; font-size: .88em; color: var(--text); } /* rendered markdown inside agent replies */ .msg .bubble.md { white-space: normal; } .bubble.md > :first-child { margin-top: 0; } .bubble.md > :last-child { margin-bottom: 0; } .bubble.md p { margin: 0 0 12px; line-height: 1.7; } .bubble.md ul, .bubble.md ol { margin: 0 0 12px; padding-left: 24px; } .bubble.md li { margin: 4px 0; line-height: 1.6; } .bubble.md h1, .bubble.md h2, .bubble.md h3, .bubble.md h4, .bubble.md h5, .bubble.md h6 { font-weight: 600; line-height: 1.3; margin: 18px 0 8px; font-size: 15px; color: var(--text); } .bubble.md h1 { font-size: 20px; } .bubble.md h2 { font-size: 17px; } .bubble.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .bubble.md a:hover { opacity: .85; } .bubble.md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 2px solid var(--border-2); color: var(--muted); } .bubble.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .bubble.md .md-pre { margin: 0 0 12px; padding: 13px 15px; overflow-x: auto; border-radius: var(--radius); background: var(--bg-sidebar); border: 1px solid var(--border); } .bubble.md .md-pre code { background: none; padding: 0; font-size: 12.5px; color: var(--text); } /* tool trace */ .trace { margin-top: 12px; } .trace summary { cursor: pointer; font-size: 12px; color: var(--muted); user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 6px; } .trace summary::before { content: "▸"; color: var(--muted); } .trace[open] summary::before { content: "▾"; } .trace summary::-webkit-details-marker { display: none; } .trace summary:hover { color: var(--text); } .trace .call { font-family: var(--mono); font-size: 11.5px; border-radius: var(--radius-sm); background: var(--bg-sidebar); border: 1px solid var(--border); padding: 10px 12px; margin-top: 8px; white-space: pre-wrap; color: var(--muted); line-height: 1.6; } .trace .call .tname { color: var(--accent); font-weight: 600; } /* sources */ .sources { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .source-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-2); border-radius: 999px; padding: 4px 12px; } .source-chip:hover:not(:disabled) { background: var(--bg-elevated-2); color: var(--text); border-color: var(--border-2); } /* ============ Composer (rounded pill) ============ */ .composer { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 26px; margin-bottom: 22px; } .chat > .composer { margin-left: auto; margin-right: auto; } .composer textarea { flex: 1; resize: none; align-self: center; background: transparent; border: none; border-radius: 0; color: var(--text); padding: 8px 2px; font-family: var(--sans); font-size: 15px; line-height: 1.5; max-height: 200px; } .composer textarea::placeholder { color: var(--faint); } .composer textarea:focus { outline: none; } .composer button { flex: none; width: 36px; height: 36px; padding: 0; align-self: center; border-radius: 50%; display: grid; place-items: center; } .composer button svg { display: block; width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* display_html widget: a sandboxed iframe rendered inline in an assistant message. */ .widget-frame { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated); margin: 8px 0 2px; height: 120px; /* initial; JS resizes to content (capped) via postMessage */ max-height: 440px; /* keep WIDGET_MAX_H in app.js in sync */ display: block; } /* Stop state: the send button flips to a filled square on a stop-red circle while generating. The send arrow is stroked; the stop square is filled, so override here. */ .composer button.is-stop { background: #e5534b; color: #fff; } .composer button.is-stop:hover:not(:disabled) { background: #d64339; } .composer button.is-stop svg { fill: currentColor; stroke: none; } /* the "+" attach button is a quiet, outlined circle (the send button stays solid) */ .composer .attach-btn { background: transparent; color: var(--text); border: 1px solid var(--border); } .composer .attach-btn:hover:not(:disabled) { background: var(--bg-elevated); } .composer:focus-within { border-color: var(--border-2); } /* ============ Drawer ============ */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(580px, 92vw); background: var(--bg-sidebar); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.25); display: flex; flex-direction: column; z-index: 30; } .drawer[hidden] { display: none; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); } .drawer pre { margin: 0; padding: 18px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.8; white-space: pre-wrap; color: var(--text-2); } .drawer pre .hot { background: var(--accent-soft); color: var(--text); display: block; box-shadow: inset 3px 0 0 var(--accent); padding-left: 8px; margin-left: -8px; } /* ============ Drag overlay ============ */ .drag-veil { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); pointer-events: none; } body.dragging .drag-veil { display: grid; } .drag-card { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); background: var(--bg-elevated); border: 1.5px dashed var(--accent); border-radius: var(--radius); padding: 26px 38px; } /* ============ misc ============ */ .spinner { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -1px; } @keyframes spin { to { transform: rotate(360deg); } } .hidden { display: none !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--bg-elevated-2); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* the scrim is desktop-only inert; the mobile query below activates it */ .rail-scrim { display: none; } /* ============================================================ Mobile / narrow screens (≤ 768px) - Topbar wraps to two rows so the model controls have room. - The sidebar becomes a slide-in overlay drawer over the chat. ============================================================ */ @media (max-width: 768px) { #app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; /* fallback */ height: 100dvh; /* accounts for mobile browser chrome */ } /* let the grid rows shrink to the viewport instead of overflowing to their content's min-content width (which #app then clips) */ #app > * { min-width: 0; } /* ---- Topbar: two rows (brand + actions) ---- */ .topbar { flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 12px 8px; /* tight at the top, breathing room below */ background: var(--bg); /* no rail column to blend into */ } .topbar-rail { order: 1; width: auto; flex: 1 1 auto; height: auto; padding: 0; border-right: none; gap: 8px; } .brand-text h1 { font-size: 16px; } .topbar-actions { order: 2; width: 100%; min-width: 0; margin-left: 0; gap: 8px; } /* Compact, lightly-rounded controls instead of the desktop full pills. Each collapses to a single content-width line, so the short top line no longer leaves dead space trailing it. */ .topbar-model, .model-picker-button { min-height: 32px; padding: 5px 10px; border-radius: 10px; } .topbar-model { flex: 0 1 auto; min-width: 0; max-width: 62%; gap: 8px; } .model-picker { flex: 0 1 auto; min-width: 0; max-width: 62%; width: auto; } /* hide the secondary lines on mobile — that's what made the pills oversized */ .topbar-model .status-sub, .model-picker-meta { display: none; } .model-picker-copy { flex: 0 1 auto; } .model-picker-button { gap: 6px; padding-right: 8px; } .model-picker-button svg { width: 16px; height: 16px; } .topbar-progress { border-radius: 0 0 10px 10px; } .mm-top { gap: 8px; } .icon-btn { flex: none; width: 32px; height: 32px; } /* The download breakdown joins the flow as a third topbar row instead of a floating popover: always fully on-screen (a 280px right-anchored popover ran off the viewport here) and it can never cover the model menu. */ .download-panel { position: static; order: 3; width: 100%; max-height: 168px; padding: 9px 11px; box-shadow: none; } /* The model menu becomes a full-width bottom sheet: the desktop dropdown, right-anchored to a trigger sitting mid-row, ran off the left edge of the screen — and a sheet is thumb-reachable. Above the rail drawer (z 60). */ .model-picker-menu { position: fixed; top: auto; right: 10px; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-height: min(70vh, 480px); z-index: 70; box-shadow: 0 -12px 48px rgba(0,0,0,.4); animation: sheet-up .18s ease; } /* ---- Sidebar as an overlay drawer ---- */ .workspace { grid-template-columns: 1fr; } .rail { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 32px rgba(0,0,0,.45); /* clear the notch (left) and home indicator (bottom) in the overlay drawer */ padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); } /* keep the rail in the DOM when collapsed (overridden vs. the desktop rule) so it can slide rather than pop */ #app.rail-collapsed .rail { display: flex; } #app:not(.rail-collapsed) .rail { transform: translateX(0); } #app.rail-collapsed .topbar, #app:not(.rail-collapsed) .topbar { background: var(--bg); } .rail-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .rail-scrim[hidden] { display: none; } /* ---- Roomier touch targets + tighter content padding ---- */ .rail-toggle { width: 32px; height: 32px; } .transcript { padding: 16px 14px 32px; } .msg { margin-bottom: 18px; } .msg.user .bubble { max-width: 90%; } /* keep the composer off the screen edges (matches the transcript gutters) and clear of the iPhone home indicator (safe-area inset) */ .composer { width: auto; margin-bottom: calc(14px + env(safe-area-inset-bottom)); } .chat > .composer { margin-left: calc(14px + env(safe-area-inset-left)); margin-right: calc(14px + env(safe-area-inset-right)); } .composer textarea { font-size: 16px; } /* ≥16px stops iOS zoom-on-focus */ .empty-state { margin-top: 8vh; padding: 0 4px; } .es-logo { width: 46px; height: 46px; margin-bottom: 14px; } .empty-state h2 { font-size: 26px; } .empty-state p { font-size: 14px; } .es-kicker { max-width: 100%; text-align: center; line-height: 1.4; } /* the source-preview drawer goes full width */ .drawer { width: 100vw; } } @keyframes sheet-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } /* Very narrow phones: drop the brand wordmark, keep just the badge */ @media (max-width: 400px) { .brand-text { display: none; } }