/* Design tokens. Every component in styles.css and workbench.css reads these.
   The palette is the logo's: Dark is Ink (warm black surfaces, cream text) and Light is Paper (cream surfaces, ink
   text). Vermilion, the seal's colour, is the one accent, for primary actions, selection and focus. Errors use
   crimson, so a failure never reads as the accent. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 6px;
  --radius-lg: 10px;
  --titlebar-height: 40px;
  --statusbar-height: 24px;
  --sidebar-width: 300px;
  --inspector-width-default: 380px;
  --content-width: 780px;

  /* Mask icons for script-rendered elements (drawn with currentColor). */
  --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --icon-tasks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2l1.6 1.6 2.9-2.9M4 12.2l1.6 1.6 2.9-2.9M4 18.2l1.6 1.6 2.9-2.9'/%3E%3Cpath d='M12 6h8M12 12h8M12 18h8'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --icon-codex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='m7.5 9.5 3 2.5-3 2.5M13 15h4'/%3E%3C/svg%3E");
  --icon-claude: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E");
  --icon-gemini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12 8 8 12 1 12c7 0 11 4 11 11 0-7 4-11 11-11-7 0-11-4-11-11Z'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
  --icon-model: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3'/%3E%3C/svg%3E");
  --icon-effort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5a9 9 0 1 1 17 0'/%3E%3Cpath d='m12 14 3.5-4.5'/%3E%3C/svg%3E");
  --icon-access: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E");
  --icon-approval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z'/%3E%3C/svg%3E");
  --icon-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
  --icon-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5' r='2'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Cpath d='M6 7v10M18 8v1a5 5 0 0 1-5 5H6'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-steer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5v6a3 3 0 0 0 3 3h11'/%3E%3Cpath d='m15 10 4 4-4 4'/%3E%3C/svg%3E");
  --icon-auto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5l1.9 5.6 5.6 1.9-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9z'/%3E%3Cpath d='M18.5 14.5l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/%3E%3C/svg%3E");
  --icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5'/%3E%3C/svg%3E");
  --icon-file-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M12 11.5v6M9 14.5h6'/%3E%3C/svg%3E");
  --icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E");
  --icon-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5.5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='18.5' cy='12' r='1.6'/%3E%3C/svg%3E");
  --icon-minus-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12h7'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.3 7.6L3.5 21l1.4-4.7A8.5 8.5 0 1 1 20.5 12z'/%3E%3Cpath d='M9.7 9.5a2.4 2.4 0 1 1 3.4 2.2c-.7.4-1.1 1-1.1 1.8'/%3E%3Cpath d='M12 16.6h.01'/%3E%3C/svg%3E");
  --icon-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
  --icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
  --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.5 5.5 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.5-3.5-8.5s1-5.9 3.5-8.5z'/%3E%3C/svg%3E");
  --icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
  --icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 4.5 1.4 6 2 6.5H4c.6-.5 2-2 2-6.5z'/%3E%3Cpath d='M10 19.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  --icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v2.5'/%3E%3C/svg%3E");
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4v4.5H15'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  --icon-agent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v3M8 4.5h8M6 10a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zM9.5 13h.01M14.5 13h.01'/%3E%3C/svg%3E");
  --icon-terminal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7 5 5-5 5M12 18h7'/%3E%3C/svg%3E");
}

