/* Light is the default token set. Every surface below is painted purely from these variables, so a theme is just a different set of values for them. */ :root { color-scheme: light; --bg: #ffffff; --fg: #0a0a0a; --muted: #6b6b6b; --line: #e6e6e6; --panel: #fafafa; --panel-2: #f2f2f2; --danger: #b3261e; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Dark tokens. Kept identical between the two blocks below: one follows the OS preference (only while the user hasn't picked a theme), the other is forced by the topbar toggle via [data-theme="dark"] on . data-theme="light" wins over the OS preference because the media rule excludes any explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0b0b0b; --fg: #f3f3f3; --muted: #9b9b9b; --line: #242424; --panel: #131313; --panel-2: #1b1b1b; --danger: #ff6b6b; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0b; --fg: #f3f3f3; --muted: #9b9b9b; --line: #242424; --panel: #131313; --panel-2: #1b1b1b; --danger: #ff6b6b; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; font-family: var(--sans); color: var(--fg); background: var(--bg); font-size: 15px; line-height: 1.5; /* A definite height lets the transcript scroll internally instead of growing the page; dvh tracks the mobile URL bar so the composer stays reachable, with a vh fallback. No overflow:hidden here — on a pathologically short (landscape) screen the viewport can still scroll to the input rather than clip it. */ height: 100vh; height: 100dvh; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; } .mark { font-size: 24px; line-height: 1; } .brand-text h1 { margin: 0; font-size: 17px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; } .badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; } .tagline { margin: 2px 0 0; font-size: 12px; color: var(--muted); } .tabs { display: flex; gap: 6px; } .tab { border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; } .tab.active { color: var(--bg); background: var(--fg); border-color: var(--fg); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); font-size: 14px; line-height: 1; cursor: pointer; } .theme-toggle:hover { border-color: var(--fg); } .banner { margin: 0; padding: 9px 16px 9px 22px; font-size: 13px; border-bottom: 1px solid var(--line); color: var(--muted); background: var(--panel); display: flex; align-items: flex-start; gap: 12px; } #banner-text { flex: 1; min-width: 0; } .banner-dismiss { flex: none; border: none; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; margin: -2px 0; border-radius: 6px; cursor: pointer; } .banner-dismiss:hover { color: var(--fg); } .banner.warn { color: var(--fg); background: var(--panel-2); border-bottom: 1px solid var(--fg); } .banner.ok { color: var(--fg); border-left: 3px solid var(--fg); } /* Recoverable load failure: a restrained red accent on the otherwise monochrome surface — enough to read as an error without turning the UI colorful. */ .banner.error { color: var(--fg); background: var(--panel-2); border-bottom: 1px solid var(--danger); border-left: 3px solid var(--danger); } main { flex: 1; min-height: 0; display: flex; } .view { display: none; flex: 1; min-height: 0; } .view.active { display: flex; flex-direction: column; } .modelbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 22px; border-bottom: 1px solid var(--line); } .model-status { font-size: 13px; color: var(--muted); font-family: var(--mono); } /* Collapsed by default so the verbose model guidance is one short line, not a permanent multi-line block; native
keeps it keyboard-accessible. */ .model-hint { background: var(--panel); border-bottom: 1px solid var(--line); } .model-hint > summary { padding: 7px 22px; font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; user-select: none; } .model-hint > summary::-webkit-details-marker { display: none; } .model-hint > summary::before { content: "\24D8"; /* circled i */ margin-right: 6px; } .model-hint[open] > summary { color: var(--fg); } .model-hint p { margin: 0; padding: 0 22px 10px; font-size: 12px; line-height: 1.45; color: var(--muted); } .modelbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .model-select { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; } .model-select:hover:not(:disabled) { border-color: var(--fg); } .model-select:disabled { opacity: 0.45; cursor: default; } .solid, .ghost { border: 1px solid var(--fg); border-radius: 8px; padding: 7px 16px; font: inherit; font-size: 13px; cursor: pointer; } .solid { background: var(--fg); color: var(--bg); } .ghost { background: transparent; color: var(--fg); } .solid:disabled, .ghost:disabled { opacity: 0.45; cursor: default; } .progress { flex-basis: 100%; display: flex; align-items: center; gap: 12px; } .progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--line); } .progress-bar { height: 100%; width: 0%; background: var(--fg); transition: width 0.2s ease; } .progress-text { font-size: 12px; color: var(--muted); font-family: var(--mono); min-width: 42%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The primary region: grows to fill all height the compact chrome leaves and scrolls internally, so the conversation is always the tallest thing on screen. */ .transcript { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; } .entry { max-width: 820px; width: 100%; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--panel); } .entry .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; } .entry.user { background: var(--fg); color: var(--bg); border-color: var(--fg); } .entry.user .label { color: var(--bg); opacity: 0.6; } .entry .text { white-space: pre-wrap; word-wrap: break-word; } .entry .code { margin: 0; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; word-break: break-word; } .entry.obs.error .code { color: var(--fg); } .entry.denied { border-style: dashed; } .entry.final { border: 2px solid var(--fg); background: var(--bg); } .entry.final .text { font-size: 16px; } .entry.approval { border: 2px solid var(--fg); background: var(--panel-2); } .entry.approval .desc { color: var(--muted); font-size: 13px; margin-top: 6px; } .actions { display: flex; gap: 8px; margin-top: 12px; } .btn { border: 1px solid var(--fg); background: transparent; color: var(--fg); padding: 7px 16px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; } .btn.primary { background: var(--fg); color: var(--bg); } .btn:disabled { opacity: 0.45; cursor: default; } .decision { font-size: 13px; color: var(--muted); } .think-row { display: flex; align-items: center; gap: 10px; } .think { display: inline-flex; gap: 4px; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out both; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } .think-text { font-size: 13px; color: var(--muted); } .tray { border-top: 1px solid var(--line); padding: 12px 22px 16px; } .tray-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; } .presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 10px; padding: 8px 12px; font: inherit; cursor: pointer; text-align: left; } .chip:hover:not(:disabled) { border-color: var(--fg); } .chip:disabled { opacity: 0.45; cursor: default; } .chip-label { font-size: 13px; } .chip-hint { font-size: 11px; color: var(--muted); } .composer { display: flex; gap: 10px; align-items: flex-end; } #message { flex: 1; resize: none; max-height: 160px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--fg); background: var(--panel); } #message:focus { outline: none; border-color: var(--fg); } #message:disabled { opacity: 0.6; } #send { border: 1px solid var(--fg); background: var(--fg); color: var(--bg); padding: 11px 22px; border-radius: 10px; font: inherit; cursor: pointer; } #send:disabled { opacity: 0.45; cursor: default; } .audit-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 0; max-width: 900px; margin: 0 auto; width: 100%; } .audit-head h2 { margin: 0; font-size: 16px; } .audit-actions { display: flex; gap: 8px; } .audit-actions button { border: 1px solid var(--line); background: transparent; color: var(--fg); padding: 6px 14px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer; } .audit-body { flex: 1; overflow-y: auto; padding: 16px 24px 32px; max-width: 900px; margin: 0 auto; width: 100%; } .muted { color: var(--muted); } .run-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--panel); } .run-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; } .run-id { font-family: var(--mono); font-size: 13px; } .run-meta { font-size: 12px; color: var(--muted); } .run-goal { margin-top: 6px; font-size: 13px; color: var(--muted); } .run-answer { margin-top: 6px; white-space: pre-wrap; } .records { margin-top: 12px; } .record { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; } .rec-kind { font-family: var(--mono); color: var(--muted); } .rec-detail { word-break: break-word; } .rec-ts { color: var(--muted); font-size: 11px; font-family: var(--mono); } /* Phones (reason about ~375px): trim every fixed region so the transcript keeps the majority of the screen, stack controls, and turn the task chips into one swipeable row so they never crowd the input. */ @media (max-width: 640px) { body { font-size: 14px; } .topbar { padding: 10px 14px; gap: 10px; } .brand-text h1 { font-size: 16px; } .tagline { display: none; /* reclaim a row; the h1 still identifies the app */ } .badge { display: none; /* keep the header on one row at ~375px */ } .banner { padding: 8px 10px 8px 14px; font-size: 12.5px; } /* Bound the banner's default height on narrow screens; the full text remains available to screen readers, and the dismiss button removes it entirely. */ #banner-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .modelbar { padding: 8px 14px; gap: 8px; } .model-status { font-size: 12px; } .modelbar-actions { margin-left: 0; width: 100%; flex-wrap: wrap; } .modelbar-actions .ghost, .modelbar-actions .solid { flex: 1 1 auto; text-align: center; } .model-select { flex: 1 1 100%; } .model-hint > summary { padding: 6px 14px; } .model-hint p { padding: 0 14px 8px; } .transcript { padding: 14px 12px; gap: 10px; } .entry { padding: 10px 12px; } .entry.final .text { font-size: 15px; } .tray { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); } .tray-label { margin-bottom: 6px; } /* Single horizontally-scrollable row instead of a tall wrapping grid. */ .presets { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 8px; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .chip { flex: 0 0 auto; max-width: 78vw; } .composer { gap: 8px; } #message { font-size: 16px; /* >=16px stops iOS from auto-zooming on focus */ } #send { padding: 11px 16px; } .audit-head, .audit-body { padding-left: 14px; padding-right: 14px; } .record { grid-template-columns: 1fr; gap: 2px; } }