:root,
:root[data-theme="graphite"] {
  color-scheme: dark;
  --bg: #1c1a18;
  --sidebar: #161513;
  --statusbar-bg: #161513;
  /* The bottom panel (Terminal, Run) sits apart from the conversation. */
  --panel-bg: #161513;
  --overlay-bg: #242220;
  --surface-raised: #242220;
  --surface-input: #282624;
  --surface-strong: #3a3632;
  --bubble-bg: #2b2826;
  /* Reasoning effort, from light to heaviest: cool to warm. */
  --effort-low: #4ec9b0;
  --effort-medium: #4daafc;
  --effort-high: #dcb862;
  --effort-xhigh: #f0883e;
  --effort-max: #f47171;
  /* Steps of a run: reading, running, changing, adding and removing files, the web and other agents. */
  --step-read: #6cb6ff;
  --step-run: #c792ea;
  --step-edit: #e5c07b;
  --step-add: #89d185;
  --step-delete: #f28b82;
  --step-web: #4ec9b0;
  --step-agent: #f0a35e;
  --code-bg: #161513;
  --code-inline-bg: #fff4e314;
  --hover: #fff4e30f;
  --list-active: #36322e;
  --chip-bg: #fff4e312;
  --border: #2c2926;
  --border-strong: #3e3a35;
  --input-border: #3e3a35;
  --text: #d6cec2;
  --text-strong: #f4ede1;
  --muted: #aaa194;
  --faint: #958c80;
  --accent: #d9381e;
  --accent-strong: #c2301a;
  --on-accent: #ffffff;
  --focus: #ef6448;
  --link: #f2896f;
  --selection: #7a2e1f;
  --search-match: #e2c08d4d;
  --search-match-current: #e2c08d;
  --search-match-current-text: #1f1f1f;
  --codex: #4ec9b0;
  --codex-bg: #4ec9b01f;
  --claude: #e3a47a;
  --claude-bg: #e3a47a1f;
  --gemini: #8ab4f8;
  --gemini-bg: #8ab4f81f;
  --success: #73c991;
  --success-bg: #73c9911a;
  --warning: #e2c08d;
  --warning-bg: #e2c08d14;
  --warning-border: #e2c08d4d;
  --danger: #f26b85;
  --danger-bg: #f26b851a;
  --danger-border: #f26b8559;
  --syntax-text: #d4d4d4;
  --syntax-keyword: #569cd6;
  --syntax-string: #ce9178;
  --syntax-comment: #6a9955;
  --syntax-number: #b5cea8;
  --syntax-function: #dcdcaa;
  --syntax-property: #9cdcfe;
  --backdrop: #0c0a088c;
  --shadow-sm: 0 1px 2px #0000004d;
  --shadow-lg: 0 16px 48px #00000080, 0 0 0 1px #ffffff0a;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf8f3;
  --sidebar: #f4efe6;
  --statusbar-bg: #f4efe6;
  --panel-bg: #f4efe6;
  --overlay-bg: #fffdf9;
  --surface-raised: #f6f1e9;
  --surface-input: #fffdfa;
  --surface-strong: #fffdfa;
  --bubble-bg: #f0e9de;
  --effort-low: #16825d;
  --effort-medium: #005fb8;
  --effort-high: #9a6700;
  --effort-xhigh: #bc4c00;
  --effort-max: #c72e2e;
  --step-read: #0b65c2;
  --step-run: #8b3fb0;
  --step-edit: #946300;
  --step-add: #2f7d32;
  --step-delete: #c4314b;
  --step-web: #0e7c6b;
  --step-agent: #b55a00;
  --code-bg: #f4efe6;
  --code-inline-bg: #3b2a1a0d;
  --hover: #3b2a1a0a;
  --list-active: #ebe3d6;
  --chip-bg: #3b2a1a0d;
  --border: #e8e0d3;
  --border-strong: #d9cfbf;
  --input-border: #d3c8b6;
  --text: #3d362f;
  --text-strong: #1d1a17;
  --muted: #655c52;
  --faint: #71675c;
  --accent: #d9381e;
  --accent-strong: #bf3019;
  --on-accent: #ffffff;
  --focus: #d9381e;
  --link: #b02e17;
  --selection: #f6cdbf;
  --search-match: #bf8a0040;
  --search-match-current: #f2cc60;
  --search-match-current-text: #1f1f1f;
  --codex: #0b7a62;
  --codex-bg: #0b7a6214;
  --claude: #a4552a;
  --claude-bg: #a4552a14;
  --gemini: #1a63c7;
  --gemini-bg: #1a63c714;
  --success: #2b7530;
  --success-bg: #2b753014;
  --warning: #8a5d00;
  --warning-bg: #bf8a0014;
  --warning-border: #bf8a0059;
  --danger: #b51f45;
  --danger-bg: #b51f4510;
  --danger-border: #b51f4540;
  --syntax-text: #1f1f1f;
  --syntax-keyword: #0000ff;
  --syntax-string: #a31515;
  --syntax-comment: #008000;
  --syntax-number: #098658;
  --syntax-function: #795e26;
  --syntax-property: #0451a5;
  --backdrop: #2a1d104d;
  --shadow-sm: 0 1px 2px #3b2a1a14;
  --shadow-lg: 0 16px 48px #3b2a1a30, 0 0 0 1px #3b2a1a10;
}