/* src/renderer/demo/demo.css */
html[data-demo-scenario] :is(#titlebar, .settings-header)::before {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: 18px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ff5f57;
box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
transform: translateY(-50%);
pointer-events: none;
}
html[data-demo-scenario] .settings-header {
position: relative;
}
html.is-demo-pane-expanded #pane-projects,
html.is-demo-pane-expanded #resizer-projects,
html.is-demo-pane-expanded #welcome {
display: none !important;
}
html.is-demo-pane-expanded #pane-chat {
display: flex !important;
flex: 0 0 280px;
width: 280px;
min-width: 280px;
}
html.is-demo-pane-expanded #resizer-files {
display: block !important;
}
html.is-demo-pane-expanded #pane-files {
display: flex !important;
flex: 1 1 auto;
width: auto !important;
min-width: 0;
}
html[data-demo-expanded-pane=browser] #right-sidebar,
html[data-demo-expanded-pane=browser] #resizer-tree {
display: none !important;
}
html[data-demo-expanded-pane=browser] .browser-toolbar > .pane-popout-btn {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-left: 0;
padding: 0;
}
/* src/renderer/styles/tokens.css */
@font-face {
font-family: "Pliant";
src: url("./Pliant-Variable-AGBAMHLQ.ttf") format("truetype");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "Pliant";
src: url("./Pliant-Italic-Variable-LGTE3D76.ttf") format("truetype");
font-style: italic;
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: "Averia Serif Libre";
src: url("./AveriaSerifLibre-Regular-567SSWNU.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
:root {
--tint-hue: #244c25;
--tint-amount: 4%;
--bg-base: color-mix(in srgb, var(--tint-hue) var(--tint-amount), #1e1e1e);
--bg-elevated: color-mix(in srgb, var(--tint-hue) var(--tint-amount), #252526);
--bg-hover: color-mix(in srgb, var(--tint-hue) var(--tint-amount), #2a2d2e);
--bg-muted: color-mix(in srgb, var(--tint-hue) var(--tint-amount), #2d2d2d);
--bg-subtle: color-mix(in srgb, var(--tint-hue) var(--tint-amount), #232324);
--bg-input: var(--bg-base);
--bg-active: #094771;
--bg-selected: color-mix(in srgb, var(--accent) 20%, var(--bg-elevated));
--selection-bg: #2f6fd0;
--selection-text: #ffffff;
--highlight-bg: color-mix(in srgb, var(--warning) 45%, transparent);
--highlight-current-bg: #cca700;
--highlight-current-text: #1e1e1e;
--text-primary: #d4d4d4;
--text-secondary: #a6a6a6;
--text-muted: #808080;
--text: var(--text-primary);
--text-tertiary: var(--text-muted);
--border: #414141;
--border-subtle: #333333;
--border-strong: #565656;
--border-focus: var(--accent);
--pane-divider-width: 1px;
--chat-gradient-top: color-mix(in srgb, var(--bg-elevated) 42%, var(--bg-base));
--chat-gradient-mid: var(--bg-base);
--chat-gradient-bottom: color-mix(in srgb, var(--bg-elevated) 24%, var(--bg-base));
--chat-gradient-glow: color-mix(in srgb, var(--accent) 6%, var(--bg-elevated));
--accent-color: #ff93d0;
--accent: var(--accent-color);
--accent-fill: var(--accent-color);
--accent-fill-hover: color-mix(in srgb, var(--accent-fill) 85%, white);
--accent-hover: color-mix(in srgb, var(--accent) 85%, white);
--accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
--link: color-mix(in srgb, var(--accent) 65%, white);
--link-hover: color-mix(in srgb, var(--accent) 50%, white);
--text-on-accent: #444444;
--error: #f48771;
--danger: #f14c4c;
--success: #4ec9b0;
--warning: #cca700;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
--shadow-composer: 0 -6px 18px rgba(0, 0, 0, 0.1);
--select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23999999'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
--font-family:
"Pliant",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
--font-display:
"Averia Serif Libre",
Georgia,
serif;
--font-mono:
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
monospace;
--ui-scale: 1;
--font-size-xs: calc(11px * var(--ui-scale));
--font-size-sm: calc(12px * var(--ui-scale));
--font-size-base: calc(14px * var(--ui-scale));
--line-height-base: calc(22px * var(--ui-scale));
--font-size-md: calc(15px * var(--ui-scale));
--font-size-lg: calc(16px * var(--ui-scale));
--radius-sm: 4px;
--radius: 6px;
--radius-lg: 8px;
--action-radius: 999px;
--action-min-height: calc(36px * var(--ui-scale));
--action-padding-block: calc(6.8px * var(--ui-scale));
--action-padding-inline: calc(14px * var(--ui-scale));
--spacing-xs: calc(4px * var(--ui-scale));
--spacing-sm: calc(8px * var(--ui-scale));
--spacing-md: calc(12px * var(--ui-scale));
--spacing-lg: calc(16px * var(--ui-scale));
--spacing-xl: calc(24px * var(--ui-scale));
--list-row-padding-block: var(--spacing-sm);
--chat-content-max: 960px;
--chat-user-max: 840px;
--settings-content-max: 720px;
--traffic-light-inset: 78px;
--titlebar-height: calc(40px * var(--ui-scale));
--chrome-action-band-height: calc((16px * var(--ui-scale)) + 2 * var(--spacing-sm) + 1px);
--chrome-action-band-content-height: calc(16px * var(--ui-scale));
--browser-chrome-band-height: calc((28px * var(--ui-scale)) + 2 * var(--spacing-xs) + 1px);
}
/* node_modules/.pnpm/@copse+streaming-markdown@1.0.6_dompurify@3.4.13_entities@8.0.0_highlight.js@11.12.0_katex@0.16.47_mermaid@11.16.1/node_modules/@copse/streaming-markdown/styles/core.css */
.streaming-markdown {
& .stream-pending {
white-space: pre-wrap;
}
& .stream-pending-paragraph,
& p.stream-pending-paragraph {
display: block;
margin: 0;
white-space: pre-wrap;
}
& li.stream-pending-list-item {
white-space: normal;
}
& .stream-pending-list-continuation,
& span.stream-pending-list-continuation {
white-space: normal;
}
& .stream-pending-heading,
& div.stream-pending-heading,
& p.stream-pending-heading {
display: block;
white-space: normal;
}
& blockquote.stream-pending-blockquote p {
margin: 0;
white-space: pre-wrap;
}
& ul.contains-task-list {
padding-inline-start: 0;
list-style: none;
}
& li.task-list-item {
list-style: none;
}
& li.task-list-item input[type=checkbox] {
margin-inline-end: 0.45em;
vertical-align: middle;
cursor: default;
}
& pre {
overflow-x: auto;
overflow-y: hidden;
white-space: pre;
}
& pre code {
white-space: pre;
background: none;
padding: 0;
}
& .math-block--pending pre.math,
& .math-block--error pre.math {
white-space: pre-wrap;
}
& .math-block--rendered {
overflow-x: auto;
overflow-y: hidden;
}
& table {
max-width: 100%;
}
& .mermaid-diagram svg {
display: block;
max-width: 100%;
height: auto;
}
& .mermaid-diagram {
min-height: var(--sm-diagram-min-height, 160px);
}
}
/* node_modules/.pnpm/@copse+streaming-markdown@1.0.6_dompurify@3.4.13_entities@8.0.0_highlight.js@11.12.0_katex@0.16.47_mermaid@11.16.1/node_modules/@copse/streaming-markdown/styles/default.css */
.streaming-markdown {
line-height: var(--sm-line-height, 1.55);
word-break: break-word;
& strong {
font-weight: 600;
}
& p {
margin: 0;
white-space: pre-wrap;
}
& h1,
& h2,
& h3,
& h4,
& h5,
& h6,
& .stream-pending-heading {
margin: var(--sm-space-md, 12px) 0 var(--sm-space-xs, 4px);
font-weight: 600;
line-height: 1.35;
}
& > :first-child,
& h1:first-child,
& h2:first-child,
& h3:first-child,
& h4:first-child,
& .stream-pending-heading:first-child {
margin-top: 0;
}
& p + p,
& p + ul,
& p + ol,
& ul + p,
& ol + p,
& h1 + p,
& h2 + p,
& h3 + p,
& h4 + p,
& h5 + p,
& h6 + p,
& p + h1,
& p + h2,
& p + h3,
& p + h4,
& p + h5,
& p + h6 {
margin-top: var(--sm-space-sm, 8px);
}
& ul,
& ol {
margin: var(--sm-space-sm, 8px) 0;
padding-inline-start: 1.5em;
list-style-position: outside;
white-space: normal;
}
& li > :first-child {
margin-top: 0;
}
& h1,
& .stream-pending-h1 {
font-size: 2em;
}
& h2,
& .stream-pending-h2 {
font-size: 1.5em;
}
& h3,
& .stream-pending-h3 {
font-size: 1.17em;
}
& h4,
& .stream-pending-h4 {
font-size: 1em;
}
& h5,
& .stream-pending-h5 {
font-size: 0.83em;
}
& h6,
& .stream-pending-h6 {
font-size: 0.67em;
}
& .stream-complete > .stream-pending-block:last-child,
& .stream-complete > h2 + .stream-pending-block,
& .stream-complete > h3 + .stream-pending-block,
& .stream-complete > h4 + .stream-pending-block {
margin-top: var(--sm-space-sm, 8px);
}
& code {
font-family: var(--sm-font-mono, ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
font-size: var(--sm-font-size-sm, 0.85em);
background: var(--sm-code-bg, #252526);
padding: 1px 4px;
border-radius: 2px;
}
& a {
color: var(--sm-accent, #007acc);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
& a:hover {
opacity: 0.85;
}
& pre {
background: var(--sm-code-bg, #252526);
padding: var(--sm-space-sm, 8px);
border-radius: var(--sm-radius, 4px);
}
& blockquote {
border-left: 3px solid var(--sm-border, #3c3c3c);
margin: var(--sm-space-sm, 8px) 0;
padding: var(--sm-space-xs, 4px) var(--sm-space-sm, 8px);
color: var(--sm-fg-muted, #999);
background: var(--sm-code-bg, #252526);
border-radius: 0 var(--sm-radius, 4px) var(--sm-radius, 4px) 0;
}
& blockquote p {
margin: 0;
}
& blockquote p + p {
margin-top: var(--sm-space-xs, 4px);
}
& blockquote.stream-pending-blockquote {
margin: var(--sm-space-sm, 8px) 0;
}
& blockquote.markdown-alert {
background: none;
color: inherit;
border-radius: 0;
}
& .markdown-alert-title {
font-weight: 600;
}
& blockquote.markdown-alert-note {
border-left-color: var(--sm-alert-note, #4493f8);
}
& blockquote.markdown-alert-note .markdown-alert-title {
color: var(--sm-alert-note, #4493f8);
}
& blockquote.markdown-alert-tip {
border-left-color: var(--sm-alert-tip, #3fb950);
}
& blockquote.markdown-alert-tip .markdown-alert-title {
color: var(--sm-alert-tip, #3fb950);
}
& blockquote.markdown-alert-important {
border-left-color: var(--sm-alert-important, #ab7df8);
}
& blockquote.markdown-alert-important .markdown-alert-title {
color: var(--sm-alert-important, #ab7df8);
}
& blockquote.markdown-alert-warning {
border-left-color: var(--sm-alert-warning, #d29922);
}
& blockquote.markdown-alert-warning .markdown-alert-title {
color: var(--sm-alert-warning, #d29922);
}
& blockquote.markdown-alert-caution {
border-left-color: var(--sm-alert-caution, #f85149);
}
& blockquote.markdown-alert-caution .markdown-alert-title {
color: var(--sm-alert-caution, #f85149);
}
& hr {
border: none;
border-top: 1px solid var(--sm-border, #3c3c3c);
margin: var(--sm-space-md, 12px) 0;
}
& table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--sm-border, #3c3c3c);
border-radius: var(--sm-radius, 4px);
width: 100%;
table-layout: auto;
margin: var(--sm-space-sm, 8px) 0;
font-size: var(--sm-font-size-sm, 0.85em);
white-space: normal;
overflow-x: auto;
overflow-y: hidden;
}
& th,
& td {
border-right: 1px solid var(--sm-border, #3c3c3c);
border-bottom: 1px solid var(--sm-border, #3c3c3c);
padding: 4px 10px;
text-align: left;
vertical-align: top;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
min-width: 0;
}
& th:last-child,
& td:last-child {
border-right: none;
}
& tr:last-child td {
border-bottom: none;
}
& th {
background: var(--sm-code-bg, #252526);
font-weight: 600;
}
& tbody tr:nth-child(even) td {
background: var(--sm-th-stripe, rgba(255, 255, 255, 0.02));
}
& sup.footnote-ref {
font-size: 0.75em;
line-height: 0;
}
& sup.footnote-ref a {
text-decoration: none;
}
& section.footnotes {
margin-top: var(--sm-space-md, 12px);
border-top: 1px solid var(--sm-border, #3c3c3c);
padding-top: var(--sm-space-sm, 8px);
font-size: var(--sm-font-size-sm, 0.85em);
color: var(--sm-fg-muted, #999);
}
& section.footnotes ol {
margin: 0;
}
& a.footnote-backref {
text-decoration: none;
}
& .mermaid-diagram {
margin: var(--sm-space-sm, 8px) 0;
}
& .mermaid-diagram .error-icon {
fill: var(--sm-error, #f48771);
}
}
@media (prefers-reduced-motion: no-preference) {
.streaming-markdown .stream-complete > :not(.stream-pending-block),
.streaming-markdown .stream-complete li:not(.stream-pending-block),
.streaming-markdown .stream-complete tbody tr:not(.stream-pending-row) {
animation: sm-stream-settle 0.25s ease-out;
}
}
@keyframes sm-stream-settle {
from {
opacity: 0.55;
}
}
.streaming-markdown {
& .hljs-comment,
& .hljs-quote {
color: #6a9955;
font-style: italic;
}
& .hljs-keyword,
& .hljs-selector-tag,
& .hljs-built_in {
color: #569cd6;
}
& .hljs-string,
& .hljs-regexp {
color: #ce9178;
}
& .hljs-number,
& .hljs-literal {
color: #b5cea8;
}
& .hljs-title,
& .hljs-title.function_,
& .hljs-function .hljs-title {
color: #dcdcaa;
}
& .hljs-type,
& .hljs-class .hljs-title {
color: #4ec9b0;
}
& .hljs-attr,
& .hljs-attribute,
& .hljs-variable,
& .hljs-template-variable {
color: #9cdcfe;
}
& .hljs-meta,
& .hljs-symbol {
color: #d4d4d4;
}
}
/* src/renderer/styles/global/base.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
[hidden] {
display: none !important;
}
::selection {
background: var(--selection-bg);
color: var(--selection-text);
}
html,
body {
height: 100%;
overflow: hidden;
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--text-primary);
background: var(--bg-base);
user-select: none;
-webkit-user-select: none;
}
html {
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
a {
color: var(--link);
text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
text-underline-offset: 2px;
}
a:hover {
color: var(--link-hover);
text-decoration-color: currentColor;
}
#app {
display: flex;
flex-direction: column;
height: 100vh;
position: relative;
}
input,
textarea,
select,
[contenteditable=true],
.message-text,
.message-reasoning-text,
.tool-result,
.tool-args pre,
.attachment-preview-text,
.hook-test-stream pre,
.hook-card-raw-pre,
.terminal-container,
.agent-task-output-panel,
.monaco-editor .view-lines {
user-select: text;
-webkit-user-select: text;
}
input[type=password] {
-webkit-text-security: disc;
}
.monaco-editor .margin,
.monaco-editor .line-numbers {
user-select: none;
-webkit-user-select: none;
}
.split-body {
display: flex;
flex: 1;
overflow: hidden;
}
/* src/renderer/styles/global/icons.css */
.ui-icon {
flex-shrink: 0;
display: inline-block;
width: 16px;
height: 16px;
color: currentColor;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.ui-icon-sm {
width: 12px;
height: 12px;
}
.ui-icon-dot {
stroke-width: 8;
}
.ui-inline-status {
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle;
}
@keyframes ui-inline-status-spin {
to {
transform: rotate(360deg);
}
}
.ui-inline-status[data-status-kind=pending] > .ui-icon {
animation: ui-inline-status-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.ui-inline-status[data-status-kind=pending] > .ui-icon {
animation: none;
}
}
/* src/renderer/styles/global/ui.css */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius);
border: 1px solid transparent;
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
cursor: pointer;
color: var(--text-primary);
background: var(--bg-secondary, var(--bg-elevated));
}
.ui-btn:hover:not(:disabled) {
opacity: 1;
background: var(--bg-hover);
}
.ui-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ui-btn-secondary {
background: transparent;
border-color: var(--border);
color: var(--text-primary);
}
.ui-btn-secondary:hover:not(:disabled) {
background: var(--bg-hover);
}
.ui-btn-primary {
background: var(--accent-fill);
border-color: var(--accent-fill);
color: var(--text-on-accent);
}
.ui-btn-primary:hover:not(:disabled) {
background: var(--accent-fill-hover);
border-color: var(--accent-fill-hover);
color: var(--text-on-accent);
}
.ui-btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.ui-btn-danger:hover:not(:disabled) {
filter: brightness(1.08);
color: #fff;
}
.ui-btn-ghost {
background: transparent;
border-color: transparent;
color: var(--text-secondary);
}
.ui-btn-ghost:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
copse-ui-actions,
.ui-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
copse-ui-actions[data-align=end],
.ui-actions[data-align=end] {
justify-content: flex-end;
}
copse-ui-actions[data-align=start],
.ui-actions[data-align=start] {
justify-content: flex-start;
}
copse-ui-actions[data-align=stretch],
.ui-actions[data-align=stretch] {
justify-content: stretch;
}
copse-ui-actions[data-align=stretch] > *,
.ui-actions[data-align=stretch] > * {
flex: 1;
}
copse-ui-field,
.ui-field {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-xs);
}
copse-ui-field + copse-ui-field,
.ui-field + .ui-field {
padding-top: var(--spacing-sm);
border-top: 1px solid var(--border-subtle);
}
copse-ui-field:last-child,
.ui-field:last-child {
margin-bottom: 0;
}
.ui-field-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-base);
}
copse-ui-field select,
copse-ui-field input[type=text],
copse-ui-field input[type=password],
.ui-field select,
.ui-field input[type=text],
.ui-field input[type=password] {
width: 100%;
max-width: 480px;
}
.ui-field-hint {
margin: 0;
line-height: var(--line-height-base);
padding-top: 2px;
}
/* src/renderer/styles/global/layout.css */
.projects-settings-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
box-sizing: border-box;
height: var(--chrome-action-band-height);
min-height: var(--chrome-action-band-height);
max-height: var(--chrome-action-band-height);
padding: 0 var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-muted);
background: transparent;
border: none;
border-top: 1px solid var(--border);
cursor: pointer;
-webkit-app-region: no-drag;
flex-shrink: 0;
}
.projects-settings-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.three-pane {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
.pane-projects {
--projects-action-size: 24px;
--projects-action-inset: var(--spacing-xs);
width: var(--projects-width, 240px);
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg-elevated);
}
.pane-resizer {
flex-shrink: 0;
width: var(--pane-divider-width, 1px);
background-color: var(--border);
cursor: col-resize;
touch-action: none;
position: relative;
z-index: 2;
}
.pane-resizer::after {
content: "";
position: absolute;
inset-block: 0;
left: -2px;
right: -2px;
}
.pane-resizer:hover,
.pane-resizer.is-dragging {
background-color: var(--accent);
}
.pane-projects-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--projects-action-inset) var(--spacing-sm) var(--spacing-md);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.projects-add-btn {
flex-shrink: 0;
width: var(--projects-action-size);
height: var(--projects-action-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-size: 20px;
line-height: 1;
color: var(--text-secondary);
margin-left: 6px;
}
.projects-add-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.projects-search-btn {
display: inline-flex;
align-items: center;
margin-left: auto;
padding: 2px;
color: var(--text-muted);
border-radius: var(--radius);
}
.projects-search-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.projects-search-btn.active {
color: var(--accent);
}
.projects-search-row {
padding: var(--spacing-xs) var(--spacing-md);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.projects-search-input {
width: 100%;
padding: 4px var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-input, var(--bg-elevated));
color: var(--text-primary);
font-size: var(--font-size-sm);
outline: none;
}
.projects-search-input:focus {
border-color: var(--accent);
}
.projects-search-input::placeholder {
color: var(--text-muted);
}
.projects-list {
flex: 1;
overflow-y: auto;
padding: var(--spacing-xs) 0;
}
.project-line {
display: flex;
align-items: center;
gap: 2px;
padding-right: var(--projects-action-inset);
}
.project-line .project-row {
flex: 1;
min-width: 0;
}
.project-new-thread-btn {
flex-shrink: 0;
width: var(--projects-action-size);
height: var(--projects-action-size);
border-radius: var(--radius);
font-size: 18px;
line-height: 1;
color: var(--text-secondary);
}
.project-new-thread-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.project-row {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
text-align: left;
padding: var(--list-row-padding-block) var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.project-row:hover {
background: var(--bg-hover);
}
.project-row.active {
color: var(--text-primary);
font-weight: 600;
}
.context-menu {
position: fixed;
z-index: 1000;
min-width: 180px;
padding: var(--spacing-xs);
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md, 0 6px 20px rgb(0 0 0 / 25%));
}
.context-menu-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px 8px;
font-size: var(--font-size-sm);
color: var(--text-primary);
border-radius: var(--radius);
text-align: left;
white-space: nowrap;
}
.context-menu-item:hover {
background: var(--bg-hover);
}
.context-menu-item-label {
flex: 1 1 auto;
}
.context-menu-item-check {
flex: 0 0 auto;
color: var(--accent, var(--text-primary));
}
.context-menu-heading {
padding: 6px 8px 2px;
font-size: var(--font-size-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.context-menu-heading:not(:first-child) {
margin-top: 2px;
border-top: 1px solid var(--border);
}
.project-entry.drop-before,
.project-group.drop-before {
box-shadow: inset 0 2px 0 var(--accent);
}
.project-entry.drop-after,
.project-group.drop-after {
box-shadow: inset 0 -2px 0 var(--accent);
}
.project-group.drop-into,
.projects-list.drop-into {
background: color-mix(in srgb, var(--accent) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
.project-entry.is-dragging,
.project-group.is-dragging {
opacity: 0.45;
}
.project-row[draggable=true],
.project-group-row[draggable=true] {
cursor: grab;
}
.project-group-row {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: 5px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.project-group-row:hover {
background: var(--bg-hover);
}
.project-group-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
.project-group-rename {
flex: 1 1 auto;
min-width: 0;
font: inherit;
color: var(--text-primary);
background: var(--bg-input, var(--bg-elevated));
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: 0 4px;
outline: none;
}
.project-group-count {
margin-left: auto;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.project-group-children .project-row,
.project-group-children .sidebar-empty {
padding-left: calc(12px + var(--spacing-md));
}
.project-twisty {
width: 12px;
height: 12px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: transform 0.1s ease;
}
.project-twisty.expanded {
transform: rotate(90deg);
}
.chats-list {
display: flex;
flex-direction: column;
padding: 2px 0 var(--spacing-sm) 0;
}
.automation-threads-group {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.automation-threads-header,
.automation-schedule-header {
display: flex;
align-items: stretch;
}
.automation-threads-header:hover,
.automation-schedule-header:hover {
background: var(--bg-hover);
}
.automation-threads-toggle {
display: flex;
align-items: center;
gap: var(--spacing-xs);
flex: 1;
min-width: 0;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-muted);
font-size: var(--font-size-sm);
text-align: left;
}
.automation-threads-header:hover .automation-threads-toggle {
color: var(--text-secondary);
}
.automation-setup-btn {
display: inline-flex;
align-items: center;
flex-shrink: 0;
opacity: 0;
padding-inline: var(--spacing-sm);
color: var(--text-muted);
}
.automation-threads-header:hover .automation-setup-btn,
.automation-schedule-header:hover .automation-setup-btn,
.automation-setup-btn:focus-visible {
opacity: 1;
}
.automation-setup-btn:hover {
color: var(--text-primary);
}
.automation-threads-twisty {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--font-size-sm);
height: var(--font-size-sm);
transition: transform 0.1s ease;
}
.automation-threads-twisty.expanded {
transform: rotate(90deg);
}
.automation-threads-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.automation-threads-count {
margin-left: auto;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.automation-threads-running {
flex-shrink: 0;
color: var(--accent);
}
.automation-thread-rows .chat-row {
padding-left: calc(28px + var(--spacing-sm));
}
.automation-schedule-group {
display: flex;
flex-direction: column;
}
.automation-schedule-toggle {
display: flex;
align-items: center;
gap: var(--spacing-xs);
flex: 1;
min-width: 0;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(28px + var(--spacing-sm));
color: var(--text-secondary);
font-size: var(--font-size-sm);
text-align: left;
}
.automation-schedule-header:hover .automation-schedule-toggle {
color: var(--text-primary);
}
.automation-schedule-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.automation-schedule-count {
margin-left: auto;
color: var(--text-muted);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.automation-schedule-runs .chat-row {
padding-left: calc(42px + var(--spacing-md));
color: var(--text-muted);
}
.chat-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: auto;
margin-inline: 0;
border-radius: 0;
text-align: left;
padding: var(--list-row-padding-block) var(--projects-action-inset) var(--list-row-padding-block) 28px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
cursor: default;
}
.chat-row:hover {
background: var(--bg-hover);
}
.chat-row.selected {
background: var(--bg-selected);
color: var(--text-primary);
box-shadow: inset -2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.chat-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-title-rename {
flex: 1 1 auto;
min-width: 0;
font: inherit;
color: var(--text-primary);
background: var(--bg-input, var(--bg-primary));
border: 1px solid var(--border-focus, var(--accent));
border-radius: 3px;
padding: 0 2px;
}
.chat-delete {
flex-shrink: 0;
width: var(--projects-action-size);
height: var(--projects-action-size);
opacity: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
padding: 0;
}
.chat-row:hover .chat-delete {
opacity: 1;
}
.chat-running-status {
position: absolute;
left: var(--spacing-sm);
top: 50%;
transform: translateY(-50%);
color: var(--accent);
pointer-events: none;
}
.chat-unread-dot {
position: absolute;
left: 11px;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
transform: translateY(-50%);
pointer-events: none;
}
.chat-running-status path {
animation: chat-running-dot 1.2s ease-in-out infinite;
}
.chat-running-status path:nth-child(2) {
animation-delay: 0.2s;
}
.chat-running-status path:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes chat-running-dot {
0%, 80%, 100% {
opacity: 0.25;
}
40% {
opacity: 1;
}
}
.chat-pr-status {
flex-shrink: 0;
display: inline-flex;
align-items: center;
margin-left: var(--spacing-xs);
color: var(--text-muted);
}
.chat-pr-status.is-open {
color: var(--accent);
}
.chat-pr-status.is-merged {
color: var(--success);
}
.chat-attention-bell {
flex-shrink: 0;
margin-left: 4px;
color: var(--warning, #d29922);
animation: chat-attention-pulse 1.8s ease-in-out infinite;
}
.project-row .chat-attention-bell {
margin-left: auto;
}
@keyframes chat-attention-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
@media (prefers-reduced-motion: reduce) {
.chat-attention-bell {
animation: none;
}
.chat-running-status path {
animation: none;
opacity: 0.7;
}
}
.chats-show-more {
width: auto;
margin-inline: 0;
text-align: left;
padding: var(--list-row-padding-block) var(--spacing-md) var(--list-row-padding-block) 28px;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.chats-show-more:hover {
color: var(--text-secondary);
background: var(--bg-hover);
}
.project-row.missing .project-name {
color: var(--warning, #d29922);
}
.project-missing-icon {
flex-shrink: 0;
margin-left: auto;
color: var(--warning, #d29922);
}
.project-missing-notice {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px var(--spacing-sm) var(--spacing-sm) 28px;
}
.project-missing-text {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: var(--line-height-base);
}
.project-missing-btn {
align-self: flex-start;
padding: 3px 10px;
font-size: var(--font-size-sm);
color: var(--text-primary);
background: var(--bg-hover);
border: 1px solid var(--border, var(--border-subtle));
border-radius: 4px;
}
.project-missing-btn:hover {
background: var(--bg-selected);
}
.orphans-section {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--spacing-sm);
padding: var(--spacing-sm);
border-top: 1px solid var(--border, var(--border-subtle));
}
.orphans-heading {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.orphans-heading .ui-icon {
color: var(--warning, #d29922);
flex-shrink: 0;
}
.orphan-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 0 2px 22px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.orphan-recover-btn {
flex-shrink: 0;
padding: 2px 8px;
font-size: var(--font-size-sm);
color: var(--text-primary);
background: var(--bg-hover);
border: 1px solid var(--border, var(--border-subtle));
border-radius: 4px;
}
.orphan-recover-btn:hover {
background: var(--bg-selected);
}
.pane-chat {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
container-name: chat-pane;
container-type: inline-size;
overflow: hidden;
min-width: 0;
min-height: 0;
border-top: 1px solid var(--border-subtle);
--chat-composer-height: 148px;
--chat-composer-width: min(calc(100% - 2 * var(--spacing-xl)), var(--chat-content-max));
background:
radial-gradient(
ellipse 85% 50% at 50% -5%,
color-mix(in srgb, var(--chat-gradient-glow) 60%, transparent),
transparent 68%),
linear-gradient(
180deg,
var(--chat-gradient-top) 0%,
var(--chat-gradient-mid) 52%,
var(--chat-gradient-bottom) 100%);
}
.pane-chat.composer-centered {
--chat-composer-width: min(720px, calc(100% - 2 * var(--spacing-lg)));
}
.conversation,
.conversation-scroll,
.messages-list {
background: transparent;
}
.pane-chat.composer-centered .conversation {
padding-bottom: 0;
}
.pane-chat.composer-centered #input-bar {
top: 50%;
bottom: auto;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
border: none;
border-radius: var(--radius-lg);
box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}
.pane-chat.composer-centered .prompt-input {
border-top: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pane-chat.composer-centered .input-footer {
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.conversation {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding-bottom: calc(var(--chat-composer-height) + var(--spacing-md));
}
.pane-files {
width: var(--files-width, 480px);
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.three-pane.is-right-panel-horizontal {
display: grid;
grid-template-columns: var(--projects-width, 240px) var(--pane-divider-width) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) var(--pane-divider-width) minmax(0, var(--files-height, 360px));
}
.three-pane.is-right-panel-horizontal .pane-projects {
grid-column: 1;
grid-row: 1;
width: auto;
min-height: 0;
}
.three-pane.is-right-panel-horizontal #resizer-projects {
grid-column: 2;
grid-row: 1;
width: var(--pane-divider-width);
height: auto;
}
.three-pane.is-right-panel-horizontal .pane-chat {
grid-column: 3;
grid-row: 1;
}
.three-pane.is-right-panel-horizontal #resizer-files {
grid-column: 1 / -1;
grid-row: 2;
width: auto;
height: var(--pane-divider-width);
cursor: row-resize;
z-index: 32;
}
.three-pane.is-right-panel-horizontal #resizer-files::after {
inset-block: -2px;
left: 0;
right: 0;
}
.three-pane.is-right-panel-horizontal .pane-files {
grid-column: 1 / -1;
grid-row: 3;
width: auto;
min-width: 0;
min-height: 0;
border-top: 0;
}
.three-pane.is-right-panel-maximized {
position: relative;
isolation: isolate;
}
.three-pane.is-right-panel-maximized > .pane-files {
position: absolute;
inset: 0 0 0 calc(var(--projects-width, 240px) + var(--pane-divider-width, 1px));
z-index: 105;
width: auto;
height: auto;
grid-column: 1 / -1;
grid-row: 1 / -1;
background: var(--bg-base);
}
.pane-files-body {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
}
.right-sidebar {
display: flex;
flex-direction: column;
width: var(--tree-width, 200px);
flex-shrink: 0;
overflow: hidden;
background: var(--bg-elevated);
}
.file-tree-host {
flex: 1;
overflow-y: auto;
background: var(--bg-elevated);
min-height: 0;
}
.terminals-list-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.terminals-list-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-sm);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.terminals-list {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: var(--spacing-xs) 0;
min-height: 0;
}
.terminals-tab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
width: 100%;
text-align: left;
padding: 5px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.terminals-tab-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.terminals-checkout-badge {
flex-shrink: 0;
padding: 1px 4px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
font-size: 9px;
line-height: 1.2;
}
.terminals-tab-rename {
flex: 1;
min-width: 0;
font: inherit;
color: var(--text-primary);
background: var(--bg-input, var(--bg-primary));
border: 1px solid var(--border-focus, var(--accent));
border-radius: 3px;
padding: 0 2px;
}
.terminals-tab:hover {
background: var(--bg-hover);
}
.terminals-tab.is-active {
background: var(--bg-selected);
color: var(--text-primary);
}
.terminals-tab-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
opacity: 0;
color: var(--text-muted);
font-size: 11px;
padding: 0 4px;
}
.terminals-tab:hover .terminals-tab-close {
opacity: 1;
}
.terminals-new-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
color: var(--text-muted);
padding: 0 4px;
}
.terminals-new-btn:hover {
color: var(--text-primary);
}
.terminals-viewer-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.git-changes-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.git-changes-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
flex-wrap: wrap;
}
.git-changes-bulk-actions {
display: flex;
gap: var(--spacing-xs);
margin-left: auto;
}
.git-changes-bulk-btn {
font-size: 10px;
padding: 2px 6px;
border-radius: var(--radius);
color: var(--text-secondary);
white-space: nowrap;
}
.git-changes-bulk-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.git-changes-section-proposed .git-changes-section-title {
color: var(--accent);
}
.git-change-status-proposed {
color: var(--accent);
}
.git-change-row-proposed.is-selected {
background: color-mix(in srgb, var(--accent) 16%, var(--bg-selected));
}
.git-changes-title {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
}
.git-changes-refresh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 2px 6px;
border-radius: var(--radius);
color: var(--text-muted);
}
.git-changes-refresh-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.pane-popout-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
padding: 2px 6px;
border-radius: var(--radius);
color: var(--text-muted);
}
.pane-popout-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.pane-maximize-btn {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 2px 6px;
border-radius: var(--radius);
color: var(--text-muted);
}
.pane-maximize-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.pane-maximize-btn[aria-pressed=true] {
color: var(--accent);
}
.git-changes-restore {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--accent) 8%, transparent);
flex-shrink: 0;
}
.git-changes-restore-label {
font-size: 11px;
color: var(--text-secondary);
line-height: var(--line-height-base);
}
.git-changes-restore-btn {
margin-left: auto;
font-size: 10px;
padding: 2px 8px;
border-radius: var(--radius);
color: var(--text-primary);
border: 1px solid var(--border);
white-space: nowrap;
flex-shrink: 0;
}
.git-changes-restore-btn:hover:not(:disabled) {
background: var(--bg-hover);
}
.git-changes-restore-btn:disabled {
opacity: 0.5;
cursor: default;
}
.git-changes-list {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.git-changes-section-title {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.git-change-row {
display: flex;
align-items: center;
gap: var(--spacing-xs);
width: 100%;
text-align: left;
padding: var(--list-row-padding-block) var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.git-change-row:hover {
background: var(--bg-hover);
}
.git-change-row.is-selected {
background: var(--bg-selected);
color: var(--text-primary);
}
.git-change-status {
flex-shrink: 0;
width: 16px;
font-size: 10px;
font-weight: 600;
text-align: center;
font-family: monospace;
}
.git-change-status-modified {
color: #e2b340;
}
.git-change-status-added,
.git-change-status-untracked {
color: #73c991;
}
.git-change-status-deleted {
color: #f14c4c;
}
.git-change-status-renamed {
color: #75beff;
}
.git-change-path {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.git-change-path:not(.pr-list-title) {
direction: rtl;
text-align: left;
}
.git-changes-empty {
padding: var(--spacing-md) var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.pane-loading {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.pr-list-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.pr-list-number {
flex-shrink: 0;
width: 36px;
font-size: 10px;
font-weight: 600;
font-family: monospace;
color: var(--text-muted);
}
.pr-list-title {
flex: 1;
}
.pr-list-ci {
flex-shrink: 0;
box-sizing: border-box;
width: 8px;
height: 8px;
margin-left: var(--spacing-xs);
border-radius: 50%;
background: transparent;
}
.pr-list-ci-success {
background: #73c991;
}
.pr-list-ci-failure {
background: #f14c4c;
}
.pr-list-ci-pending {
background: #e2b340;
}
.pr-list-ci-loading {
background: transparent;
border: 1px solid var(--text-muted);
opacity: 0.5;
}
.pr-list-agent-badge {
flex-shrink: 0;
margin-left: var(--spacing-xs);
font-size: 10px;
line-height: 1;
}
.pr-other-toggle {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.pr-other-toggle:hover {
color: var(--text-primary);
}
.pr-other-chevron {
flex-shrink: 0;
width: 12px;
height: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.1s ease;
}
.pr-other-chevron.expanded {
transform: rotate(90deg);
}
.pr-viewer-host {
gap: 0;
}
.pr-viewer-meta {
flex-shrink: 0;
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--border);
}
.pr-viewer-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-sm);
}
.pr-viewer-title {
margin: 0;
font-size: var(--font-size-md);
font-weight: 600;
line-height: var(--line-height-base);
}
.pr-viewer-subtitle {
margin-top: 4px;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.pr-viewer-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-xs);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xs);
}
.pr-open-external-btn,
.pr-open-thread-btn,
.pr-new-thread-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
padding: 2px 0;
}
.pr-open-external-btn:hover,
.pr-open-thread-btn:hover,
.pr-new-thread-btn:hover {
color: var(--text-primary);
}
.pr-action-btn {
font-size: var(--font-size-sm);
color: var(--text-secondary);
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 4px);
background: var(--bg-subtle);
}
.pr-action-btn:hover:not(:disabled) {
color: var(--text-primary);
border-color: var(--accent);
}
.pr-action-btn:disabled {
opacity: 0.5;
cursor: default;
}
.pr-action-status {
margin-top: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--success);
}
.pr-action-status[data-ok=false] {
color: var(--danger);
}
.pr-viewer-badges {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
}
.pr-badge {
font-size: var(--font-size-xs, 11px);
padding: 1px 6px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--text-secondary);
white-space: nowrap;
}
.pr-badge-draft {
color: var(--warning);
border-color: var(--warning);
}
.pr-badge-approved {
color: var(--success);
border-color: var(--success);
}
.pr-badge-automerge {
color: var(--accent);
border-color: var(--accent);
}
.pr-viewer-description {
flex-shrink: 0;
max-height: 28%;
overflow-y: auto;
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--border);
font-size: var(--font-size-sm);
}
.pr-viewer-description.pr-viewer-description-fill {
flex: 1;
max-height: none;
min-height: 0;
}
.pr-viewer-files {
flex-shrink: 0;
max-height: 22%;
overflow-y: auto;
border-bottom: 1px solid var(--border);
}
.pr-files-header {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.pr-files-header:hover {
color: var(--text-primary);
}
.pr-files-list {
padding-bottom: var(--spacing-xs);
}
.pr-file-row {
padding-left: var(--spacing-md);
}
.pr-empty-state {
line-height: var(--line-height-base);
}
.gh-cli-status {
margin-top: var(--spacing-sm);
}
.git-diff-viewer-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
border-top: 1px solid var(--border-subtle);
}
.git-diff-editor-wrap {
flex: 1;
min-height: 0;
}
.git-diff-editor-wrap .line-insert,
.git-diff-editor-wrap .char-insert {
background-color: color-mix(in srgb, #2ea043 28%, transparent) !important;
}
.git-diff-editor-wrap .line-delete,
.git-diff-editor-wrap .char-delete,
.git-diff-editor-wrap .inline-deleted-text {
background-color: color-mix(in srgb, #f85149 26%, transparent) !important;
}
.git-diff-editor-wrap .gutter-insert,
.git-diff-editor-wrap .inline-added-margin-view-zone {
background-color: color-mix(in srgb, #2ea043 22%, transparent) !important;
}
.git-diff-editor-wrap .gutter-delete,
.git-diff-editor-wrap .inline-deleted-margin-view-zone {
background-color: color-mix(in srgb, #f85149 22%, transparent) !important;
}
.git-image-diff-wrap {
flex: 1;
min-height: 0;
overflow: auto;
padding: var(--spacing-sm);
}
.git-image-diff {
display: flex;
gap: var(--spacing-sm);
align-items: flex-start;
justify-content: center;
min-height: 100%;
}
.git-image-diff-pane {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.git-image-diff-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.git-image-diff-img {
width: 100%;
max-height: min(70vh, 640px);
object-fit: contain;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-base);
}
.terminals-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
position: relative;
}
.terminals-tab-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.terminals-tab-panel:not(.is-active) {
display: none;
}
.terminal-container {
flex: 1;
overflow: hidden;
-webkit-app-region: no-drag;
}
.terminal-container .xterm {
height: 100%;
}
.terminal-container .xterm .xterm-viewport {
background-color: var(--xterm-bg);
}
.terminal-container .xterm .xterm-helper-textarea {
z-index: 10;
}
.agent-tasks-section {
flex-shrink: 0;
max-height: 50%;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid var(--border);
}
.agent-tasks-section-header {
padding: var(--spacing-sm);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.agent-tasks-tablist {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: var(--spacing-xs) 0;
}
.agent-task-tab {
display: flex;
align-items: center;
gap: var(--spacing-sm);
width: 100%;
text-align: left;
padding: 5px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
}
.agent-task-tab:hover {
background: var(--bg-hover);
}
.agent-task-tab.is-active {
background: var(--bg-selected);
color: var(--text-primary);
}
.agent-task-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.agent-task-tab[data-status=running] .agent-task-dot {
background: var(--accent);
animation: agent-task-pulse 1.2s ease-in-out infinite;
}
.agent-task-tab[data-status=done] .agent-task-dot {
background: var(--success);
}
.agent-task-tab[data-status=error] .agent-task-dot {
background: var(--error);
}
@keyframes agent-task-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
.agent-task-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono);
}
.supervised-tasks-section {
flex-shrink: 0;
max-height: 40%;
overflow: hidden;
border-top: 1px solid var(--border);
}
.supervised-tasks-list {
overflow-y: auto;
padding: var(--spacing-xs) 0;
}
.supervised-task-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
min-width: 0;
padding: 5px var(--spacing-sm);
}
.supervised-task-row:hover {
background: var(--bg-hover);
}
.supervised-task-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.supervised-task-dot[data-state=running] {
background: var(--accent);
animation: agent-task-pulse 1.2s ease-in-out infinite;
}
.supervised-task-dot[data-state=blocked] {
background: var(--warning);
}
.supervised-task-copy {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.supervised-task-label {
overflow: hidden;
color: var(--text-secondary);
font-size: var(--font-size-sm);
text-overflow: ellipsis;
white-space: nowrap;
}
.supervised-task-state {
color: var(--text-muted);
font-size: 10px;
text-transform: capitalize;
}
.supervised-task-cancel {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--text-muted);
background: transparent;
border: 0;
border-radius: var(--radius-sm);
cursor: pointer;
}
.supervised-task-cancel:hover {
color: var(--text-primary);
background: var(--bg-selected);
}
.supervised-task-cancel:disabled {
cursor: default;
opacity: 0.45;
}
.agent-tasks-host {
display: none;
flex-direction: column;
min-height: 0;
}
.terminals-viewer-host.showing-agent-task .agent-tasks-host {
display: flex;
flex: 1;
}
.terminals-viewer-host.showing-agent-task .terminals-body {
display: none;
}
.agent-task-output-panel {
flex: 1;
margin: 0;
padding: var(--spacing-sm);
overflow: auto;
min-height: 0;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
white-space: pre-wrap;
word-break: break-word;
color: var(--text-secondary);
background: var(--bg-elevated);
}
.agent-task-command {
color: var(--text-primary);
font-weight: 600;
}
.browser-tabs-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.browser-tabs-list-header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
height: var(--browser-chrome-band-height);
min-height: var(--browser-chrome-band-height);
max-height: var(--browser-chrome-band-height);
padding: 0 var(--spacing-sm);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.browser-tabs-list {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: var(--spacing-xs) 0;
min-height: 0;
}
.browser-tabs-tab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
width: 100%;
text-align: left;
padding: 5px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.browser-tabs-tab-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.browser-tabs-tab:hover {
background: var(--bg-hover);
}
.browser-tabs-tab.is-active {
background: var(--bg-selected);
color: var(--text-primary);
}
.browser-tabs-tab-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
opacity: 0;
color: var(--text-muted);
font-size: 11px;
padding: 0 4px;
}
.browser-tabs-tab:hover .browser-tabs-tab-close {
opacity: 1;
}
.browser-tabs-new-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
color: var(--text-muted);
padding: 0 4px;
}
.browser-tabs-new-btn:hover {
color: var(--text-primary);
}
.browser-viewer-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.browser-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
position: relative;
}
.browser-tab-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.browser-tab-panel:not(.is-active) {
display: none;
}
.browser-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-xs);
box-sizing: border-box;
height: var(--browser-chrome-band-height);
min-height: var(--browser-chrome-band-height);
max-height: var(--browser-chrome-band-height);
padding: 0 var(--spacing-sm);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
-webkit-app-region: no-drag;
}
.browser-nav-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--text-secondary);
border-radius: var(--radius);
}
.browser-nav-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.browser-nav-btn:disabled {
opacity: 0.35;
cursor: default;
}
.browser-url-input {
flex: 1;
min-width: 0;
padding: 4px 8px;
font-size: var(--font-size-sm);
color: var(--text-primary);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.browser-url-input:focus {
outline: none;
border-color: var(--accent);
}
.browser-go-btn {
flex-shrink: 0;
padding: 4px 10px;
font-size: var(--font-size-sm);
color: var(--text-secondary);
border-radius: var(--radius);
}
.browser-go-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.browser-menu-wrap {
position: relative;
flex-shrink: 0;
display: inline-flex;
}
.browser-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 20;
min-width: 200px;
padding: var(--spacing-xs);
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md, 0 6px 20px rgb(0 0 0 / 25%));
}
.browser-menu[hidden] {
display: none;
}
.browser-menu-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px 8px;
font-size: var(--font-size-sm);
color: var(--text-primary);
border-radius: var(--radius);
text-align: left;
white-space: nowrap;
}
.browser-menu-item:hover:not(:disabled) {
background: var(--bg-hover);
}
.browser-menu-item:disabled {
opacity: 0.4;
cursor: default;
}
.browser-menu-item .ui-icon {
flex-shrink: 0;
color: var(--text-secondary);
}
.browser-menu-separator {
height: 1px;
margin: var(--spacing-xs);
background: var(--border);
}
.browser-webview-host {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
-webkit-app-region: no-drag;
position: relative;
}
.browser-webview {
flex: 1;
width: 100%;
min-height: 0;
border: none;
display: inline-flex;
}
.browser-url-input.has-error {
border-color: var(--danger, #f14c4c);
}
.file-viewer {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
border-top: 1px solid var(--border-subtle);
}
.file-viewer.is-drop-target,
#input-bar.is-drop-target {
outline: 2px dashed var(--accent);
outline-offset: -2px;
}
.file-viewer-toolbar {
display: flex;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.file-viewer-toolbar button {
font-size: var(--font-size-sm);
padding: 2px 8px;
border-radius: var(--radius);
color: var(--text-secondary);
}
.file-viewer-toolbar button.is-active {
background: var(--bg-base);
color: var(--text-primary);
}
.markdown-file-preview {
flex: 1;
overflow-y: auto;
padding: var(--spacing-md);
}
.sidebar {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--border);
background: var(--bg-elevated);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-md);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar-header-compact {
justify-content: flex-end;
}
.sidebar-refresh {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.file-tree {
flex: 1;
overflow-y: auto;
padding: var(--spacing-xs) 0;
}
.tree-row {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
text-align: left;
padding: 2px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tree-row:hover {
background: var(--bg-hover);
opacity: 1;
}
.tree-row.selected {
background: var(--bg-selected);
color: var(--text-primary);
}
.tree-twisty {
width: 12px;
height: 12px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: transform 0.1s ease;
}
.tree-twisty.expanded {
transform: rotate(90deg);
}
.tree-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
width: 16px;
height: 16px;
}
.tree-icon-img {
display: block;
width: 16px;
height: 16px;
}
.tree-children {
}
.sidebar-empty {
padding: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.pane-left {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid var(--border);
min-width: 300px;
}
.pane-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 300px;
}
/* src/renderer/styles/global/titlebar.css */
#titlebar {
flex-shrink: 0;
position: relative;
z-index: 60;
}
#thread-tabs {
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
#input-bar {
position: absolute;
left: 50%;
right: auto;
bottom: var(--spacing-md);
width: var(--chat-composer-width);
transform: translateX(-50%);
z-index: 30;
flex-shrink: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-composer);
}
#input-bar::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: color-mix(in srgb, var(--bg-base) 78%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
#input-bar > * {
position: relative;
z-index: 1;
}
.titlebar {
-webkit-app-region: drag;
height: var(--titlebar-height);
display: flex;
align-items: center;
padding: 0 var(--spacing-lg) 0 var(--traffic-light-inset);
background: var(--bg-elevated);
gap: var(--spacing-sm);
}
.titlebar-left {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-shrink: 0;
-webkit-app-region: no-drag;
}
.titlebar-settings-btn {
font-size: var(--font-size-sm);
color: var(--text-secondary);
padding: 0;
line-height: 1;
}
.titlebar-text-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 3px 10px;
font-size: var(--font-size-sm);
}
.titlebar-panel-controls > .titlebar-text-btn {
background: transparent;
border-color: transparent;
}
.titlebar-panel-controls > .titlebar-text-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.titlebar-panel-controls > .titlebar-text-btn.active {
background: var(--bg-selected);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.titlebar-text-btn.active {
background: var(--bg-hover);
border-color: var(--accent);
color: var(--text-primary);
}
.titlebar-text-btn.has-pending:not(.active) {
color: var(--text-secondary);
}
.titlebar-btn-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: 7px;
background: var(--accent);
color: var(--text-on-accent);
font-size: 9px;
font-weight: 600;
line-height: 14px;
}
.titlebar-panel-controls {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
flex-shrink: 0;
-webkit-app-region: no-drag;
}
.titlebar-btn-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
color: currentColor;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.titlebar-btn-label {
min-width: 0;
}
#titlebar.is-titlebar-compact .titlebar-compact-icon .titlebar-btn-label,
#app.is-portrait-chrome #titlebar .titlebar-compact-icon .titlebar-btn-label {
display: none;
}
#titlebar.is-titlebar-compact .titlebar-compact-icon,
#app.is-portrait-chrome #titlebar .titlebar-compact-icon {
padding: 3px 6px;
gap: 0;
}
#titlebar.is-titlebar-compact .open-in-editor-label,
#app.is-portrait-chrome #titlebar .open-in-editor-label {
max-width: 72px;
}
.titlebar button,
.titlebar input,
.titlebar select {
-webkit-app-region: no-drag;
}
.open-in-editor {
position: relative;
display: inline-flex;
align-items: stretch;
-webkit-app-region: no-drag;
}
.open-in-editor[hidden] {
display: none;
}
.open-in-editor-primary {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.open-in-editor-caret {
padding: 3px 4px;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.open-in-editor-caret[hidden] {
display: none;
}
.open-in-editor:has(.open-in-editor-caret[hidden]) .open-in-editor-primary {
border-top-right-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
.open-in-editor-caret[aria-expanded=true] {
background: var(--bg-hover);
border-color: var(--accent);
color: var(--text-primary);
}
.open-in-editor-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px;
}
.open-in-editor-menu {
position: absolute;
z-index: 70;
top: calc(100% + 4px);
right: 0;
width: max-content;
min-width: 160px;
max-width: min(320px, 90vw);
max-height: 320px;
overflow-y: auto;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) 0;
box-shadow: var(--shadow-md);
}
.open-in-editor-menu[hidden] {
display: none;
}
.open-in-editor-backdrop {
position: fixed;
inset: 0;
z-index: 65;
background: transparent;
-webkit-app-region: no-drag;
}
.open-in-editor-backdrop[hidden] {
display: none;
}
.open-in-editor-option {
display: block;
width: 100%;
text-align: left;
font-size: var(--font-size-sm);
color: var(--text-primary);
background: transparent;
border: none;
padding: 6px var(--spacing-md);
cursor: pointer;
white-space: nowrap;
}
.open-in-editor-option:hover {
background: var(--bg-hover);
}
.open-in-editor-option.is-default {
color: var(--accent);
}
/* src/renderer/styles/global/forms.css */
button {
cursor: pointer;
border: none;
background: none;
color: var(--text-primary);
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button:hover {
opacity: 0.8;
}
input,
textarea,
select {
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
font-family: inherit;
font-size: inherit;
line-height: inherit;
outline: none;
}
input:focus,
textarea:focus {
border-color: var(--accent);
}
select {
appearance: none;
background-image: var(--select-chevron);
background-repeat: no-repeat;
background-position: right var(--spacing-sm) center;
background-size: 12px 12px;
padding-right: calc(2 * var(--spacing-sm) + 12px);
}
dialog {
margin: auto;
-webkit-app-region: no-drag;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
min-width: 400px;
-webkit-app-region: no-drag;
}
dialog:not([open]) {
display: none !important;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
fieldset {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
fieldset label {
margin-bottom: var(--spacing-md);
}
legend {
padding: 0 var(--spacing-sm);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* src/renderer/styles/global/model-picker.css */
.model-picker,
.model-picker-field-host {
position: relative;
}
.model-picker-field-host,
.model-picker-field {
width: 100%;
max-width: 480px;
position: static;
}
.model-picker-trigger {
display: flex;
align-items: center;
gap: var(--spacing-xs);
max-width: 100%;
font-size: 11px;
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: var(--radius);
padding: 0 2px;
cursor: pointer;
}
.model-picker-trigger:hover {
color: var(--text-primary);
}
.model-picker-trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.model-picker-field .model-picker-trigger {
width: 100%;
min-height: calc(var(--spacing-xl) + var(--spacing-sm));
justify-content: space-between;
padding: var(--spacing-sm);
font-size: inherit;
color: var(--text-primary);
background: var(--bg-elevated);
border: 1px solid var(--border);
text-align: left;
anchor-name: var(--model-picker-anchor);
}
.model-picker-field .model-picker-trigger:hover {
border-color: var(--border-strong);
}
.model-picker-field .model-picker-trigger:focus-visible {
border-color: var(--accent);
outline: none;
}
.model-picker-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.model-picker-chevron {
flex-shrink: 0;
display: inline-flex;
align-items: center;
opacity: 0.7;
}
.model-picker-menu {
position: absolute;
z-index: 40;
bottom: calc(100% + var(--spacing-xs));
left: 0;
width: max-content;
min-width: 100%;
max-width: min(420px, 90vw);
max-height: min(280px, 45vh);
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs);
box-shadow: var(--shadow-md);
}
@position-try --model-picker-clamp-right {
left: auto;
right: anchor(right);
}
@position-try --model-picker-flip-up {
top: auto;
bottom: calc(anchor(top) + var(--spacing-xs));
}
@position-try --model-picker-flip-up-clamp-right {
top: auto;
bottom: calc(anchor(top) + var(--spacing-xs));
left: auto;
right: anchor(right);
}
.model-picker-field .model-picker-menu {
position-anchor: var(--model-picker-anchor);
top: calc(anchor(bottom) + var(--spacing-xs));
bottom: auto;
left: anchor(left);
right: auto;
min-width: anchor-size(width);
position-try-fallbacks:
--model-picker-clamp-right,
--model-picker-flip-up,
--model-picker-flip-up-clamp-right;
}
.model-picker-view-title {
min-width: 0;
padding: var(--spacing-xs) var(--spacing-md);
color: var(--text-muted);
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.model-picker-all-header {
display: flex;
align-items: center;
min-height: calc(var(--spacing-xl) + var(--spacing-xs));
}
.model-picker-all-header .model-picker-view-title {
padding-left: var(--spacing-xs);
}
.model-picker-back,
.model-picker-browse {
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.model-picker-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--spacing-xl) + var(--spacing-xs));
height: calc(var(--spacing-xl) + var(--spacing-xs));
}
.model-picker-browse {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
width: 100%;
margin-top: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
border-top: 1px solid var(--border-subtle);
white-space: nowrap;
text-align: left;
font: inherit;
}
.model-picker-back:hover,
.model-picker-browse:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.model-picker-groups {
display: flex;
flex-direction: column;
margin-top: var(--spacing-xs);
border-top: 1px solid var(--border-subtle);
}
.model-picker-group-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
text-align: left;
font: inherit;
}
.model-picker-group-row-label {
flex: 1 1 auto;
}
.model-picker-group-row-value {
color: var(--text-muted);
}
.model-picker-group-row:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.model-picker-group-row:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.model-picker-filter:focus-visible,
.model-picker-back:focus-visible,
.model-picker-browse:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.model-picker-filter {
min-width: 220px;
width: 100%;
color: var(--text-primary);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
font: inherit;
padding: var(--spacing-xs) var(--spacing-sm);
outline: 2px solid transparent;
outline-offset: 1px;
}
.model-picker-list {
overflow-y: auto;
min-height: 0;
max-height: inherit;
}
.model-picker-all-header + .model-picker-filter:not([hidden]) {
margin-top: 3px;
}
.model-picker-filter:not([hidden]) + .model-picker-list {
margin-top: var(--spacing-xs);
}
.model-picker-group-label {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.model-picker-option {
display: block;
width: 100%;
text-align: left;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-primary);
background: transparent;
border: none;
padding: 6px var(--spacing-md);
cursor: pointer;
white-space: nowrap;
}
.model-picker-option:hover:not(:disabled),
.model-picker-option.is-active {
background: var(--bg-hover);
}
.model-picker-recent-mode .model-picker-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
min-height: calc(var(--spacing-xl) + var(--spacing-sm));
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-sm);
}
.model-picker-option-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.model-picker-option.is-group-choice {
font-family: inherit;
font-size: var(--font-size-sm);
}
.model-picker-option-check {
flex-shrink: 0;
}
.model-picker-recent-mode .model-picker-option.is-active {
background: var(--bg-selected);
}
.model-picker-option:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.model-picker-option.is-selected {
color: var(--accent);
}
.model-picker-option.is-active {
outline: 1px solid var(--border-strong);
outline-offset: -1px;
}
.model-picker-option:disabled {
opacity: 0.5;
cursor: default;
}
.model-picker-empty {
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-muted);
font-size: 11px;
}
.model-picker-status {
padding: var(--spacing-sm) var(--spacing-md);
color: var(--text-muted);
font-size: var(--font-size-xs);
}
.model-picker-status.is-error {
color: var(--error);
}
.approval-model-picker,
.approval-comparison-row .model-picker-field-host {
max-width: none;
}
@supports not (anchor-name: --a) {
.model-picker-field-host,
.model-picker-field {
position: relative;
}
.model-picker-field .model-picker-menu {
top: calc(100% + var(--spacing-xs));
bottom: auto;
left: 0;
right: auto;
min-width: 100%;
}
}
/* src/renderer/styles/global/conversation.css */
.messages-list {
flex: 1;
overflow-y: auto;
scrollbar-gutter: stable;
padding: var(--spacing-lg) var(--spacing-xl);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
min-height: 0;
}
.conversation-scroll {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.scroll-to-bottom {
position: absolute;
left: 50%;
bottom: var(--spacing-md);
transform: translateX(-50%);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
background: color-mix(in srgb, var(--accent) 80%, transparent);
color: #fff;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
z-index: 4;
opacity: 0.92;
transition: opacity 0.15s, background 0.15s;
}
.scroll-to-bottom:hover {
opacity: 1;
background: var(--accent);
}
.scroll-to-bottom:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.conversation-queued {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
max-height: 38%;
overflow-y: auto;
scrollbar-gutter: stable;
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
}
.conversation-queued[hidden] {
display: none;
}
.agent-activity {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--spacing-xs);
width: min(100%, var(--chat-content-max));
margin-inline: auto;
padding: var(--spacing-sm) var(--spacing-md);
box-sizing: border-box;
font-size: var(--font-size-sm);
color: var(--text-secondary);
background: transparent;
}
.agent-activity[hidden] {
display: none;
}
.reasoning-activity-icon {
width: var(--font-size-lg);
height: var(--font-size-lg);
flex-shrink: 0;
overflow: visible;
color: var(--accent);
}
.agent-activity > .reasoning-activity-icon {
position: absolute;
right: calc(100% - var(--spacing-md) + var(--spacing-xs) / 2);
top: 50%;
transform: translateY(-50%);
width: calc(var(--spacing-md) - var(--spacing-xs) / 2);
height: calc(var(--spacing-md) - var(--spacing-xs) / 2);
pointer-events: none;
}
.reasoning-activity-path {
fill: none;
stroke: currentColor;
stroke-width: 152;
stroke-linecap: round;
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
opacity: 0;
animation: reasoning-activity-draw 2.5s ease-in-out infinite;
}
@keyframes reasoning-activity-draw {
0%, 1% {
stroke-dashoffset: 1;
opacity: 0;
}
2% {
stroke-dashoffset: 1;
opacity: 1;
}
46%, 56% {
stroke-dashoffset: 0;
opacity: 1;
}
98% {
stroke-dashoffset: -1;
opacity: 1;
}
99%, 100% {
stroke-dashoffset: -1;
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.reasoning-activity-path {
stroke-dasharray: 1 0;
opacity: 1;
animation: none;
}
}
.conversation-hydrating {
display: flex;
align-items: center;
gap: var(--spacing-xs);
width: min(100%, var(--chat-content-max));
margin-inline: auto;
padding: var(--spacing-lg) var(--spacing-md);
box-sizing: border-box;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.conversation-hydrating > .reasoning-activity-icon {
width: var(--font-size-lg);
height: var(--font-size-lg);
flex-shrink: 0;
overflow: visible;
color: var(--accent);
}
.agent-activity-clickable {
cursor: pointer;
}
.agent-activity-clickable:hover {
color: var(--text-primary);
}
.msg {
width: min(100%, var(--chat-content-max));
margin-inline: auto;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius);
overflow-x: auto;
flex-shrink: 0;
}
.message-reasoning {
margin-bottom: var(--spacing-sm);
border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
padding-left: var(--spacing-sm);
}
.message-reasoning:not([open]) {
margin-bottom: var(--spacing-xs);
border-left: 0;
padding-left: 0;
}
.message-reasoning-summary {
display: flex;
align-items: center;
gap: var(--spacing-xs);
cursor: pointer;
list-style: none;
font-size: var(--font-size-sm);
color: var(--text-secondary);
user-select: none;
width: fit-content;
border-radius: var(--radius);
padding: 2px var(--spacing-xs);
}
.message-reasoning-summary:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.message-reasoning-summary::-webkit-details-marker {
display: none;
}
.message-reasoning-icon {
position: relative;
display: grid;
place-items: center;
width: var(--font-size-lg);
height: var(--font-size-lg);
}
.message-reasoning-icon::before {
content: "";
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.12s ease;
}
.message-reasoning[open]:not(.message-reasoning-live) .message-reasoning-icon::before {
transform: rotate(90deg);
}
.message-reasoning-icon > .reasoning-activity-icon {
display: none;
}
.message-reasoning-live .message-reasoning-icon::before {
display: none;
}
.message-reasoning-live .message-reasoning-icon > .reasoning-activity-icon {
display: block;
}
.message-reasoning-text {
margin-top: var(--spacing-xs);
white-space: normal;
word-break: break-word;
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: var(--line-height-base);
}
.message-reasoning-text p {
margin: 0;
}
.message-reasoning-text p + p,
.message-reasoning-text p + ul,
.message-reasoning-text p + ol,
.message-reasoning-text ul + p,
.message-reasoning-text ol + p {
margin-top: var(--spacing-sm);
}
.message-reasoning-text > :first-child {
margin-top: 0;
}
.message-reasoning-text ul,
.message-reasoning-text ol {
margin: var(--spacing-sm) 0;
padding-inline-start: 1.5em;
list-style-position: outside;
white-space: normal;
}
.message-reasoning-text code {
font-family: var(--font-mono);
padding: 1px 4px;
background: var(--bg-muted);
}
.acp-transport-noise {
margin-top: var(--spacing-sm);
color: var(--text-muted);
font-size: 0.85em;
}
.acp-transport-noise-summary {
cursor: pointer;
list-style: none;
color: var(--text-muted);
}
.acp-transport-noise-summary::-webkit-details-marker {
display: none;
}
.acp-transport-noise-summary::before {
content: "\25b8 ";
font-size: 0.75em;
}
.acp-transport-noise[open] > .acp-transport-noise-summary::before {
content: "\25be ";
}
.acp-transport-noise-body {
margin: var(--spacing-xs) 0 0;
padding: var(--spacing-xs) var(--spacing-sm);
white-space: pre-wrap;
word-break: break-word;
font-family: var(--font-mono);
font-size: 0.9em;
color: var(--text-secondary);
background: var(--bg-muted);
border-radius: 3px;
}
.message-body {
position: relative;
}
.msg-copy {
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 11px;
color: var(--text-muted);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 8px;
transition: opacity 0.1s;
}
.message-body:hover .msg-copy {
opacity: 1;
}
.message-body:hover:has(.code-block-shell:hover) .msg-copy,
.message-body:hover:has(.code-block-shell:focus-within) .msg-copy {
opacity: 0;
}
.msg-actions {
position: absolute;
right: 0;
bottom: 0;
display: flex;
gap: var(--spacing-xs);
opacity: 0;
transition: opacity 0.1s;
}
.message-body:hover .msg-actions,
.msg-actions:focus-within {
opacity: 1;
}
.msg-user:not(:has(~ .msg-user)):has(~ .msg-image-input-unsupported) .msg-actions {
opacity: 1;
}
.msg-action {
font-size: 11px;
color: var(--text-muted);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 8px;
cursor: pointer;
}
.msg-action:hover:not(:disabled) {
color: var(--text-primary);
background: var(--bg-hover);
}
.msg-action:disabled {
cursor: default;
opacity: 0.6;
}
.msg-action[hidden] {
display: none;
}
.msg-user {
width: min(100%, var(--chat-user-max));
background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.msg-user-fold-head,
.msg-user-fold-middle,
.msg-user-fold-tail {
min-width: 0;
}
.msg-user-fold-head > :first-child,
.msg-user-fold-middle > :first-child,
.msg-user-fold-tail > :first-child {
margin-top: 0;
}
.msg-user-fold-head > :last-child,
.msg-user-fold-middle > :last-child,
.msg-user-fold-tail > :last-child {
margin-bottom: 0;
}
.msg-user-fold-control {
display: flex;
justify-content: center;
align-items: center;
max-height: 3.1em;
margin: 0;
padding: 0.35em 0;
}
.msg-user-fold:not(.is-expanded) .msg-user-fold-middle {
display: none;
}
.msg-user-fold-toggle {
appearance: none;
display: inline-flex;
align-items: center;
gap: 4px;
font: inherit;
font-size: 12px;
line-height: 1.25;
color: var(--text-secondary);
background: transparent;
border: 1px dashed var(--border-subtle);
border-radius: 999px;
padding: 1px 7px;
margin: 0;
cursor: pointer;
}
.msg-user-fold-toggle:hover {
color: var(--text-primary);
border-color: var(--border);
background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}
.msg-user-fold-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.msg-user-fold-chev {
width: 11px;
height: 11px;
flex: none;
transition: transform 0.15s ease;
}
.msg-user-fold.is-expanded .msg-user-fold-chev {
transform: rotate(180deg);
}
.messages-list > .msg-user {
position: relative;
margin-left: auto;
margin-right: max(0px, calc((100% - var(--chat-content-max)) / 2));
}
.messages-list > .msg-user:not(:has(~ .msg-user)) {
position: sticky;
top: calc(-1 * var(--spacing-lg));
z-index: 3;
box-shadow: var(--shadow-sm);
}
@container chat-pane (max-width: 360px) {
.messages-list > .msg-user:not(:has(~ .msg-user)) {
position: relative;
top: auto;
z-index: auto;
}
}
.msg-assistant {
background: transparent;
}
.message-model {
font-size: var(--font-size-xs);
color: var(--text-tertiary, var(--text-secondary));
margin-bottom: var(--spacing-xs);
}
.msg-assistant:has(.message-text:not(:empty)):not(:has(.tool-card)) {
margin-block: var(--spacing-xs);
padding-block: var(--spacing-lg);
border-top: 1px solid var(--border-subtle);
border-radius: 0;
}
.msg-assistant:has(.message-text:not(:empty)):not(:has(.tool-card)) > .message-body > .message-text {
font-size: var(--font-size-md);
line-height: var(--line-height-base);
}
.streaming-markdown {
--sm-space-xs: var(--spacing-xs);
--sm-space-sm: var(--spacing-sm);
--sm-space-md: var(--spacing-md);
--sm-radius: var(--radius);
--sm-font-mono: var(--font-mono);
--sm-font-size-sm: var(--font-size-sm);
--sm-fg-muted: var(--text-secondary);
--sm-border: var(--border);
--sm-accent: var(--accent);
--sm-link: var(--link);
--sm-code-bg: var(--bg-elevated);
--sm-error: var(--error);
}
.streaming-markdown a {
color: var(--link);
}
.streaming-markdown a:hover {
color: var(--link-hover);
}
.message-text:empty {
display: none;
}
.msg-assistant:has(.tool-card) + .msg-assistant {
margin-block-start: calc(-1 * var(--spacing-xs));
}
.message-images {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.message-image {
max-width: min(100%, 320px);
max-height: 240px;
border-radius: var(--radius);
object-fit: contain;
border: 1px solid var(--border);
background: var(--bg-base);
}
.message-text .remote-artifact-image {
display: block;
max-width: 100%;
max-height: min(520px, 60vh);
margin: var(--spacing-sm) 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
object-fit: contain;
}
.message-text .code-block-shell {
position: relative;
}
.code-block-copy {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xs);
opacity: 0;
font-size: 11px;
color: var(--text-muted);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 8px;
transition: opacity 0.1s;
z-index: 1;
}
.message-text .code-block-shell:hover .code-block-copy,
.message-text .code-block-shell:focus-within .code-block-copy {
opacity: 1;
}
.message-text:has(.code-block-shell:hover) .code-block-shell:not(:hover):not(:focus-within) .code-block-copy,
.message-text:has(.code-block-shell:focus-within) .code-block-shell:not(:focus-within):not(:hover) .code-block-copy {
opacity: 0;
}
.message-text .table-copy-shell {
position: relative;
margin: var(--spacing-sm) 0;
}
.message-text .table-copy-scroll {
overflow-x: auto;
max-width: 100%;
}
.message-text .table-copy-scroll > table {
margin: 0;
overflow: hidden;
}
.table-copy {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xs);
opacity: 0;
font-size: 11px;
color: var(--text-muted);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 8px;
transition: opacity 0.1s;
z-index: 1;
}
.message-text .table-copy-shell:hover .table-copy,
.message-text .table-copy-shell:focus-within .table-copy {
opacity: 1;
}
.transcript-attachment-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 260px;
margin: 0 2px;
padding: 1px 7px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
font-size: var(--font-size-sm);
vertical-align: baseline;
}
.transcript-attachment-icon {
flex: none;
width: 14px;
height: 14px;
color: var(--text-muted);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.transcript-attachment-label {
align-self: baseline;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.transcript-attachment-row {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.canvas-preview-card {
margin: 8px 0 4px;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-elevated, var(--bg));
}
.canvas-preview-image {
display: block;
width: 100%;
max-height: 260px;
object-fit: cover;
object-position: top center;
background: var(--bg);
}
.canvas-preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 8px;
border-top: 1px solid var(--border);
}
.canvas-preview-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
color: var(--text-muted, var(--text));
}
/* src/renderer/styles/global/markdown.css */
.message-text:has(th:nth-child(3)) th:first-child,
.message-text:has(th:nth-child(3)) td:first-child {
width: 1%;
white-space: nowrap;
}
.message-text:not(:has(th:nth-child(3))) :is(td, th) > code:only-child,
.message-text:has(th:nth-child(3)) :is(td, th):not(:first-child) > code:only-child {
display: block;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}
.message-text .mermaid-diagram {
max-height: min(280px, 42vh);
overflow: auto;
margin: var(--spacing-sm) 0;
}
.message-text .mermaid-diagram.mermaid-diagram--folded {
cursor: zoom-in;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs);
background: var(--bg-elevated);
}
.message-text .mermaid-diagram.mermaid-diagram--folded:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.message-text .mermaid-diagram.mermaid-diagram--folded::after {
content: "Click to expand";
display: block;
margin-top: var(--spacing-xs);
font-size: 11px;
color: var(--text-muted);
text-align: center;
pointer-events: none;
}
.mermaid-expand-dialog {
width: min(96vw, 1200px);
max-width: 96vw;
height: min(92vh, 860px);
max-height: 92vh;
padding: var(--spacing-md);
border: 1px solid var(--border);
background: var(--bg-elevated);
box-sizing: border-box;
}
.mermaid-expand-dialog[open] {
display: flex;
flex-direction: column;
}
.mermaid-expand-dialog-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.mermaid-expand-viewport {
position: relative;
overflow: hidden;
flex: 1;
min-height: min(50vh, 320px);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
cursor: grab;
touch-action: none;
}
.mermaid-expand-viewport.is-panning {
cursor: grabbing;
}
.mermaid-expand-stage {
transform-origin: 0 0;
display: inline-block;
padding: var(--spacing-md);
}
.mermaid-expand-stage svg {
display: block;
max-width: none;
height: auto;
}
.mermaid-expand-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
flex-wrap: wrap;
}
.mermaid-expand-tool {
min-width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-base);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.mermaid-expand-tool:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.mermaid-expand-zoom-label {
min-width: 3.5em;
text-align: center;
font-size: 11px;
color: var(--text-muted);
}
.mermaid-expand-hint {
margin-left: auto;
font-size: 11px;
color: var(--text-muted);
}
.mermaid-expand-close {
margin-top: var(--spacing-sm);
width: 100%;
padding: var(--spacing-sm);
border-radius: var(--radius);
background: var(--bg-base);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.mermaid-expand-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.mermaid-fallback-title {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
}
.mermaid-fallback-hint {
font-size: 11px;
color: var(--text-muted);
margin-bottom: var(--spacing-sm);
}
.mermaid-fallback-source {
font-size: var(--font-size-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--bg-elevated);
}
.mermaid-fallback-source summary {
cursor: pointer;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
}
.mermaid-fallback-source pre {
font-family: var(--font-mono);
font-size: 11px;
white-space: pre-wrap;
color: var(--text-muted);
max-height: 240px;
overflow: auto;
}
:root {
--external-link-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%203h6v6'/%3E%3Cpath%20d='M10%2014%2021%203'/%3E%3Cpath%20d='M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.mark-external-links .browser-links-scope a[href^=http]:not([data-file-reference-path]):not([data-workspace-link])::after {
content: "";
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-inline-start: 0.2em;
vertical-align: -0.08em;
background-color: currentColor;
-webkit-mask: var(--external-link-mask);
mask: var(--external-link-mask);
pointer-events: none;
}
/* src/renderer/styles/global/tool-cards.css */
.tool-card {
background: transparent;
border: none;
border-radius: var(--radius);
padding: 2px 0;
margin-top: 0;
font-size: var(--font-size-sm);
}
.tool-card:not([open])[data-status=done] {
padding-block: 1px;
}
.tool-card:not([open])[data-status=done] .tool-name {
color: var(--text-secondary);
font-weight: 500;
}
.msg .tool-card:first-of-type {
margin-top: var(--spacing-xs);
}
.tool-card-header {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
list-style: none;
width: fit-content;
max-width: 100%;
border-radius: var(--radius);
padding: 1px var(--spacing-xs);
margin-inline: calc(-1 * var(--spacing-xs));
}
.tool-card-header::-webkit-details-marker {
display: none;
}
.tool-card-header:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.tool-activity-icon-slot {
position: absolute;
right: calc(100% - var(--spacing-xs) + var(--spacing-xs) / 2);
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--spacing-md) - var(--spacing-xs) / 2);
height: calc(var(--spacing-md) - var(--spacing-xs) / 2);
pointer-events: none;
}
.tool-activity-icon-slot > .reasoning-activity-icon {
width: 100%;
height: 100%;
}
.tool-rollup-body .tool-activity-icon-slot,
.subagent-timeline .tool-activity-icon-slot {
position: static;
transform: none;
order: 1;
width: var(--font-size-sm);
height: var(--font-size-sm);
}
.tool-rollup-body .tool-activity-icon-slot:empty,
.subagent-timeline .tool-activity-icon-slot:empty {
display: none;
}
.tool-card[open] .tool-card-header {
margin-bottom: var(--spacing-xs);
}
.tool-card > .tool-args,
.tool-card > .tool-result {
margin-top: var(--spacing-xs);
margin-left: var(--spacing-sm);
}
.tool-result-empty {
color: var(--text-muted);
font-style: italic;
}
.tool-name {
font-weight: 500;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-secondary);
}
.tool-count {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.tool-stat {
font-size: var(--font-size-sm);
font-weight: 500;
}
.tool-edit-stats {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
flex: none;
padding: 0;
border: none;
background: none;
font: inherit;
cursor: pointer;
border-radius: var(--radius);
}
.tool-edit-stats:hover .tool-stat,
.tool-edit-stats:focus-visible .tool-stat {
text-decoration: underline;
}
.tool-stat-add {
color: #3dd68c;
}
.tool-stat-del {
color: #f07178;
}
.tool-card-rollup > .tool-card-header {
color: var(--text-muted);
}
.tool-card-rollup > .tool-card-header .tool-name {
font-weight: 400;
font-style: italic;
color: var(--text-muted);
}
.tool-card-rollup > .tool-card-header:hover,
.tool-card-rollup > .tool-card-header:hover .tool-name {
color: var(--text-secondary);
}
.tool-card-rollup > .tool-card-header .tool-status-icon {
display: none;
}
.tool-rollup-body {
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--spacing-xs);
padding-left: var(--spacing-sm);
border-left: 1px solid var(--border-subtle);
}
.tool-card-rollup:not([open]) > .tool-rollup-body {
display: none;
}
.tool-card-rollup[data-status=running] > .tool-card-header .tool-name {
color: var(--text-secondary);
font-style: italic;
}
.tool-rollup-body > .tool-card {
background: transparent;
border: none;
padding-inline: 0;
}
.tool-rollup-body > .tool-card > .tool-card-header .tool-name {
font-weight: 400;
font-style: normal;
color: var(--text-secondary);
}
.tool-rollup-body > .message-reasoning {
margin: 0 0 var(--spacing-xs);
border-left: 0;
padding-left: 0;
}
.tool-rollup-body > .message-reasoning > .message-reasoning-summary {
margin-inline: calc(-1 * var(--spacing-xs));
}
.tool-rollup-body .reasoning-activity-icon {
color: var(--text-secondary);
}
.tool-card-group > .tool-group-items {
display: flex;
flex-direction: column;
gap: 0;
}
.tool-card-group[data-status=done] > .tool-group-items {
margin-top: var(--spacing-xs);
}
.tool-group-item {
border: none;
border-radius: var(--radius);
padding: 1px 0;
background: transparent;
}
.tool-group-item-header {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
list-style: none;
font-size: var(--font-size-sm);
width: fit-content;
max-width: 100%;
border-radius: var(--radius);
padding: 1px var(--spacing-xs);
margin-inline: calc(-1 * var(--spacing-xs));
color: var(--text-secondary);
}
.tool-group-item-header::-webkit-details-marker {
display: none;
}
.tool-group-item-header:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.tool-group-item[open] .tool-group-item-header {
margin-bottom: var(--spacing-xs);
}
.tool-group-item > .tool-args,
.tool-group-item > .tool-result {
margin-top: var(--spacing-xs);
margin-left: var(--spacing-sm);
}
.tool-status-icon {
display: inline-flex;
align-items: center;
color: var(--text-muted);
margin-left: auto;
order: 2;
}
.tool-card[data-status=done] > .tool-card-header > .tool-status-icon,
.tool-group-item[data-status=done] > .tool-group-item-header > .tool-status-icon {
color: var(--success);
}
.tool-card[data-status=error] > .tool-card-header > .tool-status-icon,
.tool-group-item[data-status=error] > .tool-group-item-header > .tool-status-icon {
color: var(--error);
}
.tool-result {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
color: var(--text-secondary);
}
.tool-result pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.tool-result-markdown {
font-family: inherit;
max-height: 320px;
}
.tool-result-markdown > :first-child {
margin-top: 0;
}
.tool-result-markdown > :last-child {
margin-bottom: 0;
}
.tool-args details summary {
cursor: pointer;
color: var(--text-muted);
}
.tool-args pre {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: var(--spacing-xs);
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
max-height: 240px;
overflow: auto;
}
.tool-card-subagent .subagent-summary-preview {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--spacing-xs);
}
.tool-card-subagent[open] .subagent-summary-preview {
display: none;
}
.tool-card-subagent .subagent-model {
font-size: var(--font-size-xs, 11px);
color: var(--text-tertiary, var(--text-secondary));
margin-top: var(--spacing-xs);
}
.tool-card-subagent .subagent-model-fallback {
color: var(--warning, #b58900);
}
.tool-card-subagent .subagent-timeline {
margin-top: var(--spacing-sm);
padding-left: var(--spacing-sm);
border-left: 2px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.tool-card-subagent .subagent-message-assistant.message-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.tool-card-subagent .subagent-inner-tools {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.tool-card-subagent:not([open]) .subagent-timeline,
.tool-card-subagent:not([open]) .subagent-summary-preview,
.tool-card-subagent:not([open]) .subagent-parent-result {
display: none;
}
/* src/renderer/styles/global/hook-cards.css */
.hook-card-host {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--spacing-xs);
margin-top: calc(-1 * var(--spacing-sm));
}
.messages-list > :first-child + .hook-card-host {
margin-top: var(--spacing-sm);
}
.hook-card,
.hook-card-group {
align-self: flex-end;
max-width: min(80%, 460px);
background: var(--accent-soft);
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-sm);
}
.hook-card-group-body {
margin-top: var(--spacing-xs);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.hook-card-group:not([open]) .hook-card-group-body {
display: none;
}
.hook-card-group-body .hook-card {
max-width: none;
background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
box-shadow: none;
}
.hook-card-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
list-style: none;
}
.hook-card-header::-webkit-details-marker {
display: none;
}
.hook-card-icon {
color: var(--accent);
flex: none;
}
.hook-name {
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hook-card-status {
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--text-secondary);
white-space: nowrap;
}
.hook-status-icon {
display: inline-flex;
align-items: center;
color: var(--accent);
flex: none;
}
.hook-card[data-status=allow] > .hook-card-header > .hook-status-icon,
.hook-card[data-status=ok] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=allow] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=ok] > .hook-card-header > .hook-status-icon {
color: var(--success);
}
.hook-card[data-status=ask] > .hook-card-header > .hook-status-icon,
.hook-card[data-status=halt-suppressed] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=ask] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=halt-suppressed] > .hook-card-header > .hook-status-icon {
color: var(--warning);
}
.hook-card[data-status=deny] > .hook-card-header > .hook-status-icon,
.hook-card[data-status=blocked] > .hook-card-header > .hook-status-icon,
.hook-card[data-status=error] > .hook-card-header > .hook-status-icon,
.hook-card[data-status=halted] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=deny] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=blocked] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=error] > .hook-card-header > .hook-status-icon,
.hook-card-group[data-status=halted] > .hook-card-header > .hook-status-icon {
color: var(--error);
}
.hook-card[data-status=deny],
.hook-card[data-status=blocked],
.hook-card[data-status=error],
.hook-card[data-status=halted],
.hook-card-group[data-status=deny],
.hook-card-group[data-status=blocked],
.hook-card-group[data-status=error],
.hook-card-group[data-status=halted] {
border-color: color-mix(in srgb, var(--error) 45%, var(--border));
}
.hook-card-detail {
margin-top: var(--spacing-xs);
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--text-secondary);
word-break: break-word;
overflow-wrap: anywhere;
}
.hook-card:not([open]) .hook-card-detail {
display: none;
}
.hook-card-raw {
margin-top: var(--spacing-xs);
font-size: var(--font-size-xs);
}
.hook-card:not([open]) .hook-card-raw {
display: none;
}
.hook-card-raw-summary {
cursor: pointer;
list-style: none;
color: var(--text-secondary);
width: fit-content;
padding: 2px 0;
}
.hook-card-raw-summary::-webkit-details-marker {
display: none;
}
.hook-card-raw-summary::before {
content: "\25b8 ";
}
.hook-card-raw[open] > .hook-card-raw-summary::before {
content: "\25be ";
}
.hook-card-raw-summary:hover {
color: var(--text-primary);
}
.hook-card-raw-body {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin-top: var(--spacing-xs);
}
.hook-card-raw-chips {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.hook-card-raw-chip {
padding: 1px var(--spacing-xs);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-family: var(--font-mono);
white-space: nowrap;
}
.hook-card-raw-status {
color: var(--text-muted);
}
.hook-card-raw-label {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--text-secondary);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hook-card-raw-copy {
margin-left: auto;
padding: 0 var(--spacing-xs);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: var(--font-size-xs);
cursor: pointer;
}
.hook-card-raw-copy:hover {
color: var(--text-primary);
border-color: var(--accent);
}
.hook-card-raw-pre {
margin: 2px 0 0;
max-height: 320px;
overflow: auto;
padding: var(--spacing-xs);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-base);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
line-height: var(--line-height-base);
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.msg-origin-marker {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-xs);
color: var(--accent);
}
.msg-origin-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.msg-origin-edited {
color: var(--text-muted);
font-style: italic;
}
/* src/renderer/styles/global/input-bar.css */
.thread-tabs {
display: flex;
align-items: center;
gap: 2px;
padding: 0 var(--spacing-sm);
height: 36px;
background: var(--bg-elevated);
overflow-x: auto;
}
.thread-tab {
padding: 4px var(--spacing-md);
border-radius: var(--radius);
font-size: var(--font-size-sm);
white-space: nowrap;
color: var(--text-secondary);
}
.thread-tab[aria-selected=true] {
background: var(--bg-base);
color: var(--text-primary);
}
.new-thread-btn {
padding: 4px 8px;
color: var(--text-muted);
font-size: 16px;
}
.prompt-input {
width: 100%;
border-radius: 0;
border: none;
border-top: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--spacing-md);
background: transparent;
font-family: inherit;
font-size: inherit;
outline: none;
cursor: text;
min-height: calc(2lh + 2 * var(--spacing-md));
max-height: 40vh;
overflow-y: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.prompt-input:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.prompt-input[data-next-step]:empty::after {
content: "Tab";
margin-left: var(--spacing-sm);
padding: 0 var(--spacing-xs);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.75em;
color: var(--text-muted);
pointer-events: none;
}
.input-row {
position: relative;
}
.composer-branch-warning {
display: flex;
align-items: center;
gap: var(--spacing-sm);
border-top: 1px solid var(--border);
padding: 8px var(--spacing-md);
background: color-mix(in srgb, var(--warning) 12%, var(--bg-base));
color: var(--text-primary);
font-size: 12px;
overflow: hidden;
}
.guarded-yolo-banner {
display: flex;
align-items: center;
gap: var(--spacing-sm);
border-top: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
padding: var(--spacing-sm) var(--spacing-md);
background: color-mix(in srgb, var(--danger) 14%, var(--bg-base));
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.guarded-yolo-banner[hidden] {
display: none;
}
.guarded-yolo-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: calc(var(--spacing-lg) + var(--spacing-xs));
height: calc(var(--spacing-lg) + var(--spacing-xs));
border-radius: 50%;
background: var(--danger);
color: white;
font-weight: 800;
flex: 0 0 auto;
}
.guarded-yolo-text {
min-width: 0;
flex: 1;
line-height: var(--line-height-base);
}
.guarded-yolo-disable {
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--danger) 60%, var(--border));
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--bg-elevated);
color: var(--text-primary);
font: inherit;
}
.guarded-yolo-disable:hover {
border-color: var(--danger);
}
.composer-branch-warning[hidden] {
display: none;
}
.composer-image-warning {
display: flex;
align-items: center;
gap: var(--spacing-sm);
border-top: 1px solid var(--border);
padding: 8px var(--spacing-md);
background: color-mix(in srgb, var(--warning) 12%, var(--bg-base));
color: var(--text-primary);
font-size: 12px;
}
.composer-image-warning[hidden] {
display: none;
}
.composer-image-warning-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--warning);
color: var(--bg-base);
font-weight: 700;
flex: 0 0 auto;
}
.composer-image-warning-text {
min-width: 0;
flex: 1;
line-height: var(--line-height-base);
}
.composer-image-model-btn,
.composer-image-describe-btn,
.composer-image-without-btn {
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--border));
border-radius: var(--radius);
padding: 4px 10px;
background: var(--bg-elevated);
color: var(--text-primary);
font: inherit;
white-space: nowrap;
cursor: pointer;
}
.composer-image-model-btn:hover,
.composer-image-describe-btn:hover,
.composer-image-without-btn:hover {
border-color: var(--warning);
}
.composer-image-model-btn[hidden],
.composer-image-describe-btn[hidden] {
display: none;
}
.composer-image-model-btn:disabled,
.composer-image-describe-btn:disabled,
.composer-image-without-btn:disabled {
opacity: 0.65;
cursor: progress;
}
.composer-context-warning {
display: flex;
align-items: center;
gap: var(--spacing-sm);
border-top: 1px solid var(--border);
padding: 8px var(--spacing-md);
background: color-mix(in srgb, var(--warning) 12%, var(--bg-base));
color: var(--text-primary);
font-size: 12px;
}
.composer-context-warning.is-over {
background: color-mix(in srgb, var(--danger) 12%, var(--bg-base));
}
.composer-context-warning[hidden] {
display: none;
}
.composer-context-warning-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--warning);
color: var(--bg-base);
font-weight: 700;
flex: 0 0 auto;
}
.composer-context-warning.is-over .composer-context-warning-icon {
background: var(--danger);
}
.composer-context-warning-text {
min-width: 0;
flex: 1;
line-height: var(--line-height-base);
}
.composer-context-model-btn {
flex: 0 0 auto;
border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--border));
border-radius: var(--radius);
padding: 4px 10px;
background: var(--bg-elevated);
color: var(--text-primary);
font: inherit;
white-space: nowrap;
cursor: pointer;
}
.composer-context-model-btn:hover {
border-color: var(--warning);
}
.composer-context-warning.is-over .composer-context-model-btn {
border-color: color-mix(in srgb, var(--danger) 60%, var(--border));
}
.composer-context-warning.is-over .composer-context-model-btn:hover {
border-color: var(--danger);
}
.composer-checkout-error {
display: flex;
align-items: center;
gap: var(--spacing-sm);
border-top: 1px solid var(--border);
padding: 8px var(--spacing-md);
background: color-mix(in srgb, var(--danger) 10%, var(--bg-base));
color: var(--text-primary);
font-size: 12px;
}
.composer-checkout-error[hidden] {
display: none;
}
.composer-checkout-error-text {
min-width: 0;
flex: 1;
overflow-wrap: anywhere;
}
.composer-checkout-retry-btn {
border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--border));
border-radius: var(--radius);
padding: 4px 10px;
background: var(--bg-elevated);
color: var(--text-primary);
font: inherit;
cursor: pointer;
}
.composer-branch-warning-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--warning);
color: var(--bg-base);
font-weight: 700;
flex: 0 0 auto;
}
.composer-branch-warning-text {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-branch-checkout-btn {
flex: 0 0 84px;
width: 84px;
border: 1px solid color-mix(in srgb, var(--warning) 60%, var(--border));
border-radius: var(--radius);
padding: 4px 10px;
background: var(--bg-elevated);
color: var(--text-primary);
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.composer-branch-checkout-btn:hover:not(:disabled) {
border-color: var(--warning);
}
.composer-branch-checkout-btn:disabled {
opacity: 0.65;
cursor: progress;
}
.composer-branch-continue-btn {
flex: 0 0 auto;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 10px;
background: var(--bg-elevated);
color: var(--text-primary);
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.composer-branch-continue-btn:hover:not(:disabled) {
border-color: var(--warning);
}
.composer-branch-continue-btn:disabled {
opacity: 0.65;
cursor: progress;
}
.prompt-input {
padding-right: 84px;
padding-left: 44px;
}
.prompt-input.with-stop {
padding-right: 148px;
}
.attach-btn {
position: absolute;
left: 8px;
bottom: var(--spacing-md);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius);
color: var(--text-secondary);
background: transparent;
cursor: pointer;
}
.attach-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.attach-btn-icon {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.stop-btn {
position: absolute;
right: 84px;
bottom: var(--spacing-md);
border-radius: var(--radius);
padding: 6px 12px;
color: var(--text-secondary);
background: var(--bg-hover);
}
.stop-btn:hover {
color: var(--text-primary);
}
.stop-btn.stop-pending {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 15%, var(--bg-hover));
outline: 1px solid var(--danger);
}
.submit-btn {
position: absolute;
right: var(--spacing-md);
bottom: var(--spacing-md);
background: var(--accent);
color: var(--text-on-accent);
border-radius: var(--radius);
padding: 6px 16px;
}
.submit-btn.with-stop {
right: var(--spacing-md);
}
.footer-queue {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
.footer-running {
font-size: 11px;
color: var(--accent);
white-space: nowrap;
}
.footer-indexing {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
.footer-indexing[data-state=error] {
color: var(--danger);
}
.footer-indexing[data-state=limited],
.footer-indexing[data-state=skipped] {
color: var(--warning);
}
.message-queued-badge {
display: inline-block;
margin-bottom: var(--spacing-xs);
padding: 1px 6px;
border-radius: var(--radius);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--bg-hover);
}
.msg-queued .message-body {
opacity: 0.85;
}
.msg-queued.msg-editing .message-body {
opacity: 1;
}
.msg-queued.msg-held .message-queued-badge {
color: white;
background: var(--warning, #d18616);
}
.queued-action.queued-release {
color: white;
background: var(--accent);
border-color: transparent;
}
.queued-action.queued-release:hover {
color: white;
filter: brightness(1.08);
}
.message-queued-ui {
margin-top: var(--spacing-sm);
}
.message-queued-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
margin-top: var(--spacing-xs);
}
.queued-action {
font-size: 11px;
color: var(--text-secondary);
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 10px;
cursor: pointer;
}
.queued-action:hover {
color: var(--text-primary);
border-color: var(--text-muted);
}
.queued-action.queued-send,
.queued-action.queued-send-now {
color: var(--text-on-accent);
background: var(--accent);
border-color: transparent;
}
.queued-action.queued-send:hover,
.queued-action.queued-send-now:hover {
color: white;
filter: brightness(1.08);
}
.queued-action.queued-delete:hover {
color: var(--danger, #f14c4c);
border-color: var(--danger, #f14c4c);
}
.message-edit-input {
width: 100%;
resize: vertical;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
background: var(--bg-base);
color: var(--text-primary);
font-family: inherit;
font-size: inherit;
line-height: var(--line-height-base);
}
.message-edit-input:focus {
outline: none;
border-color: var(--accent);
}
.input-footer {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
font-size: 11px;
color: var(--text-muted);
background: transparent;
border-top: 1px solid var(--border);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.portrait-panel-bar {
display: none;
position: absolute;
z-index: 31;
left: 50%;
right: auto;
bottom: 0;
transform: translateX(-50%);
align-items: center;
gap: 2px;
flex-wrap: nowrap;
overflow: visible;
width: var(--chat-composer-width);
box-sizing: border-box;
height: var(--chrome-action-band-height);
min-height: var(--chrome-action-band-height);
max-height: var(--chrome-action-band-height);
padding: 0 var(--spacing-md);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-bottom: 0;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
flex-shrink: 0;
}
#app.is-portrait-chrome .portrait-panel-bar {
display: flex;
}
#app.is-portrait-chrome .pane-chat:not(.composer-centered) #input-bar {
bottom: calc(var(--chrome-action-band-height) + var(--spacing-md));
}
#app.is-portrait-chrome .pane-chat:not(.composer-centered) .conversation {
padding-bottom: calc(var(--chat-composer-height) + var(--chrome-action-band-height) + var(--spacing-md));
}
.portrait-panel-bar .titlebar-text-btn,
.portrait-panel-bar .portrait-panel-btn {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
box-sizing: border-box;
height: calc(var(--chrome-action-band-height) - 2 * var(--spacing-xs));
padding: 0 var(--spacing-sm);
gap: 4px;
white-space: nowrap;
background: transparent;
border: none;
border-radius: var(--radius);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.portrait-panel-bar .titlebar-text-btn:hover,
.portrait-panel-bar .portrait-panel-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.portrait-panel-bar .titlebar-text-btn.active,
.portrait-panel-bar .portrait-panel-btn.active {
color: var(--text-primary);
background: var(--bg-selected);
}
.portrait-panel-bar .titlebar-text-btn[data-portrait-overflow],
.portrait-panel-bar .portrait-panel-btn[data-portrait-overflow] {
display: none;
}
.portrait-panel-overflow {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}
.portrait-panel-overflow[hidden] {
display: none;
}
.portrait-panel-overflow-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
height: calc(var(--chrome-action-band-height) - 2 * var(--spacing-xs));
padding: 0 var(--spacing-sm);
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-muted);
line-height: 1;
}
.portrait-panel-overflow-trigger:hover,
.portrait-panel-overflow-trigger[aria-expanded=true] {
color: var(--text-primary);
background: var(--bg-hover);
}
.portrait-panel-overflow-menu {
position: absolute;
z-index: 40;
bottom: calc(100% + 4px);
right: 0;
width: max-content;
min-width: 140px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) 0;
box-shadow: var(--shadow-md);
}
.portrait-panel-overflow-menu[hidden] {
display: none;
}
.portrait-panel-overflow-item {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
text-align: left;
font-size: var(--font-size-sm);
color: var(--text-primary);
background: transparent;
border: none;
padding: 6px var(--spacing-md);
cursor: pointer;
white-space: nowrap;
}
.portrait-panel-overflow-item:hover,
.portrait-panel-overflow-item.is-active {
background: var(--bg-hover);
}
.portrait-panel-overflow-item.is-active {
color: var(--accent);
}
.footer-model-host {
min-width: 0;
max-width: min(220px, 40vw);
}
.footer-branch-host {
min-width: 0;
flex-shrink: 1;
max-width: min(200px, 30vw);
}
.footer-checkout-host {
position: relative;
flex: 0 0 auto;
}
.footer-checkout-host[hidden] {
display: none;
}
.footer-checkout-btn {
border: 0;
border-radius: var(--radius);
padding: 1px 4px;
background: transparent;
color: var(--text-muted);
font: inherit;
cursor: pointer;
white-space: nowrap;
}
.footer-checkout-btn:hover,
.footer-checkout-btn[aria-expanded=true] {
background: var(--bg-hover);
color: var(--text-primary);
}
.footer-checkout-btn:disabled {
cursor: wait;
opacity: 0.7;
}
.footer-checkout-menu {
position: absolute;
left: 0;
bottom: calc(100% + var(--spacing-xs));
display: grid;
min-width: 154px;
padding: var(--spacing-xs);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
}
.footer-checkout-menu[hidden] {
display: none;
}
.footer-checkout-menu button {
border: 0;
border-radius: var(--radius);
padding: 6px 8px;
background: transparent;
color: var(--text-primary);
font: inherit;
text-align: left;
cursor: pointer;
}
.footer-checkout-menu button:hover {
background: var(--bg-hover);
}
.footer-branch-status,
.branch-picker-trigger.footer-branch-status {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
font-size: 11px;
color: var(--text-muted);
background: transparent;
border: none;
border-radius: var(--radius);
padding: 0 4px;
cursor: pointer;
min-width: 0;
font-family: inherit;
}
.branch-picker-trigger.footer-branch-status:hover {
color: var(--text-primary);
}
.footer-branch-status.is-link {
color: var(--link);
text-decoration: underline dotted;
text-underline-offset: 2px;
cursor: pointer;
}
.footer-branch-status.is-copyable {
cursor: pointer;
}
.footer-branch-status.is-link:hover {
color: var(--text-primary);
}
.footer-branch-status.is-mismatch {
color: var(--warning);
}
.footer-branch-status.is-mismatch.is-link {
color: var(--warning);
}
.footer-branch-label,
.branch-picker-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.branch-picker {
position: relative;
}
.branch-picker-chevron {
flex-shrink: 0;
display: inline-flex;
align-items: center;
opacity: 0.7;
}
.branch-picker:not(.is-picker-mode) .branch-picker-chevron {
display: none;
}
.branch-picker-menu {
position: absolute;
bottom: calc(100% + 4px);
left: 0;
min-width: 180px;
max-height: 280px;
overflow-y: auto;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 4px 0;
}
.branch-picker-option {
display: flex;
align-items: center;
width: 100%;
padding: 4px 12px;
font-size: 12px;
color: var(--text-primary);
background: transparent;
border: none;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.branch-picker-option:hover {
background: var(--bg-hover);
}
.branch-picker-option.is-selected {
color: var(--accent);
font-weight: 600;
}
.branch-picker-action {
color: var(--text-secondary);
font-size: 11px;
}
.branch-picker-option-label {
flex: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.branch-picker-default-badge {
flex-shrink: 0;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 4px;
margin-left: 6px;
}
.branch-picker-empty {
padding: 8px 12px;
font-size: 12px;
color: var(--text-muted);
}
.footer-overflow {
display: block;
position: static;
flex-shrink: 0;
}
.input-footer.is-compact .footer-usage {
display: none;
}
.footer-overflow-trigger {
display: inline-flex;
align-items: center;
line-height: 1;
color: var(--text-muted);
padding: 0 4px;
}
.footer-overflow-trigger:hover {
color: var(--text-secondary);
}
.footer-overflow-menu {
--footer-popup-min-width: 120px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) 0;
box-shadow: var(--shadow-md);
}
.footer-overflow-item {
display: block;
width: 100%;
max-width: 100%;
text-align: left;
font-size: 11px;
color: var(--text-primary);
background: transparent;
border: none;
padding: 6px var(--spacing-md);
cursor: pointer;
overflow-wrap: anywhere;
}
.footer-overflow-item:hover {
background: rgba(255, 255, 255, 0.06);
}
.footer-usage-group {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
flex-shrink: 0;
}
.context-wheel {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
position: relative;
}
.context-wheel-popover {
--footer-popup-min-width: 210px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm) var(--spacing-md);
box-shadow: var(--shadow-md);
font-size: 11px;
color: var(--text-primary);
pointer-events: none;
}
.footer-model-host {
--footer-popup-anchor: --footer-model-trigger;
}
.footer-checkout-host {
--footer-popup-anchor: --footer-checkout-trigger;
}
.footer-branch-host {
--footer-popup-anchor: --footer-branch-trigger;
}
.footer-overflow {
--footer-popup-anchor: --footer-overflow-trigger;
}
.context-wheel {
--footer-popup-anchor: --footer-context-trigger;
}
.footer-usage,
.footer-usage-popover {
--footer-popup-anchor: --footer-usage-trigger;
}
.footer-model-host .model-picker,
.footer-checkout-host,
.footer-branch-host .branch-picker,
.footer-overflow,
.context-wheel {
position: static;
}
.footer-model-host .model-picker-trigger,
.footer-checkout-btn,
.footer-branch-host .branch-picker-trigger,
.footer-overflow-trigger,
.footer-usage,
.context-wheel {
anchor-name: var(--footer-popup-anchor);
}
@position-try --footer-popup-clamp-left {
left: 0;
right: auto;
}
@position-try --footer-popup-clamp-right {
left: auto;
right: 0;
}
.footer-model-host .model-picker-menu,
.footer-checkout-menu,
.footer-branch-host .branch-picker-menu,
.footer-overflow-menu,
.footer-usage-popover,
.context-wheel-popover {
position: absolute;
z-index: 100;
position-anchor: var(--footer-popup-anchor);
bottom: calc(anchor(top) + var(--spacing-xs));
box-sizing: border-box;
width: max-content;
min-width: min(var(--footer-popup-min-width, 0px), 100%);
max-width: min(var(--footer-popup-max-width, 100vw), 100%);
}
.footer-model-host .model-picker-menu,
.footer-checkout-menu,
.footer-branch-host .branch-picker-menu {
left: anchor(left);
right: auto;
position-try-fallbacks: --footer-popup-clamp-right;
}
.footer-overflow-menu,
.footer-usage-popover,
.context-wheel-popover {
left: auto;
right: anchor(right);
position-try-fallbacks: --footer-popup-clamp-left;
}
.input-footer.is-compact .footer-model-host .model-picker-menu,
.input-footer.is-compact .footer-checkout-menu,
.input-footer.is-compact .footer-branch-host .branch-picker-menu {
left: 0;
right: auto;
position-try-fallbacks: none;
}
.input-footer.is-compact .footer-overflow-menu,
.input-footer.is-compact .context-wheel-popover {
left: auto;
right: 0;
position-try-fallbacks: none;
}
.input-footer.is-compact .footer-usage-popover {
display: none;
}
.footer-model-host .model-picker-menu {
--footer-popup-min-width: 220px;
--footer-popup-max-width: 420px;
}
.footer-model-host .model-picker-filter {
min-width: min(220px, 100%);
box-sizing: border-box;
}
.footer-checkout-menu {
--footer-popup-min-width: 154px;
}
.footer-branch-host .branch-picker-menu {
--footer-popup-min-width: 180px;
}
.context-wheel-popover[hidden] {
display: none;
}
.context-wheel-popover-header {
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
white-space: nowrap;
}
.context-wheel-popover-note {
color: var(--text-muted);
white-space: nowrap;
}
.context-wheel-popover-row {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
white-space: nowrap;
}
.context-wheel-popover-swatch {
width: 8px;
height: 8px;
border-radius: 2px;
flex-shrink: 0;
}
.context-wheel-popover-name {
flex: 1;
}
.context-wheel-popover-value {
color: var(--text-muted);
margin-left: 12px;
}
.context-wheel-track {
stroke: var(--border);
}
.context-wheel-fill {
stroke: var(--text-secondary);
transition: stroke-dasharray 0.2s ease;
}
.context-wheel-label {
font-size: 11px;
color: var(--text-muted);
min-width: 2.5ch;
}
.context-wheel.is-interactive {
cursor: help;
}
.context-wheel.has-breakdown {
cursor: pointer;
}
.context-wheel.is-interactive:hover .context-wheel-label,
.context-wheel.has-breakdown:hover .context-wheel-label {
color: var(--text-secondary);
}
.footer-usage {
font-size: 11px;
color: var(--text-muted);
text-decoration: underline dotted;
text-underline-offset: 2px;
padding: 0;
flex-shrink: 0;
cursor: help;
}
.footer-usage:hover,
.footer-usage:focus-visible {
color: var(--text-secondary);
}
.footer-usage-popover {
--footer-popup-min-width: 210px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm) var(--spacing-md);
box-shadow: var(--shadow-md);
font-size: 11px;
color: var(--text-primary);
pointer-events: none;
}
.footer-usage-popover[hidden] {
display: none;
}
.footer-usage-popover-header {
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
white-space: nowrap;
}
.footer-usage-popover-row {
display: flex;
align-items: center;
gap: 12px;
padding: 2px 0;
white-space: nowrap;
}
.footer-usage-popover-row.is-model .footer-usage-popover-name,
.footer-usage-popover-row.is-subagents .footer-usage-popover-name {
color: var(--text-secondary);
}
.footer-usage-popover-name {
flex: 1;
}
.footer-usage-popover-value {
color: var(--text-muted);
margin-left: auto;
}
.footer-usage-popover-divider {
border-top: 1px solid var(--border);
margin: 6px 0;
}
.footer-usage-popover-note {
color: var(--text-muted);
margin-top: 6px;
white-space: nowrap;
}
.footer-model-select {
font-size: 11px;
color: var(--text-secondary);
background: transparent;
border: none;
border-radius: var(--radius);
padding: 0 2px;
cursor: pointer;
}
.footer-model-select:hover {
color: var(--text-primary);
}
.checkbox-label {
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
}
.checkbox-label input {
width: auto;
}
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
}
.toggle-switch-track {
display: block;
width: 36px;
height: 20px;
background: var(--border);
border-radius: 10px;
position: relative;
transition: background 0.15s ease;
}
.toggle-switch-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--text-primary);
border-radius: 50%;
transition: transform 0.15s ease;
}
.toggle-switch input:checked + .toggle-switch-track {
background: var(--accent);
}
.toggle-switch input:checked + .toggle-switch-track::after {
transform: translateX(16px);
background: var(--bg-base);
}
.toggle-switch input:focus-visible + .toggle-switch-track {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.toggle-switch input:disabled + .toggle-switch-track {
opacity: 0.45;
cursor: not-allowed;
}
.toggle-switch:has(input:disabled) {
cursor: not-allowed;
}
.lmstudio-test-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-xs);
}
#lmstudio-test-btn {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 12px;
font-size: var(--font-size-sm);
}
.lmstudio-test-status {
font-size: 11px;
color: var(--text-muted);
}
.lmstudio-test-status.ok {
color: var(--success);
}
.lmstudio-test-status.err {
color: var(--error);
}
@supports not (anchor-name: --a) {
.footer-model-host .model-picker-menu,
.footer-checkout-menu,
.footer-branch-host .branch-picker-menu,
.footer-overflow-menu,
.footer-usage-popover,
.context-wheel-popover {
bottom: calc(100% + var(--spacing-xs));
top: auto;
}
.footer-model-host .model-picker-menu,
.footer-checkout-menu,
.footer-branch-host .branch-picker-menu {
left: var(--spacing-md);
right: auto;
}
.footer-overflow-menu,
.footer-usage-popover,
.context-wheel-popover {
left: auto;
right: var(--spacing-md);
}
}
/* src/renderer/styles/global/welcome.css */
#welcome {
position: absolute;
inset: 38px 0 0 0;
z-index: 50;
display: none;
align-items: center;
justify-content: center;
background: var(--bg-base);
-webkit-app-region: drag;
}
#welcome.visible {
display: flex;
}
#welcome button,
#welcome a,
#welcome input {
-webkit-app-region: no-drag;
}
.welcome-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-lg);
padding: var(--spacing-xl) * 3;
max-width: 480px;
margin: 0 auto;
margin-top: 100px;
text-align: center;
}
.welcome-heading {
font-size: 24px;
font-weight: 600;
}
.welcome-sub {
color: var(--text-secondary);
}
.welcome-new-btn,
.welcome-open-btn {
height: var(--action-min-height);
min-height: var(--action-min-height);
padding: var(--action-padding-block) var(--action-padding-inline);
border-radius: var(--action-radius);
font-size: var(--font-size-base);
font-weight: 600;
line-height: var(--line-height-base);
}
.welcome-new-btn {
background: var(--accent-fill);
color: var(--text-on-accent);
}
.welcome-open-btn {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border);
}
.welcome-open-btn:hover {
border-color: var(--accent);
}
.welcome-hint {
font-size: var(--font-size-sm);
color: var(--text-muted);
max-width: 360px;
}
.titlebar-drag {
flex: 1 0 var(--spacing-lg);
min-width: var(--spacing-lg);
height: 100%;
-webkit-app-region: drag;
}
.workspace-name {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--titlebar-height);
}
.workspace-branch {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: var(--titlebar-height);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-branch::before {
content: "\2387";
margin-right: 4px;
opacity: 0.7;
}
.titlebar-btn {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 4px 8px;
border-radius: var(--radius);
}
/* src/renderer/styles/global/diff.css */
.monaco-container {
flex: 1;
overflow: hidden;
}
.diff-container {
position: relative;
flex: 1;
min-width: 0;
}
.diff-stage {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.diff-stage-toolbar {
display: flex;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.diff-stage-body {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.panel-empty {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
color: var(--text-muted);
font-size: var(--font-size-sm);
text-align: center;
padding: var(--spacing-xl);
}
.diff-approval-bar {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.diff-approval-bar[hidden] {
display: none;
}
.diff-accept-btn {
background: var(--success);
color: #000;
border-radius: var(--radius);
padding: 6px 14px;
}
.diff-reject-btn {
background: var(--error);
color: #fff;
border-radius: var(--radius);
padding: 6px 14px;
}
/* src/renderer/styles/global/settings.css */
.settings-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: var(--bg-base);
}
dialog.settings-overlay {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
padding: 0;
border: none;
color: inherit;
overflow: hidden;
}
dialog.settings-overlay::backdrop {
background: var(--bg-base);
}
.settings-overlay h2 {
margin-bottom: 0;
}
.settings-shell {
display: flex;
flex-direction: column;
height: 100%;
background: var(--bg-base);
}
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
height: calc(var(--titlebar-height) + 1px);
padding: 0 var(--spacing-lg) 0 var(--traffic-light-inset);
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
-webkit-app-region: drag;
}
.settings-header h2 {
font-size: var(--font-size-sm);
font-family: var(--font-family);
letter-spacing: normal;
font-weight: 400;
color: var(--text-secondary);
line-height: var(--titlebar-height);
}
.settings-close-btn {
-webkit-app-region: no-drag;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
border-radius: var(--radius);
color: var(--text-secondary);
line-height: 1;
}
.settings-close-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.settings-body {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.settings-nav {
width: calc(240px * var(--ui-scale));
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--spacing-md);
border-right: 1px solid var(--border);
background: var(--bg-elevated);
min-height: 0;
overflow-y: auto;
}
.settings-nav-btn {
display: flex;
align-items: center;
text-align: left;
min-height: var(--action-min-height);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 0;
color: var(--text-secondary);
font-size: var(--font-size-base);
}
.settings-nav-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.settings-nav-btn.active {
background: var(--bg-selected);
color: var(--text-primary);
font-weight: 600;
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
}
.settings-nav-subheadings {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--spacing-xs) 0;
}
.settings-nav-subheading {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-align: left;
min-height: calc(30px * var(--ui-scale));
padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) calc(var(--spacing-xl) + var(--spacing-xs));
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 600;
}
.settings-nav-subheading::before {
content: "\21b3";
color: var(--text-muted);
font-weight: 400;
}
.settings-nav-subheading:hover {
color: var(--text-primary);
}
.settings-nav-subheading:hover::before {
color: var(--text-secondary);
}
.settings-search {
margin-bottom: var(--spacing-md);
}
.settings-search-input {
width: 100%;
min-height: var(--action-min-height);
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-base);
color: var(--text-primary);
font-size: var(--font-size-base);
}
.settings-search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.settings-search-input::placeholder {
color: var(--text-muted);
}
.settings-search-results {
display: none;
}
.settings-content.settings-searching .settings-section {
display: none;
}
.settings-content.settings-searching .settings-search-results {
display: block;
}
.settings-search-empty {
color: var(--text-secondary);
font-size: var(--font-size-sm);
padding: var(--spacing-md) 0;
}
.settings-content {
flex: 1;
min-width: 0;
overflow-y: auto;
padding: calc(var(--spacing-xl) * 2) var(--spacing-xl) 0;
}
.settings-section,
.settings-search-results,
.settings-search-empty,
.settings-buttons {
width: min(100%, var(--settings-content-max));
margin-inline: auto;
}
.settings-section {
display: none;
}
.settings-section.active {
display: block;
}
.settings-section h3 {
font-family: var(--font-display);
font-size: calc(28px * var(--ui-scale));
font-weight: 400;
line-height: var(--line-height-base);
margin-bottom: var(--spacing-md);
}
.settings-section-desc,
.settings-fieldset-desc {
color: var(--text-secondary);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-lg);
line-height: var(--line-height-base);
}
.settings-section-desc {
font-size: var(--font-size-md);
max-width: 62ch;
margin-bottom: calc(var(--spacing-xl) + var(--spacing-sm));
}
.settings-content legend + .field-hint {
margin-bottom: var(--spacing-lg);
}
.settings-field-label {
display: block;
margin: calc(var(--spacing-lg) + var(--spacing-xs)) 0 var(--spacing-md);
color: var(--text-primary);
font-size: var(--font-size-base);
font-weight: 600;
}
.field-hint {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: var(--line-height-base);
}
.advisor-pair-hint[data-level=good] {
color: var(--success);
}
.advisor-pair-hint[data-level=warn] {
color: var(--warning, #d29922);
}
.external-link-hint-icon {
display: inline-block;
width: 0.9em;
height: 0.9em;
vertical-align: -0.1em;
background-color: currentColor;
-webkit-mask: var(--external-link-mask);
mask: var(--external-link-mask);
}
.slider-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.slider-row input[type=range] {
flex: 1;
}
.slider-value {
min-width: 2.75em;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.settings-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: calc(var(--spacing-xl) + var(--spacing-md));
}
.settings-action-row:last-child {
margin-bottom: 0;
}
.settings-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
padding-bottom: calc(var(--spacing-xl) + var(--spacing-lg));
position: sticky;
bottom: 0;
background: none;
}
.settings-buttons::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
to bottom,
transparent 0%,
color-mix(in srgb, var(--bg-base) 55%, transparent) 40%,
color-mix(in srgb, var(--bg-base) 88%, transparent) 100%);
backdrop-filter: blur(10px);
-webkit-mask-image:
linear-gradient(
to bottom,
transparent 0%,
#000 45%);
mask-image:
linear-gradient(
to bottom,
transparent 0%,
#000 45%);
}
.settings-buttons button {
-webkit-app-region: no-drag;
position: relative;
z-index: 1;
}
.settings-buttons button[type=submit] {
background: var(--accent);
color: var(--text-on-accent);
border-radius: var(--radius);
padding: var(--spacing-md) var(--spacing-xl);
}
.settings-buttons button[type=button] {
border-radius: var(--radius);
padding: var(--spacing-md) var(--spacing-xl);
color: var(--text-secondary);
}
.settings-buttons button[type=button]:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.settings-content fieldset {
border: 0;
background: var(--bg-elevated);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
}
.settings-section > fieldset,
.settings-section > .settings-mount > fieldset,
.settings-search-results > fieldset {
background: none;
padding: 0;
margin-bottom: calc(var(--spacing-xl) * 2);
}
.settings-content legend {
padding: 0;
color: var(--text-primary);
font-size: var(--font-size-md);
font-weight: 600;
}
.settings-section > fieldset > legend,
.settings-section > .settings-mount > fieldset > legend,
.settings-search-results > fieldset > legend {
font-family: var(--font-display);
font-size: calc(20px * var(--ui-scale));
font-weight: 400;
line-height: var(--line-height-base);
margin-bottom: var(--spacing-md);
}
.settings-content fieldset label {
margin-bottom: calc(var(--spacing-lg) + var(--spacing-sm));
}
.settings-content fieldset label:last-child {
margin-bottom: 0;
}
#settings-model-routing-host {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--border);
}
#settings-model-parameters-host {
margin-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--border);
}
.model-parameter-note {
margin-bottom: var(--spacing-lg);
}
.model-parameter-fields {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.model-parameter-fields input[type=number] {
max-width: 10rem;
}
.model-parameter-recommend {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.model-parameter-recommend-note {
margin: 0;
}
.model-role-heading {
margin: 0 0 var(--spacing-xs);
color: var(--text-primary);
font-size: var(--font-size-base);
font-weight: 600;
}
.model-role-fields > .settings-fieldset-desc {
margin-bottom: var(--spacing-lg);
}
.settings-content label:has(+ .field-hint),
.settings-content label:has(+ .settings-fieldset-desc) {
margin-bottom: var(--spacing-xs);
}
.settings-content label + .field-hint:not(:last-child),
.settings-content label + .settings-fieldset-desc:not(:last-child),
.settings-content fieldset > .field-hint:not(:last-child) {
margin-bottom: calc(var(--spacing-lg) + var(--spacing-sm));
}
.settings-content .field-hint:not(:last-child):has(+ .field-hint) {
margin-bottom: var(--spacing-xs);
}
.settings-content .checkbox-label + .field-hint,
.settings-content .checkbox-label + .settings-fieldset-desc {
padding-left: calc(var(--spacing-lg) + var(--spacing-xs));
}
.settings-content .checkbox-label + .checkbox-label {
margin-top: calc(-1 * var(--spacing-lg));
}
.app-icon-picker {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl) var(--spacing-lg);
max-width: 560px;
}
.app-icon-option {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.app-icon-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.app-icon-preview {
display: block;
padding: var(--spacing-xs);
border: 2px solid var(--border-subtle);
border-radius: 16px;
background: var(--bg-base);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-icon-preview img {
display: block;
width: 88px;
height: 88px;
border-radius: 14px;
}
.app-icon-option:hover .app-icon-preview {
border-color: var(--border-strong);
}
.app-icon-option:has(input:checked) .app-icon-preview {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.app-icon-option:has(input:checked) .app-icon-label {
color: var(--text-primary);
}
.app-icon-label {
font-size: 12px;
}
.settings-content label select,
.settings-content label input[type=text],
.settings-content label input[type=password],
.settings-content label input[type=number] {
width: 100%;
max-width: 480px;
min-height: var(--action-min-height);
padding-inline: var(--spacing-md);
}
.settings-content .checkbox-label {
min-height: calc(28px * var(--ui-scale));
padding: var(--spacing-xs) var(--spacing-sm);
margin-inline-start: calc(-1 * var(--spacing-sm));
border-radius: var(--radius);
font-size: var(--font-size-base);
}
.settings-content .checkbox-label:hover {
background: var(--bg-hover);
}
.settings-swatch-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-lg);
}
.settings-content input[type=color] {
width: calc(88px * var(--ui-scale));
height: var(--action-min-height);
padding: 2px;
cursor: pointer;
}
.settings-content input[type=color]::-webkit-color-swatch {
border: none;
border-radius: var(--radius);
}
.settings-content input[type=color]::-webkit-color-swatch-wrapper {
padding: 0;
}
.settings-nav,
.settings-content,
.settings-content button,
.settings-content input,
.settings-content select {
-webkit-app-region: no-drag;
}
.key-status {
font-size: 11px;
color: var(--text-muted);
}
.key-status.ok {
color: var(--success);
}
.key-status.err {
color: var(--error);
}
.env-key-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.env-key-results {
display: flex;
flex-direction: column;
gap: var(--spacing-xs, 4px);
margin-top: var(--spacing-sm);
}
.env-key-results:empty {
display: none;
}
.env-key-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--spacing-sm);
font-size: 12px;
}
.env-key-provider {
font-weight: 600;
min-width: 7em;
}
.env-key-source {
color: var(--text-muted);
font-family: var(--font-mono, monospace);
font-size: 11px;
}
.env-key-masked {
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-left: auto;
}
.provider-chips {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.provider-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
min-height: var(--action-min-height);
padding: var(--spacing-xs) var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-base);
color: var(--text-secondary);
font-size: var(--font-size-base);
}
.provider-chip:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.provider-chip.active {
border-color: var(--accent);
background: var(--bg-selected);
color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--accent);
}
.provider-chip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
}
.provider-vendor {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.provider-capability {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border);
}
.provider-vendor > .provider-capability:first-child {
padding-top: 0;
border-top: none;
}
.provider-capability-title {
margin: 0;
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.provider-panel-embedded {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.provider-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.provider-form > label {
margin-bottom: 0;
}
.provider-form-title {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin: 0;
font-size: var(--font-size-base);
color: var(--text-primary);
}
.provider-form-tag {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px var(--spacing-xs);
}
.provider-privacy-badge {
font-size: 10px;
letter-spacing: 0.02em;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px var(--spacing-xs);
color: var(--text-muted);
white-space: nowrap;
}
.provider-privacy-badge.zdr,
.provider-privacy-badge.local {
color: var(--success);
border-color: var(--success);
}
.provider-privacy-badge.trains {
color: var(--warning);
border-color: var(--warning);
}
.provider-privacy-badge.unknown {
color: var(--warning);
border-color: var(--border);
}
.provider-privacy-hint code {
overflow-wrap: anywhere;
}
.provider-field-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.provider-field-group > label {
margin-bottom: 0;
}
.provider-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.provider-form-footer {
margin-top: var(--spacing-xs);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border);
}
.provider-delete {
margin-left: auto;
color: var(--error);
}
.provider-models {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.provider-model-rows {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.provider-model-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr auto;
gap: var(--spacing-sm);
align-items: center;
}
.provider-model-row input {
width: 100%;
}
.provider-model-head {
font-size: 11px;
color: var(--text-muted);
}
.provider-model-remove {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--text-muted);
}
.provider-model-remove:hover {
color: var(--error);
}
.provider-save,
.provider-secondary,
.provider-delete,
.provider-add-model {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-lg);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
color: var(--text-primary);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.provider-save:hover:not(:disabled),
.provider-secondary:hover:not(:disabled),
.provider-delete:hover:not(:disabled),
.provider-add-model:hover:not(:disabled) {
opacity: 1;
background: var(--bg-hover);
}
.provider-save:disabled,
.provider-secondary:disabled,
.provider-delete:disabled,
.provider-add-model:disabled {
opacity: 0.5;
cursor: default;
}
.provider-save {
border-color: var(--accent);
background: var(--accent-fill);
color: var(--text-on-accent);
}
.provider-save:hover:not(:disabled) {
background: var(--accent-fill-hover);
color: var(--text-on-accent);
}
.provider-delete {
border-color: color-mix(in srgb, var(--error) 45%, transparent);
color: var(--error);
}
.provider-add-model {
align-self: flex-start;
}
.provider-advanced summary {
cursor: pointer;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.provider-advanced[open] summary {
margin-bottom: var(--spacing-sm);
}
.routing-advanced {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.routing-advanced summary {
cursor: pointer;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.routing-advanced[open] summary {
margin-bottom: var(--spacing-sm);
}
.usage-section-root {
display: flex;
flex-direction: column;
gap: calc(var(--spacing-xl) + var(--spacing-md));
}
.usage-plan-section,
.usage-worth-section,
.usage-ledger-section {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.usage-plan-heading,
.usage-worth-heading,
.usage-ledger-heading {
margin: 0;
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
}
.usage-worth-card {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
}
.usage-worth-verdict {
margin: 0;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.usage-worth-card[data-verdict=worth_it] .usage-worth-verdict {
color: var(--success);
}
.usage-worth-card[data-verdict=not_worth_it] .usage-worth-verdict {
color: var(--warning);
}
.usage-worth-card[data-verdict=borderline] .usage-worth-verdict {
color: var(--text-secondary);
}
.usage-worth-reason {
margin: 0;
}
.usage-worth-fee-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
}
.usage-worth-fee-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.usage-worth-fee-input {
width: 7rem;
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.usage-worth-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.usage-worth-inference-btn {
-webkit-app-region: no-drag;
align-self: flex-start;
background: transparent;
color: var(--accent);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
}
.usage-worth-inference-btn:hover {
background: var(--bg-hover);
}
.usage-plan-providers {
display: flex;
flex-direction: column;
gap: calc(var(--spacing-xl) + var(--spacing-md));
}
.usage-plan-provider {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.usage-plan-provider-title {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
}
.usage-plan-name {
margin: 0;
}
.usage-plan-status-error {
color: var(--danger, #c44);
}
.usage-plan-signin-btn {
align-self: flex-start;
-webkit-app-region: no-drag;
background: var(--accent);
color: var(--text-on-accent);
border: none;
border-radius: var(--radius);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
}
.usage-plan-signin-btn:hover {
filter: brightness(1.05);
}
.usage-plan-window,
.usage-credit-grant {
display: flex;
flex-direction: column;
gap: 4px;
}
.usage-plan-window-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
font-size: var(--font-size-sm);
}
.usage-plan-window-label {
color: var(--text-primary);
font-weight: 500;
}
.usage-plan-window-stats {
color: var(--text-muted);
}
.usage-plan-bar {
height: 6px;
border-radius: 999px;
background: var(--bg-elevated);
border: 1px solid var(--border);
overflow: hidden;
}
.usage-plan-bar-fill {
height: 100%;
background: var(--accent);
border-radius: inherit;
}
.usage-period-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.frontier-fieldset {
position: relative;
}
.frontier-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.frontier-control-group {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
.frontier-controls .frontier-btn,
.frontier-controls .frontier-cost-axis {
margin-left: 0;
}
.frontier-key {
display: flex;
flex-wrap: wrap;
gap: 4px var(--spacing-md);
margin: var(--spacing-sm) 0 0;
padding: 0;
list-style: none;
}
.frontier-key-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.frontier-key-swatch {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
}
.frontier-key-swatch[data-mark=dominated] {
background: var(--border-strong);
}
.frontier-key-swatch[data-mark=estimated] {
background: var(--bg-base);
box-shadow: inset 0 0 0 2px var(--accent);
}
.frontier-key-swatch[data-mark=discovery] {
opacity: 0.55;
}
.frontier-key-swatch[data-mark=plan] {
margin: 0 3px;
outline: 1px dashed var(--accent);
outline-offset: 3px;
}
.frontier-banded {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.frontier-band-row {
display: grid;
grid-template-columns: 52px 28px 1fr;
gap: 8px;
align-items: baseline;
}
.frontier-band-key {
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
font-weight: 600;
}
.frontier-band-count {
font-variant-numeric: tabular-nums;
color: var(--text-muted);
text-align: right;
}
.frontier-band-models {
color: var(--text-muted);
}
.frontier-tooltip {
position: absolute;
z-index: 30;
pointer-events: auto;
width: max-content;
max-width: 360px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
color: var(--text-primary);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-md);
}
.frontier-tooltip[hidden] {
display: none;
}
.frontier-tooltip .tt-title {
font-size: var(--font-size-sm);
}
.frontier-tooltip .tt-section {
margin-top: 6px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
}
.frontier-tooltip .tt-muted {
color: var(--text-muted);
font-size: 11px;
}
.frontier-tooltip .tt-status {
margin-top: 6px;
color: var(--text-secondary);
font-style: italic;
}
.frontier-tooltip .tt-card-link {
color: var(--link);
}
.frontier-tooltip .tt-card-link:hover {
color: var(--link-hover);
}
.frontier-btn {
padding: 2px 10px;
margin-left: 6px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 600;
}
.frontier-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.frontier-btn.active {
border-color: var(--accent);
color: var(--text-primary);
position: relative;
z-index: 1;
}
.frontier-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.frontier-discover {
display: inline-grid;
}
.frontier-discover-label {
grid-area: 1 / 1;
}
.frontier-discover-label[aria-hidden=true] {
visibility: hidden;
}
.frontier-cost-axis {
display: inline-flex;
margin-left: 6px;
vertical-align: middle;
}
.frontier-cost-axis .frontier-btn {
margin-left: 0;
border-radius: 0;
}
.frontier-cost-axis .frontier-btn + .frontier-btn {
margin-left: -1px;
}
.frontier-cost-axis .frontier-btn:first-child {
border-radius: var(--radius) 0 0 var(--radius);
}
.frontier-cost-axis .frontier-btn:last-child {
border-radius: 0 var(--radius) var(--radius) 0;
}
.frontier-expand-dialog {
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
color: var(--text-primary);
padding: 16px;
width: min(1400px, 96vw);
max-height: 90vh;
overflow: auto;
}
.frontier-expand-controls {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 10px;
}
.frontier-expand-controls {
position: sticky;
top: 0;
z-index: 1;
background: var(--bg-base);
padding-bottom: 6px;
}
.frontier-expand-chart {
min-height: 0;
}
.frontier-expand-dialog::backdrop {
background: rgb(0 0 0 / 55%);
}
.frontier-expand-dialog button {
margin-top: 8px;
padding: 4px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
}
.usage-period-btn {
padding: 6px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-elevated);
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.usage-period-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.usage-period-btn.active {
border-color: var(--accent);
color: var(--text-primary);
font-weight: 600;
}
.usage-period-label {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
}
.usage-headline {
font-size: var(--font-size-md);
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.usage-token-total {
margin: 0;
}
.usage-model-group {
margin-top: var(--spacing-md);
}
.usage-model-group h4 {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
}
.usage-empty {
margin: 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.usage-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
.usage-col-model {
width: 34%;
}
.usage-col-num {
width: 13.2%;
}
.usage-table th,
.usage-table td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.usage-table th {
color: var(--text-muted);
font-weight: 500;
}
.usage-estimated {
color: var(--text-muted);
font-style: italic;
}
.usage-table td code {
font-size: 12px;
overflow-wrap: anywhere;
}
.acp-detect-results {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
margin: var(--spacing-sm) 0;
}
.acp-detect-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
}
.acp-agent-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-md);
}
.acp-agent-card-head {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-sm);
}
.acp-agent-card-head code {
font-size: 12px;
color: var(--text-muted);
}
.acp-agent-fields {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.acp-model-row {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.acp-model-row select {
flex: 1 1 auto;
min-width: 0;
}
.acp-known-status {
font-size: 12px;
}
.acp-known-status.ok {
color: var(--success, var(--accent));
}
.acp-known-status.missing {
color: var(--text-muted);
}
.acp-cmd-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
.acp-cmd-label {
color: var(--text-muted);
font-size: 12px;
min-width: 52px;
}
.acp-cmd {
flex: 1;
user-select: all;
font-size: 12px;
background: var(--bg-subtle, var(--bg));
padding: 2px 6px;
border-radius: var(--radius);
overflow-x: auto;
}
.acp-cmd-copy {
flex: none;
}
.sources-group {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.sources-row {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
min-width: 0;
max-width: 100%;
overflow: hidden;
}
.sources-row-header {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
min-width: 0;
overflow: hidden;
}
.sources-row-primary {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
overflow: hidden;
}
.sources-row-title {
font-weight: 600;
flex: 1;
min-width: 0;
word-break: break-word;
}
.sources-row:hover:has(.sources-row-hover-detail) .sources-row-title,
.sources-row:focus-within:has(.sources-row-hover-detail) .sources-row-title {
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
}
.sources-badge {
flex: none;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px 6px;
}
.sources-badge-project {
color: var(--warning, #d29922);
border-color: var(--warning, #d29922);
}
.sources-badge-warning {
color: var(--warning, #d29922);
border-color: var(--warning, #d29922);
}
.sources-row-warning {
border-color: var(--warning, #d29922);
}
.sources-badge-unsupported {
color: var(--text-muted);
border-style: dashed;
}
.sources-badge-error {
color: var(--error);
border-color: var(--error);
}
.sources-badge-unsandboxed {
color: var(--warning, #d29922);
border-color: var(--warning, #d29922);
}
.sources-row-error {
font-size: 11px;
color: var(--error);
word-break: break-word;
margin-top: 2px;
}
.sources-badge-auto {
color: var(--accent, #3b82f6);
border-color: var(--accent, #3b82f6);
}
.sources-badge-untrusted {
color: var(--warning, #d29922);
border-style: dashed;
border-color: var(--warning, #d29922);
}
.sources-badge-btn {
font-family: inherit;
background: transparent;
cursor: pointer;
}
.sources-badge-untrusted.sources-badge-btn:hover,
.sources-badge-untrusted.sources-badge-btn:focus-visible {
border-style: solid;
background: color-mix(in srgb, var(--warning, #d29922) 14%, transparent);
}
.sources-row-title-btn {
font: inherit;
font-weight: 600;
text-align: left;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.sources-row-title-btn:hover,
.sources-row-title-btn:focus-visible {
color: var(--accent);
text-decoration: underline;
}
.sources-row-detail {
font-size: 11px;
color: var(--text-muted);
word-break: break-word;
margin-top: 2px;
}
.sources-row-hover-detail {
display: none;
flex: 1 1 0;
width: 0;
min-width: 0;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
pointer-events: none;
}
.sources-row:hover .sources-row-hover-detail,
.sources-row:focus-within .sources-row-hover-detail {
display: block;
}
.sources-empty {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.storage-project-path {
font-family: var(--font-mono);
overflow-wrap: anywhere;
}
.sources-row[data-worktree-path] .sources-row-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: normal;
}
.sources-worktree-size {
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
.sources-worktree-thread-btn {
background: transparent;
cursor: pointer;
}
.sources-worktree-thread-btn:hover,
.sources-worktree-thread-btn:focus-visible {
color: var(--text-primary);
border-color: var(--text-secondary);
}
.sources-worktree-action-btn {
flex: none;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px var(--spacing-sm);
cursor: pointer;
}
.sources-worktree-action-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.sources-worktree-delete-btn:hover:not(:disabled) {
border-color: var(--error);
color: var(--error);
}
.sources-worktree-action-btn:disabled {
opacity: 0.6;
cursor: default;
}
.sources-hook-test-btn {
flex: none;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px var(--spacing-sm);
cursor: pointer;
}
.sources-hook-test-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.sources-hook-test-btn:disabled {
opacity: 0.6;
cursor: default;
}
.hook-test {
margin-top: var(--spacing-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.hook-test-summary {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-items: center;
font-size: 11px;
color: var(--text-muted);
}
.hook-test-summary.hook-test-error {
color: var(--error);
}
.hook-test-chip {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px 6px;
}
.hook-test-outcome {
font-size: 11px;
color: var(--text-secondary);
word-break: break-word;
}
.hook-test-stream-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
margin-top: var(--spacing-xs);
}
.hook-test-stream pre {
margin: 2px 0 0;
padding: var(--spacing-sm);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 11px;
white-space: pre-wrap;
word-break: break-word;
max-height: 160px;
overflow: auto;
}
.hook-test-stream pre.hook-test-stream-empty {
color: var(--text-muted);
font-style: italic;
}
.plugins-group {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
font-size: var(--font-size-sm);
}
.plugins-group-heading {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.plugins-group-heading:not(:first-child) {
margin-top: var(--spacing-md);
}
.plugins-empty {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.plugin-row {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.plugin-row-disabled {
opacity: 0.65;
}
.plugin-row-header {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
}
.plugin-icon {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: calc(40px * var(--ui-scale));
height: calc(40px * var(--ui-scale));
border-radius: 10px;
overflow: hidden;
background: var(--bg-muted);
color: var(--text-secondary);
font-size: var(--font-size-lg);
font-weight: 600;
}
.plugin-icon-copse {
background: none;
}
.plugin-icon img {
display: block;
width: 100%;
height: 100%;
}
.plugin-icon-cursor img {
width: 58%;
height: 58%;
object-fit: contain;
}
.plugin-row-title {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.plugin-row-name-line {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.plugin-name {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
word-break: break-word;
}
.plugin-version {
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.plugin-badge {
flex: none;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1px 6px;
}
.plugin-badge-first-party,
.plugin-badge-user {
align-self: flex-start;
border: none;
padding: 0;
letter-spacing: 0.08em;
}
.plugin-badge-first-party {
color: var(--text-secondary);
}
.plugin-badge-user {
color: var(--warning, #d29922);
}
.plugin-badge-cursor {
align-self: flex-start;
border: none;
padding: 0;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.plugin-source-path {
margin: 0;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--text-muted);
overflow-wrap: anywhere;
}
.plugin-toggle-control {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex: none;
}
.plugin-toggle-control .plugin-toggle {
margin-bottom: 0;
}
.plugin-toggle-state {
font-size: var(--font-size-sm);
color: var(--text-muted);
line-height: 1;
}
.plugin-toggle-control:has(.plugin-toggle-input:checked) .plugin-toggle-state[data-side=on],
.plugin-toggle-control:not(:has(.plugin-toggle-input:checked)) .plugin-toggle-state[data-side=off] {
color: var(--text-primary);
font-weight: 600;
}
.plugin-source-review {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
}
.plugin-source-status {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
}
.plugin-source-details {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 3px var(--spacing-sm);
margin: 0;
font-size: 11px;
}
.plugin-source-details dt {
color: var(--text-muted);
}
.plugin-source-details dd {
margin: 0;
color: var(--text-secondary);
overflow-wrap: anywhere;
}
.plugin-badge-stable,
.plugin-badge-experimental {
border-radius: var(--action-radius);
padding: 1px var(--spacing-sm);
text-transform: capitalize;
letter-spacing: 0;
}
.plugin-badge-stable {
color: var(--success, #3fb950);
border-color: var(--success, #3fb950);
}
.plugin-badge-experimental {
color: var(--accent);
border-color: var(--accent);
}
.plugin-row-desc {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-base);
word-break: break-word;
}
.plugin-chips {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.plugin-chip {
font-size: 11px;
color: var(--text-secondary);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px var(--spacing-sm);
}
.plugin-chips-empty {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
}
.plugin-settings-fold {
border-top: 1px solid var(--border-subtle);
padding-top: var(--spacing-sm);
}
.plugin-settings-summary {
display: flex;
align-items: center;
gap: var(--spacing-sm);
min-height: calc(28px * var(--ui-scale));
padding: var(--spacing-xs) var(--spacing-sm);
margin-inline: calc(-1 * var(--spacing-sm));
border-radius: var(--radius);
color: var(--text-secondary);
font-size: var(--font-size-base);
cursor: pointer;
list-style: none;
}
.plugin-settings-summary::-webkit-details-marker {
display: none;
}
.plugin-settings-summary:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.plugin-settings-chevron {
width: 16px;
height: 16px;
transition: transform 0.15s ease;
}
.plugin-settings-fold[open] .plugin-settings-chevron {
transform: rotate(180deg);
}
.plugin-settings {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding-top: var(--spacing-sm);
}
.plugin-settings-heading {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
}
.plugin-setting-field {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.plugin-setting-title {
color: var(--text-primary);
}
.plugin-setting-desc {
grid-column: 1 / -1;
font-size: 11px;
color: var(--text-muted);
}
.plugin-setting-resolved {
grid-column: 1 / -1;
font-size: 11px;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.plugin-setting-input {
justify-self: end;
}
.plugin-setting-input.plugin-setting-string,
.plugin-setting-input.plugin-setting-number {
min-width: 180px;
}
.parallel-search-plugin-settings {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-xs);
border-top: 1px solid var(--border);
padding-top: var(--spacing-sm);
}
.parallel-search-key-fieldset {
margin: 0;
}
.parallel-search-notice {
margin: 0;
font-size: 11px;
color: var(--text-secondary);
}
.parallel-search-actions {
display: flex;
gap: var(--spacing-xs);
}
.parallel-search-save-btn,
.parallel-search-clear-btn {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
color: var(--text-primary);
padding: var(--spacing-xs) var(--spacing-sm);
cursor: pointer;
}
.parallel-search-save-btn:hover:not(:disabled),
.parallel-search-clear-btn:hover:not(:disabled) {
background: var(--bg-hover);
}
.parallel-search-save-btn:disabled,
.parallel-search-clear-btn:disabled {
cursor: default;
opacity: 0.55;
}
.plugin-credential-gate {
margin: 0;
font-size: 11px;
color: var(--warning, #d29922);
}
.plugin-toggle-input:disabled + .toggle-switch-track {
cursor: not-allowed;
opacity: 0.5;
}
.plugin-row[data-plugin-origin=cursor] .plugin-toggle-input:disabled + .toggle-switch-track {
opacity: 0.8;
}
.automation-plugin-settings {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-xs);
border-top: 1px solid var(--border);
padding-top: var(--spacing-sm);
}
.automation-plugin-heading,
.automation-row,
.automation-row-meta,
.automation-row-actions,
.automation-form-actions {
display: flex;
align-items: center;
}
.automation-plugin-heading {
justify-content: space-between;
gap: var(--spacing-md);
}
.automation-add-btn,
.automation-save-btn,
.automation-cancel-btn,
.automation-row-btn {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
color: var(--text-primary);
padding: var(--spacing-xs) var(--spacing-sm);
cursor: pointer;
}
.automation-add-btn:hover:not(:disabled),
.automation-cancel-btn:hover:not(:disabled),
.automation-row-btn:hover:not(:disabled) {
background: var(--bg-hover);
}
.automation-add-btn:disabled,
.automation-row-btn:disabled {
cursor: default;
opacity: 0.55;
}
.automation-scope,
.automation-notice,
.automation-status,
.automation-empty,
.automation-row-last-run,
.automation-hint {
margin: 0;
font-size: 11px;
color: var(--text-muted);
}
.automation-notice {
color: var(--text-secondary);
}
.automation-status {
border-radius: var(--radius);
background: var(--bg-elevated);
padding: var(--spacing-xs) var(--spacing-sm);
color: var(--success);
}
.automation-status-error {
color: var(--error);
}
.automation-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.automation-empty {
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: var(--spacing-md);
text-align: center;
}
.automation-row {
gap: var(--spacing-md);
justify-content: space-between;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
background: var(--bg-base);
}
.automation-row-paused {
opacity: 0.7;
}
.automation-row-copy {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
gap: 2px;
}
.automation-row-title {
color: var(--text-primary);
font-weight: 600;
}
.automation-row-meta {
min-width: 0;
flex-wrap: wrap;
gap: var(--spacing-sm);
font-size: 11px;
color: var(--text-secondary);
}
.automation-row-meta code {
color: var(--accent);
}
.automation-row-actions,
.automation-form-actions {
flex: none;
gap: var(--spacing-sm);
}
.automation-run-btn,
.automation-save-btn {
border-color: var(--accent);
background: var(--accent);
color: var(--text-on-accent);
}
.automation-remove-btn {
color: var(--error);
}
.automation-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-md);
background: var(--bg-base);
}
.automation-form[hidden] {
display: none;
}
.automation-label {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--spacing-xs);
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.automation-label:has(.automation-prompt-input),
.automation-worktree-limit-label,
.automation-enabled-label,
.automation-form-actions {
grid-column: 1 / -1;
}
.automation-input {
width: 100%;
min-width: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
color: var(--text-primary);
padding: var(--spacing-sm);
font: inherit;
}
.automation-prompt-input {
min-height: 88px;
resize: vertical;
}
.automation-enabled-label {
display: flex;
flex-direction: row;
align-items: center;
justify-self: start;
gap: var(--spacing-sm);
color: var(--text-secondary);
}
.automation-enabled-input {
width: auto;
}
.automation-form-actions {
justify-content: flex-end;
}
/* src/renderer/styles/global/onboarding.css */
.onboarding-overlay {
z-index: 250;
display: flex;
justify-content: center;
-webkit-app-region: no-drag;
}
.onboarding-shell {
width: min(720px, 100%);
margin: 0 auto;
flex: 1;
min-height: 0;
max-height: 100%;
}
.onboarding-header {
align-items: center;
}
.onboarding-tagline {
margin: 0;
padding: var(--spacing-md) var(--spacing-lg) calc(var(--spacing-md) + 2px);
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
border-bottom: 1px solid var(--border);
background: var(--bg-base);
flex-shrink: 0;
}
.onboarding-body {
flex: 1;
min-height: 0;
padding: var(--spacing-lg);
padding-bottom: calc(var(--spacing-xl) + var(--spacing-md));
overflow-y: auto;
display: block;
}
.onboarding-body > section > :first-child {
margin-top: 0;
}
.onboarding-body h3 {
font-size: 18px;
font-weight: 600;
margin: 0 0 var(--spacing-xs);
}
.onboarding-body .settings-section-desc {
margin-bottom: var(--spacing-md);
}
.onboarding-scan-group {
margin: var(--spacing-md) 0 var(--spacing-xs);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-secondary);
}
.onboarding-scan-results .detected-item-row {
padding: var(--spacing-xs) 0;
}
.detected-item-check {
align-self: center;
}
.onboarding-scan-status.ok {
color: var(--success);
}
.onboarding-scan-status.warn {
color: var(--warning, #c9a227);
}
.onboarding-scan-status.err {
color: var(--error);
}
.onboarding-body fieldset,
.onboarding-body .setup-lm-studio fieldset {
background: var(--bg-elevated);
margin-bottom: var(--spacing-lg);
}
.onboarding-body label,
.onboarding-body .setup-lm-studio label {
margin-bottom: var(--spacing-md);
}
.onboarding-body label select,
.onboarding-body label input[type=text],
.onboarding-body label input[type=password],
.onboarding-body label input[type=number] {
width: 100%;
max-width: 480px;
}
.onboarding-body .field-hint {
margin-top: var(--spacing-xs);
}
.onboarding-body .key-status {
margin-top: 2px;
}
.onboarding-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid var(--border);
flex-shrink: 0;
background: var(--bg-elevated);
}
.onboarding-primary {
background: var(--accent);
color: var(--text-on-accent);
border-radius: var(--radius);
padding: 8px 16px;
}
.onboarding-primary:disabled {
opacity: 0.5;
cursor: default;
}
.onboarding-skip {
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.setup-install-guide {
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
}
.setup-field {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-xs);
}
.setup-field + .setup-field {
padding-top: var(--spacing-sm);
border-top: 1px solid var(--border-subtle);
}
.setup-field:last-child {
margin-bottom: 0;
}
.setup-field-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-base);
}
.setup-field select,
.setup-field input[type=text],
.setup-field input[type=password] {
width: 100%;
max-width: 480px;
}
.setup-field .field-hint {
margin: 0;
line-height: var(--line-height-base);
padding-top: 2px;
}
.setup-install-guide h4 {
margin: 0 0 var(--spacing-sm);
}
.setup-steps {
margin: 0;
padding-left: 1.25rem;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.setup-steps li + li {
margin-top: var(--spacing-xs);
}
.setup-detection-status {
font-size: var(--font-size-sm);
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-md);
line-height: var(--line-height-base);
}
.setup-detection-status.ok {
color: var(--success);
}
.setup-detection-status.warn {
color: var(--warning, #c9a227);
}
.setup-detection-status.err {
color: var(--error);
}
.setup-context-advisory {
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--warning, #c9a227);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warning, #c9a227) 10%, transparent);
}
.setup-context-advisory[hidden] {
display: none;
}
.setup-context-advisory strong {
display: block;
margin-bottom: var(--spacing-xs);
}
.setup-context-advisory p {
margin: var(--spacing-xs) 0 0;
}
.preferred-models-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.preferred-model-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--spacing-sm) var(--spacing-md);
align-items: start;
padding: var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 2px);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.preferred-model-row .field-hint {
line-height: var(--line-height-base);
}
.preferred-model-row .field-hint,
.preferred-model-row .download-progress,
.preferred-model-row .setup-download-btn {
grid-column: 1 / -1;
}
.preferred-model-meta {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.preferred-model-meta .field-hint {
line-height: var(--line-height-base);
}
.preferred-model-status {
font-size: 11px;
color: var(--text-muted);
}
.preferred-model-status.ok {
color: var(--success);
}
.setup-download-btn,
.setup-test-btn {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 10px;
font-size: var(--font-size-sm);
}
.download-progress {
font-size: 11px;
color: var(--text-muted);
}
/* src/renderer/styles/global/approval.css */
.approval-chat-scrim {
position: absolute;
inset: 0;
z-index: 110;
background: color-mix(in srgb, var(--bg-base) 65%, transparent);
}
#approval-dialog {
position: absolute;
inset: 50% auto auto 50%;
z-index: 111;
width: min(calc(100% - 2 * var(--spacing-xl)), 560px);
min-width: 0;
max-height: calc(100% - 2 * var(--spacing-xl));
margin: 0;
transform: translate(-50%, -50%);
box-shadow: var(--shadow-lg);
}
#approval-dialog:modal {
position: fixed;
max-height: calc(100vh - 2 * var(--spacing-xl));
}
.approval-heading {
margin-bottom: var(--spacing-md);
}
.approval-items {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-height: 55vh;
overflow-y: auto;
margin-bottom: var(--spacing-md);
}
.approval-item + .approval-item {
border-top: 1px solid var(--border);
padding-top: var(--spacing-md);
}
.approval-item-title {
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.approval-advice {
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: pre-wrap;
}
.approval-footer {
margin-top: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: pre-wrap;
}
.approval-body {
background: var(--bg-base);
border: 1px solid var(--border-subtle, var(--border));
padding: var(--spacing-md);
border-radius: var(--radius);
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
font-size: var(--font-size-sm);
font-family: var(--font-family);
color: var(--text-primary);
line-height: var(--line-height-base);
}
.approval-body-code {
font-family: var(--font-mono);
}
.approval-buttons {
margin-top: var(--spacing-sm);
}
.approval-approve:disabled,
.approval-approve-once:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.approval-approve-once {
margin-right: auto;
}
.approval-details-toggle {
display: inline-block;
margin-bottom: var(--spacing-sm);
padding: 0;
background: none;
border: none;
color: var(--text-muted);
font-size: var(--font-size-sm);
text-decoration: underline;
cursor: pointer;
}
.approval-details-toggle:hover {
color: var(--text-primary);
}
.approval-remember {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.approval-turn-tree {
margin-bottom: var(--spacing-md);
}
.approval-comparison-models {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.approval-comparison-intro {
margin: 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.approval-comparison-row {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
}
.approval-comparison-label {
color: var(--text-muted);
}
/* src/renderer/styles/global/ask-user.css */
#ask-user-dialog {
max-width: 560px;
}
.ask-user-title {
margin-bottom: var(--spacing-md);
}
.ask-user-field {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.ask-user-question {
font-size: var(--font-size-sm);
color: var(--text-primary);
white-space: pre-wrap;
}
.ask-user-options {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.ask-user-option {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 12px;
font-size: var(--font-size-sm);
cursor: pointer;
}
.ask-user-option:hover {
border-color: var(--accent);
}
.ask-user-input {
width: 100%;
background: var(--bg-base);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
resize: vertical;
}
.ask-user-buttons {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
}
.ask-user-cancel {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 6px 16px;
}
.ask-user-submit {
background: var(--accent);
color: var(--text-on-accent);
border-radius: var(--radius);
padding: 6px 16px;
}
/* src/renderer/styles/global/ssh-prompt.css */
#ssh-prompt-dialog {
max-width: 560px;
}
.ssh-prompt-title {
margin-bottom: var(--spacing-md);
}
.ssh-prompt-body {
white-space: pre-wrap;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0 0 var(--spacing-md);
max-height: 12rem;
overflow: auto;
}
.ssh-prompt-secret-field {
margin-bottom: var(--spacing-md);
}
.ssh-prompt-input {
width: 100%;
background: var(--bg-base);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
font-family: system-ui, sans-serif;
font-size: var(--font-size-lg);
letter-spacing: 0.15em;
}
.ssh-prompt-remember {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
cursor: pointer;
}
.ssh-prompt-remember-input {
margin: 0;
cursor: pointer;
}
.ssh-prompt-buttons {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
}
.ssh-prompt-cancel {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 6px 14px;
cursor: pointer;
}
.ssh-prompt-submit {
background: var(--accent);
color: var(--text-on-accent);
border: none;
border-radius: var(--radius);
padding: 6px 14px;
cursor: pointer;
}
/* src/renderer/styles/global/update-prompt.css */
#update-prompt-dialog {
max-width: 480px;
}
.update-prompt-message {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-md);
}
.update-prompt-detail {
margin: 0 0 var(--spacing-lg);
color: var(--text-secondary);
line-height: var(--line-height-base);
}
.update-prompt-buttons {
margin-top: 0;
}
/* src/renderer/styles/global/confirm-dialog.css */
#confirm-dialog {
max-width: 480px;
}
.confirm-dialog-message {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-md);
}
.confirm-dialog-detail {
margin: 0 0 var(--spacing-lg);
color: var(--text-secondary);
line-height: var(--line-height-base);
white-space: pre-wrap;
}
.confirm-dialog-buttons {
margin-top: 0;
}
/* src/renderer/styles/global/new-project-dialog.css */
#new-project-dialog {
max-width: 480px;
}
.new-project-dialog h3 {
margin: 0 0 var(--spacing-xs);
font-size: var(--font-size-lg);
font-weight: 600;
}
.new-project-dialog .field-hint {
margin: 0 0 var(--spacing-md);
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.new-project-field {
display: block;
gap: var(--spacing-xs);
margin: 0 0 var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.new-project-field input {
width: 100%;
margin-top: var(--spacing-xs);
font-size: var(--font-size-md);
}
.new-project-parent-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-xs);
}
.new-project-parent-row input {
flex: 1;
margin-top: 0;
font-family: var(--font-mono, monospace);
font-size: var(--font-size-sm);
}
.new-project-browse {
flex: none;
padding: var(--spacing-xs) var(--spacing-md);
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--font-size-sm);
}
.new-project-browse:hover {
border-color: var(--accent);
}
.new-project-path-preview {
font-family: var(--font-mono, monospace);
color: var(--text-muted);
word-break: break-all;
}
.new-project-error {
color: var(--danger, #e5484d);
}
.new-project-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
/* src/renderer/styles/global/comparison-model-dialog.css */
#comparison-model-dialog {
max-width: 480px;
}
.comparison-model-dialog h3 {
margin: 0 0 var(--spacing-md);
font-size: var(--font-size-lg);
font-weight: 600;
}
.comparison-model-dialog .approval-comparison-intro {
margin-bottom: var(--spacing-xs);
}
.comparison-model-dialog-cost {
margin: var(--spacing-md) 0 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.comparison-model-dialog-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
/* src/renderer/styles/global/mcp.css */
.mcp-server-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.mcp-server-row {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
}
.mcp-server-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.mcp-server-toggle {
margin: 0;
}
.mcp-server-header .mcp-server-summary {
flex: 1;
min-width: 0;
}
.mcp-server-summary {
font-weight: 600;
}
.mcp-server-detail {
font-size: 11px;
color: var(--text-muted);
word-break: break-word;
}
.mcp-server-row.mcp-state-error .mcp-server-summary {
color: var(--error);
}
.mcp-server-row.mcp-state-connected .mcp-server-summary {
color: var(--success);
}
.mcp-server-row.mcp-state-untrusted .mcp-server-summary {
color: var(--warning, #d29922);
}
.mcp-origin-chip {
flex: none;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.mcp-origin-chip.mcp-origin-project {
border-color: var(--warning, #d29922);
color: var(--warning, #d29922);
}
.mcp-declared-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.mcp-declared-row {
border-style: dashed;
}
.mcp-trust-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
margin-bottom: 8px;
border: 1px solid var(--warning, #d29922);
border-radius: 6px;
background: rgba(210, 153, 34, 0.08);
font-size: 12px;
}
.mcp-trust-banner button {
flex: none;
}
.trust-unsandboxed-hooks-warning {
align-items: flex-start;
justify-content: flex-start;
}
.trust-unsandboxed-hooks-warning > .ui-icon {
margin-top: 1px;
}
.mcp-curated-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.mcp-curated-row {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-sm);
}
.mcp-curated-row .mcp-server-toggle {
margin-top: 2px;
}
.mcp-curated-body {
flex: 1;
min-width: 0;
}
.mcp-curated-title {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
font-weight: 600;
}
.mcp-curated-link {
font-size: 11px;
font-weight: 400;
}
.mcp-curated-desc {
margin-top: 2px;
color: var(--text-muted);
word-break: break-word;
}
.mcp-curated-status {
margin-top: 4px;
font-size: 11px;
word-break: break-word;
}
.mcp-curated-row.mcp-state-connected .mcp-curated-status {
color: var(--success);
}
.mcp-curated-row.mcp-state-error .mcp-curated-status {
color: var(--error);
}
/* src/renderer/styles/global/composer-extras.css */
.mention-picker {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
max-height: 200px;
overflow-y: auto;
z-index: 100;
box-shadow: var(--shadow-md);
}
.mention-item {
padding: 6px 10px;
cursor: pointer;
font-size: var(--font-size-sm);
}
.mention-item.selected,
.mention-item:hover {
background: var(--bg-hover);
}
.mention-item-thread,
.mention-item-shell {
display: flex;
align-items: center;
gap: 6px;
}
.mention-thread-icon,
.thread-chip-icon,
.mention-shell-icon,
.shell-chip-icon,
.video-chip-icon,
.archive-chip-icon {
flex: none;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.mention-thread-icon,
.mention-shell-icon {
color: var(--text-muted);
}
.mention-thread-title,
.mention-shell-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
}
.mention-thread-date,
.mention-shell-kind {
flex: none;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.skill-item-name {
font-weight: 600;
}
.skill-item-kind {
margin-left: 6px;
padding: 0 4px;
border: 1px solid var(--border-subtle, var(--text-muted));
border-radius: 3px;
color: var(--text-muted);
font-size: var(--font-size-sm);
font-weight: 400;
vertical-align: baseline;
}
.skill-item-desc {
color: var(--text-muted);
font-size: var(--font-size-sm);
margin-top: 2px;
}
.attachment-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 4px var(--spacing-md);
min-height: 0;
}
.attachment-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 240px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2px 8px;
font-size: var(--font-size-sm);
}
.attachment-chip-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-chip img {
border-radius: 2px;
object-fit: cover;
}
.image-chip {
position: relative;
}
.image-chip[data-detail=low]::after,
.image-chip[data-detail=high]::after {
content: attr(data-detail);
position: absolute;
bottom: 1px;
left: 9px;
padding: 0 3px;
border-radius: 3px;
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 9px;
line-height: 1.3;
text-transform: uppercase;
pointer-events: none;
}
.attachment-chip-meta {
flex: none;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.attachment-chip button {
display: inline-flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
line-height: 1;
padding: 0 2px;
}
.inline-paste-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 240px;
margin: 0 2px;
padding: 0 6px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 10px;
font-size: var(--font-size-sm);
vertical-align: baseline;
user-select: none;
}
.inline-paste-chip-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline-paste-chip-remove {
display: inline-flex;
align-items: center;
background: none;
border: none;
cursor: pointer;
line-height: 1;
padding: 0 2px;
color: inherit;
}
.follow-up-suggestions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 var(--spacing-md) 6px;
}
.follow-up-suggestions[hidden] {
display: none;
}
.follow-up-bubble {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 12px;
font-size: var(--font-size-sm);
color: var(--text-muted);
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.follow-up-bubble:hover {
background: var(--bg-hover);
border-color: var(--border-strong, var(--border));
color: var(--text);
box-shadow: var(--shadow-sm);
}
.follow-up-bubble-changes .follow-up-label {
color: var(--text-muted);
}
.follow-up-stat-add {
color: #3dd68c;
font-weight: 500;
}
.follow-up-stat-del {
color: #f07178;
font-weight: 500;
}
.diff-conflict-banner {
padding: var(--spacing-sm);
margin: var(--spacing-sm);
border: 1px solid var(--warning, #c2410c);
border-radius: var(--radius);
background: color-mix(in srgb, var(--warning, #c2410c) 12%, transparent);
color: var(--text);
font-size: var(--font-size-sm);
}
.diff-file-list {
width: 200px;
border-right: 1px solid var(--border);
overflow-y: auto;
padding: var(--spacing-sm);
flex-shrink: 0;
}
.diff-file-btn {
width: 100%;
text-align: left;
padding: 4px var(--spacing-sm);
border-radius: var(--radius);
font-size: var(--font-size-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.diff-file-btn.selected {
background: var(--bg-selected);
color: var(--text-primary);
}
.diff-editor-wrap {
flex: 1;
position: relative;
}
/* src/renderer/styles/global/attachment-preview.css */
.attachment-preview-dialog {
width: max-content;
max-width: 96vw;
max-height: 92vh;
padding: var(--spacing-md);
border: 1px solid var(--border);
background: var(--bg-elevated);
box-sizing: border-box;
}
.attachment-preview-dialog[open] {
display: flex;
flex-direction: column;
}
.attachment-preview-title {
max-width: min(80ch, 80vw);
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
font-size: var(--font-size-sm);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-preview-body {
min-width: min(280px, 80vw);
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
padding: var(--spacing-md);
}
.attachment-preview-dialog[data-preview-kind=text] .attachment-preview-body {
width: min(80vw, 920px);
min-height: min(320px, 50vh);
max-height: min(72vh, 680px);
align-items: stretch;
justify-content: stretch;
}
.attachment-preview-text {
width: 100%;
margin: 0;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.attachment-preview-status {
margin: 0;
max-width: min(60ch, 80vw);
color: var(--text-secondary);
font-size: var(--font-size-sm);
text-align: center;
overflow-wrap: anywhere;
}
.attachment-preview-close {
margin-top: var(--spacing-sm);
width: 100%;
min-width: min(280px, 80vw);
padding: var(--spacing-sm);
border-radius: var(--radius);
background: var(--bg-base);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.attachment-preview-close:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.text-expandable {
cursor: pointer;
}
.text-expandable:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.text-expandable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.attachment-chip-label.text-expandable,
.inline-paste-chip-label.text-expandable {
border-radius: var(--radius);
}
/* src/renderer/styles/global/image-expand.css */
.image-expand-image {
display: block;
max-width: min(92vw - 48px, 1160px);
max-height: min(80vh, 720px);
width: auto;
height: auto;
object-fit: contain;
}
.image-expandable {
cursor: zoom-in;
}
.image-expandable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* src/renderer/styles/global/video-expand.css */
.video-expand-video {
display: block;
max-width: min(92vw - 48px, 1160px);
max-height: min(80vh, 720px);
width: auto;
height: auto;
object-fit: contain;
background: #000;
}
.video-expandable {
cursor: pointer;
}
.video-expandable:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.video-expandable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
/* src/renderer/styles/global/file-search.css */
.file-search-overlay {
margin: 10vh auto 0;
padding: 0;
width: min(640px, 90vw);
max-height: 60vh;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
color: var(--text-primary);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.file-search-overlay::backdrop {
background: rgb(0 0 0 / 40%);
}
.file-search-shell {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.file-search-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: none;
border-bottom: 1px solid var(--border);
background: transparent;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
}
.file-search-input::placeholder {
color: var(--text-muted);
}
.file-search-results {
overflow-y: auto;
padding: var(--spacing-xs);
}
.file-search-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px var(--spacing-sm);
border-radius: var(--radius);
cursor: pointer;
white-space: nowrap;
}
.file-search-item.selected,
.file-search-item:hover {
background: var(--bg-hover);
}
.file-search-icon {
display: inline-flex;
flex-shrink: 0;
width: 16px;
height: 16px;
}
.file-search-icon img {
width: 16px;
height: 16px;
}
.file-search-name {
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.file-search-dir {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.file-search-empty {
padding: var(--spacing-md) var(--spacing-lg);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.file-search-section {
padding: var(--spacing-sm) var(--spacing-sm) 2px;
color: var(--text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.file-search-roadmap-icon {
color: var(--text-muted);
}
.file-search-roadmap-svg {
fill: none;
stroke: currentcolor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.file-search-roadmap-item .file-search-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.file-search-roadmap-item .roadmap-status-badge {
align-self: center;
flex-shrink: 0;
}
/* src/renderer/styles/global/command-palette.css */
.command-palette-overlay {
margin: 10vh auto 0;
padding: 0;
width: min(640px, 90vw);
max-height: 60vh;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
color: var(--text-primary);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.command-palette-overlay::backdrop {
background: rgb(0 0 0 / 40%);
}
.command-palette-shell {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.command-palette-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: none;
border-bottom: 1px solid var(--border);
background: transparent;
color: var(--text-primary);
font-size: var(--font-size-base);
outline: none;
}
.command-palette-input::placeholder {
color: var(--text-muted);
}
.command-palette-results {
overflow-y: auto;
padding: var(--spacing-xs);
}
.command-palette-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 6px var(--spacing-sm);
border-radius: var(--radius);
cursor: pointer;
white-space: nowrap;
}
.command-palette-item.selected,
.command-palette-item:hover {
background: var(--bg-hover);
}
.command-palette-icon {
display: inline-flex;
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--text-muted);
}
.command-palette-name {
color: var(--text-primary);
font-size: var(--font-size-sm);
overflow: hidden;
text-overflow: ellipsis;
}
.command-palette-item-thread .command-palette-name {
flex: 1;
min-width: 0;
}
.command-palette-context {
flex-shrink: 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
overflow: hidden;
text-overflow: ellipsis;
max-width: 45%;
}
.command-palette-empty {
padding: var(--spacing-md) var(--spacing-lg);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.command-palette-section {
padding: var(--spacing-sm) var(--spacing-sm) 2px;
color: var(--text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* src/renderer/styles/global/keyboard-shortcuts.css */
.keyboard-shortcuts-overlay {
margin: 10vh auto 0;
padding: 0;
width: min(720px, 90vw);
max-height: 70vh;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
color: var(--text-primary);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.keyboard-shortcuts-overlay::backdrop {
background: rgb(0 0 0 / 40%);
}
.keyboard-shortcuts-shell {
display: flex;
flex-direction: column;
max-height: 70vh;
overflow-y: auto;
}
.keyboard-shortcuts-title {
margin: 0;
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--border);
font-size: var(--font-size-base);
font-weight: 600;
}
.keyboard-shortcuts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
padding: var(--spacing-lg);
}
.keyboard-shortcuts-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.keyboard-shortcuts-group-title {
margin: 0 0 var(--spacing-xs);
color: var(--text-muted);
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.keyboard-shortcuts-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: 5px var(--spacing-xs);
border-radius: var(--radius);
}
.keyboard-shortcuts-row:hover {
background: var(--bg-hover);
}
.keyboard-shortcuts-label {
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.keyboard-shortcuts-keys {
display: inline-flex;
flex-shrink: 0;
gap: 4px;
}
.keyboard-shortcuts-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-subtle);
color: var(--text-secondary);
font-family: inherit;
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
/* src/renderer/styles/global/conversation-search.css */
.chat-search {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-lg);
z-index: 20;
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: 4px 6px 4px var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-md);
}
.chat-search[hidden] {
display: none;
}
.chat-search-icon {
display: inline-flex;
color: var(--text-muted);
}
.chat-search-input {
width: 200px;
padding: 2px 4px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: var(--font-size-sm);
outline: none;
}
.chat-search-input::placeholder {
color: var(--text-muted);
}
.chat-search-input.chat-search-nomatch {
color: var(--danger, #f14c4c);
}
.chat-search-count {
min-width: 3.5ch;
text-align: right;
color: var(--text-muted);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.chat-search-actions {
display: flex;
align-items: center;
gap: 2px;
}
.chat-search-nav,
.chat-search-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary, var(--text-muted));
cursor: pointer;
}
.chat-search-nav:hover,
.chat-search-close:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
::highlight(chat-search) {
background-color: var(--highlight-bg);
color: inherit;
}
::highlight(chat-search-current) {
background-color: var(--highlight-current-bg);
color: var(--highlight-current-text);
}
/* src/renderer/styles/global/todo.css */
.conversation-todos-host {
flex-shrink: 0;
width: min(calc(100% - 2 * var(--spacing-xl)), var(--chat-content-max));
margin-inline: auto;
padding: var(--spacing-sm) 0 0;
}
.plugin-panel {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
padding: var(--spacing-sm) var(--spacing-lg);
margin-bottom: var(--spacing-sm);
font-size: 13px;
}
.plugin-panel-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.plugin-panel-title {
display: inline-flex;
align-items: center;
}
.plugin-panel-summary {
margin-left: auto;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: var(--text-muted);
font-size: 11px;
}
.plugin-panel > .plugin-panel-list,
.plugin-panel > .plugin-panel-tree,
.plugin-panel-tree-children {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.plugin-panel-tree-children {
padding-left: var(--spacing-md);
}
.plugin-panel-row,
.plugin-panel-tree-row {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: 2px 0;
color: var(--text-primary);
}
.plugin-panel-row-completed .plugin-panel-row-label,
.plugin-panel-tree-node[data-status=completed] .plugin-panel-row-label {
color: var(--text-muted);
text-decoration: line-through;
}
.plugin-panel-row-cancelled .plugin-panel-row-label,
.plugin-panel-tree-node[data-status=cancelled] .plugin-panel-row-label {
color: var(--text-muted);
opacity: 0.65;
}
.plugin-panel-row-in_progress .plugin-panel-row-label,
.plugin-panel-tree-node[data-status=in_progress] .plugin-panel-row-label {
font-weight: 500;
}
.plugin-panel-status-icon {
flex-shrink: 0;
width: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.plugin-panel-row-in_progress .plugin-panel-status-icon,
.plugin-panel-tree-node[data-status=in_progress] .plugin-panel-status-icon {
color: var(--accent);
}
.plugin-panel-row-completed .plugin-panel-status-icon,
.plugin-panel-tree-node[data-status=completed] .plugin-panel-status-icon {
color: var(--success, #3fb950);
}
.plugin-panel-row-label {
flex: 1;
min-width: 0;
word-break: break-word;
}
.plugin-panel-row-detail {
color: var(--text-muted);
font-size: 12px;
}
.plugin-panel-badge {
flex-shrink: 0;
font-size: 10px;
padding: 1px 5px;
border-radius: 4px;
background: var(--bg-hover);
color: var(--text-muted);
text-transform: uppercase;
}
.plugin-panel-badge[data-badge-kind=assigned-model] {
color: var(--accent);
}
.plan-pane-host {
flex: 1;
overflow-y: auto;
padding: var(--spacing-md);
min-height: 0;
}
.review-panel {
margin-top: var(--spacing-sm);
border: 0;
border-left: 2px solid var(--text-secondary);
border-radius: 0;
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--text-secondary) 7%, transparent),
transparent 72%);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: 13px;
}
.messages-list > [data-review-card] {
width: min(100%, var(--chat-content-max));
margin-inline: auto;
}
.review-panel-error {
border-left-color: var(--danger, #d9534f);
}
.review-panel.review-panel-error {
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--danger, #d9534f) 7%, transparent),
transparent 72%);
}
.card-retry-button {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 2px var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: 11px;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.card-retry-button:hover:not(:disabled) {
color: var(--text-primary);
background: var(--bg-hover, rgba(127, 127, 127, 0.12));
}
.card-retry-button:disabled {
opacity: 0.5;
cursor: default;
}
.card-dismiss-button {
margin-left: auto;
display: inline-flex;
align-items: center;
padding: 2px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.card-retry-button + .card-dismiss-button {
margin-left: 0;
}
.card-dismiss-button:hover:not(:disabled) {
color: var(--text-primary);
background: var(--bg-hover, rgba(127, 127, 127, 0.12));
}
.card-dismiss-button:disabled {
opacity: 0.5;
cursor: default;
}
.review-panel-icon {
display: inline-flex;
align-items: center;
}
.review-panel-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.review-panel > summary.review-panel-header {
cursor: pointer;
list-style: none;
}
.review-panel > summary.review-panel-header::-webkit-details-marker {
display: none;
}
.review-panel-body {
margin-top: var(--spacing-xs);
}
.review-panel-body > :first-child {
margin-top: 0;
}
.review-panel-body > :last-child {
margin-bottom: 0;
}
.comparison-panel {
margin-top: var(--spacing-sm);
border: 0;
border-left: 2px solid var(--accent, var(--text-secondary));
border-radius: 0;
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent, var(--text-secondary)) 7%, transparent),
transparent 72%);
padding: var(--spacing-sm) var(--spacing-lg);
font-size: 13px;
}
.messages-list > [data-comparison-card] {
width: min(100%, var(--chat-content-max));
margin-inline: auto;
}
.comparison-panel-error {
border-left-color: var(--danger, #d9534f);
}
.comparison-panel.comparison-panel-error {
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--danger, #d9534f) 7%, transparent),
transparent 72%);
}
.comparison-panel-icon {
display: inline-flex;
align-items: center;
}
.comparison-panel-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.comparison-panel-cost {
margin-left: auto;
text-transform: none;
letter-spacing: normal;
font-weight: 500;
color: var(--text-secondary);
}
.comparison-panel-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-md);
margin-top: var(--spacing-sm);
}
@media (max-width: 640px) {
.comparison-panel-columns {
grid-template-columns: 1fr;
}
}
.comparison-panel-col-title {
font-weight: 600;
font-size: 12px;
color: var(--text-secondary);
margin-bottom: var(--spacing-xs);
word-break: break-word;
}
.comparison-panel-synthesis {
margin-top: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px solid var(--border);
}
.comparison-panel-md > :first-child {
margin-top: 0;
}
.comparison-panel-md > :last-child {
margin-bottom: 0;
}
/* src/renderer/styles/global/toasts.css */
.toast-host {
position: fixed;
bottom: var(--spacing-md, 12px);
right: var(--spacing-md, 12px);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 300;
pointer-events: none;
max-width: 360px;
}
.toast {
pointer-events: auto;
padding: 10px 12px;
border-radius: var(--radius, 4px);
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border);
font-size: 13px;
line-height: var(--line-height-base);
box-shadow: var(--shadow-md);
cursor: pointer;
word-break: break-word;
}
.toast-error {
border-color: var(--error);
}
/* src/renderer/styles/global/tooltip.css */
.app-tooltip {
position: fixed;
z-index: 400;
left: 0;
top: 0;
max-width: 260px;
padding: 4px 8px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-elevated);
color: var(--text-primary);
font-size: var(--font-size-xs);
line-height: 1.4;
white-space: normal;
overflow-wrap: anywhere;
box-shadow: var(--shadow-md);
pointer-events: none;
animation: app-tooltip-in 90ms ease-out;
}
.app-tooltip[hidden] {
display: none;
}
@keyframes app-tooltip-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.app-tooltip {
animation: none;
}
}
/* src/renderer/styles/global/ssh-workspace.css */
.ssh-status-banner {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--bg-elevated);
color: var(--text-primary);
border-bottom: 1px solid var(--border);
font-size: 13px;
line-height: var(--line-height-base);
}
.ssh-status-banner.ssh-status-warn {
border-bottom-color: var(--warning, var(--border));
}
.ssh-status-icon {
flex: none;
}
.ssh-status-text {
flex: 1 1 auto;
min-width: 0;
}
.ssh-status-actions {
flex: none;
display: flex;
align-items: center;
gap: 8px;
}
.ssh-status-action {
padding: 4px 10px;
border-radius: var(--radius, 4px);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-primary);
font-size: 12px;
cursor: pointer;
}
.ssh-status-action:hover {
background: var(--bg-hover, var(--bg-elevated));
}
.workspace-ssh-target {
margin-left: 8px;
font-size: 12px;
color: var(--text-secondary, var(--text-primary));
opacity: 0.9;
}
.welcome-open-remote-btn {
margin-top: 8px;
}
.remote-folder-dialog {
width: min(520px, 92vw);
border: 1px solid var(--border);
border-radius: var(--radius-lg, var(--radius, 8px));
padding: var(--spacing-lg);
background: var(--bg-elevated);
color: var(--text-primary);
}
.remote-folder-dialog::backdrop {
background: rgb(0 0 0 / 45%);
}
.remote-folder-host-row {
display: flex;
align-items: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.remote-folder-host-label-wrap {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.remote-folder-host-row .remote-folder-host {
width: 100%;
}
.remote-folder-add-host-btn {
flex: none;
}
.remote-folder-add-host-form {
margin-top: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.remote-folder-add-host-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--spacing-sm);
}
.remote-folder-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin: var(--spacing-md) 0 var(--spacing-sm);
}
.remote-folder-up {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated, var(--bg));
color: var(--text-primary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.remote-folder-up:disabled {
opacity: 0.45;
cursor: default;
}
.remote-folder-breadcrumbs {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px var(--spacing-xs);
min-width: 0;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
}
.remote-folder-crumb {
padding: 0;
border: none;
background: transparent;
color: var(--accent);
cursor: pointer;
font: inherit;
}
.remote-folder-crumb:hover {
text-decoration: underline;
}
.remote-folder-crumb-current {
color: var(--text-primary);
cursor: default;
}
.remote-folder-crumb-sep {
color: var(--text-muted);
user-select: none;
}
.remote-folder-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
max-height: 240px;
overflow: auto;
margin-bottom: var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs);
}
.remote-folder-entry {
text-align: left;
padding: var(--spacing-sm);
border: none;
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
cursor: pointer;
}
.remote-folder-entry:hover {
background: var(--bg-hover, var(--bg));
}
.remote-folder-actions {
display: flex;
justify-content: flex-end;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.ssh-host-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-sm) 0;
}
.ssh-host-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-sm) 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.ssh-host-summary {
flex: 1 1 auto;
min-width: 0;
}
.ssh-host-auth {
margin-top: var(--spacing-xs);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.ssh-host-auth-saved {
color: var(--success);
}
.ssh-host-row-actions {
display: flex;
align-items: center;
flex: none;
gap: var(--spacing-md);
}
.ssh-host-row-actions button {
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-base);
color: var(--text-primary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.ssh-host-row-actions button:hover {
background: var(--bg-hover);
}
.ssh-host-row-actions .ssh-host-delete {
color: var(--error);
}
.ssh-host-form {
display: grid;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.ssh-host-form label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.ssh-import-config {
margin: var(--spacing-sm) 0;
}
/* src/renderer/styles/global/memories.css */
.memories-host {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.memories-new-btn {
font-size: 16px;
}
.memories-row {
align-items: flex-start;
}
.memories-row-main {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1;
}
.memories-row-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.memories-row-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.memories-row-taint {
flex: none;
align-self: flex-start;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--warning, #d29922);
border: 1px dashed var(--warning, #d29922);
border-radius: var(--radius);
padding: 0 5px;
}
.memories-tag {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.memories-viewer-host {
padding: var(--spacing-md);
overflow-y: auto;
}
.memories-empty {
padding: var(--spacing-md);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.memories-form {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
height: 100%;
min-height: 0;
}
.memories-form > .memories-label:not(:first-child) {
margin-top: var(--spacing-sm);
}
.memories-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.memories-field {
width: 100%;
box-sizing: border-box;
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-input, var(--bg-secondary));
color: var(--text-primary);
font-size: var(--font-size-sm);
font-family: inherit;
}
.memories-field:focus {
outline: none;
border-color: var(--accent);
}
.memories-body-input {
flex: 1;
min-height: 160px;
resize: vertical;
line-height: var(--line-height-base);
}
.memories-meta {
font-size: 11px;
color: var(--text-muted);
}
.memories-error {
font-size: var(--font-size-sm);
color: var(--danger, #f14c4c);
}
.memories-actions {
display: flex;
gap: var(--spacing-xs);
align-items: center;
}
.memories-btn {
padding: 4px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.memories-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.memories-btn:disabled {
opacity: 0.5;
cursor: default;
}
.memories-btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--text-on-accent);
}
.memories-btn-primary:hover:not(:disabled) {
background: var(--accent);
filter: brightness(1.08);
color: var(--text-on-accent);
}
.memories-btn-danger {
margin-left: auto;
color: var(--danger, #f14c4c);
}
.memories-btn-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger, #f14c4c) 16%, transparent);
color: var(--danger, #f14c4c);
}
/* src/renderer/styles/global/ports.css */
.ports-section {
flex-shrink: 0;
max-height: 40%;
display: flex;
flex-direction: column;
overflow: hidden;
border-top: 1px solid var(--border);
}
.ports-list {
overflow-y: auto;
min-height: 0;
padding: var(--spacing-xs) 0;
}
.ports-row {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
width: 100%;
min-width: 0;
text-align: left;
padding: 5px var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--text-secondary);
background: none;
border: none;
cursor: pointer;
}
.ports-row:hover {
background: var(--bg-hover);
}
.ports-row.is-active {
background: var(--bg-selected);
color: var(--text-primary);
}
.ports-row-port {
flex-shrink: 0;
font-family: var(--font-mono);
}
.ports-row-command {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-muted);
}
.ports-row-owner {
flex-shrink: 0;
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.ports-detail {
padding: 0 var(--spacing-sm) var(--spacing-sm);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--bg-selected);
}
.ports-detail-line {
font-size: 11px;
color: var(--text-muted);
overflow-wrap: anywhere;
}
.ports-actions {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.ports-btn {
padding: 2px 8px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-secondary);
color: var(--text-secondary);
font-size: 11px;
cursor: pointer;
}
.ports-btn:hover:not(:disabled) {
background: var(--bg-hover);
color: var(--text-primary);
}
.ports-btn:disabled {
opacity: 0.5;
cursor: default;
}
.ports-btn-danger {
color: var(--danger, #f14c4c);
}
.ports-btn-danger:hover:not(:disabled) {
background: color-mix(in srgb, var(--danger, #f14c4c) 16%, transparent);
color: var(--danger, #f14c4c);
}
.ports-detail-note,
.ports-empty {
font-size: 11px;
color: var(--text-muted);
}
.ports-empty {
padding: var(--spacing-xs) var(--spacing-sm);
}
/* src/renderer/styles/global/vnc.css */
.vnc-controls-host {
min-height: 0;
overflow: clip;
}
.vnc-header-actions {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-left: auto;
}
.vnc-tabs-new-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
color: var(--text-muted);
line-height: 1;
}
.vnc-tabs-new-btn:hover {
color: var(--text-primary);
}
.vnc-tabs-list {
display: flex;
flex-shrink: 0;
flex-direction: column;
min-width: 0;
max-height: 160px;
overflow-y: auto;
border-bottom: 1px solid var(--border);
scrollbar-width: thin;
}
.vnc-tab {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: var(--spacing-xs);
justify-content: space-between;
width: 100%;
min-width: 0;
padding: 6px var(--spacing-xs) 6px var(--spacing-sm);
color: var(--text-muted);
font-size: var(--font-size-xs);
text-align: left;
border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.vnc-tab:hover {
color: var(--text-secondary);
background: var(--bg-hover);
}
.vnc-tab.is-active {
color: var(--text-primary);
background: var(--bg-selected);
box-shadow: inset 2px 0 0 var(--accent);
}
.vnc-tab.is-controlling::before {
width: 6px;
height: 6px;
flex-shrink: 0;
background: var(--warning);
border-radius: 50%;
content: "";
box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent);
}
.vnc-tab-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vnc-tab-close {
display: inline-flex;
flex-shrink: 0;
align-items: center;
padding: 1px;
color: var(--text-muted);
opacity: 0;
}
.vnc-tab:hover .vnc-tab-close,
.vnc-tab.is-active .vnc-tab-close {
opacity: 1;
}
.vnc-controls-panels,
.vnc-controls-panel {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
}
.vnc-controls-panel[hidden],
.vnc-viewer-panel[hidden] {
display: none;
}
.vnc-controls-body {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
gap: var(--spacing-md);
overflow-y: auto;
padding: var(--spacing-md);
}
.vnc-connect-form {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.vnc-setup-fields {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.vnc-setup-fields[hidden] {
display: none;
}
.vnc-field-label {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.vnc-port-input,
.vnc-address-input,
.vnc-auth-input,
.vnc-machine-select {
box-sizing: border-box;
width: 100%;
min-width: 0;
padding: var(--spacing-sm);
color: var(--text-primary);
font: inherit;
font-family: var(--font-mono);
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.vnc-port-input:focus,
.vnc-address-input:focus,
.vnc-auth-input:focus,
.vnc-machine-select:focus {
border-color: var(--accent);
outline: none;
}
.vnc-connect-btn,
.vnc-control-btn,
.vnc-disconnect-btn {
justify-content: center;
width: 100%;
}
.vnc-discovery-retry {
align-self: flex-start;
margin-top: calc(var(--spacing-sm) * -1);
padding: 2px var(--spacing-xs);
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
.vnc-control-btn.is-active {
color: var(--warning);
background: color-mix(in srgb, var(--warning) 10%, transparent);
border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}
.vnc-advanced summary {
cursor: pointer;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
.vnc-advanced[open] summary {
margin-bottom: var(--spacing-sm);
}
.vnc-field-hint {
color: var(--text-muted);
font-size: var(--font-size-xs);
line-height: var(--line-height-base);
}
.vnc-auth-panel {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-md);
background: color-mix(in srgb, var(--accent) 6%, transparent);
border-left: 2px solid var(--accent);
}
.vnc-auth-panel[hidden] {
display: none;
}
.vnc-auth-title {
color: var(--text-primary);
font-weight: 600;
}
.vnc-auth-description {
color: var(--text-secondary);
font-size: var(--font-size-xs);
line-height: var(--line-height-base);
}
.vnc-auth-input {
-webkit-text-security: none;
}
.vnc-password-input {
font-family: system-ui, sans-serif;
-webkit-text-security: disc;
}
.vnc-remember-password {
display: flex;
align-items: center;
gap: var(--spacing-xs);
color: var(--text-secondary);
font-size: var(--font-size-xs);
line-height: var(--line-height-base);
}
.vnc-remember-password[hidden] {
display: none;
}
.vnc-forget-login {
align-self: flex-start;
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
.vnc-authenticate-btn {
justify-content: center;
width: 100%;
}
.vnc-discovery-status,
.vnc-nearby-status {
color: var(--text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
overflow-wrap: anywhere;
}
.vnc-discovery-status[data-kind=working],
.vnc-nearby-status[data-kind=working] {
color: var(--text-secondary);
}
.vnc-discovery-status[data-kind=ok],
.vnc-nearby-status[data-kind=ok] {
color: var(--success);
}
.vnc-discovery-status[data-kind=error],
.vnc-nearby-status[data-kind=error] {
color: var(--error);
}
.vnc-network-warning {
padding: var(--spacing-sm);
color: var(--warning);
font-size: var(--font-size-xs);
line-height: var(--line-height-base);
background: color-mix(in srgb, var(--warning) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
border-radius: var(--radius);
}
.vnc-discovered-ports {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.vnc-discovered-ports[hidden] {
display: none;
}
.vnc-discovered-port {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--spacing-sm);
width: 100%;
padding: var(--spacing-sm);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
text-align: left;
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.vnc-discovered-port:hover:not(:disabled) {
color: var(--text-primary);
background: var(--bg-hover);
}
.vnc-discovered-port.selected {
color: var(--text-primary);
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
}
.vnc-status {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding-left: var(--spacing-sm);
color: var(--text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
border-left: 2px solid var(--border);
overflow-wrap: anywhere;
}
.vnc-status[data-kind=working] {
color: var(--text-secondary);
border-left-color: var(--accent);
}
.vnc-status[data-kind=ok] {
color: var(--success);
border-left-color: var(--success);
}
.vnc-status[data-kind=error] {
color: var(--error);
border-left-color: var(--error);
}
.vnc-status-title {
font-weight: 600;
}
.vnc-status-detail {
color: var(--text-secondary);
font-weight: 400;
}
.vnc-view-only-note {
margin: auto 0 0;
color: var(--text-muted);
font-size: var(--font-size-sm);
line-height: var(--line-height-base);
}
.vnc-viewer-host {
position: relative;
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
background: var(--bg-base);
}
.vnc-viewer-panel {
position: relative;
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
}
.vnc-screen {
display: flex;
flex: 1;
min-width: 0;
min-height: 0;
align-items: center;
justify-content: center;
overflow: hidden;
padding: var(--spacing-sm);
}
.vnc-screen canvas {
max-width: 100%;
max-height: 100%;
box-shadow: 0 0 0 1px var(--border);
}
.vnc-screen.is-controlling canvas {
box-shadow: 0 0 0 1px var(--warning), 0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent);
}
.vnc-empty {
position: absolute;
inset: 0;
}
/* src/renderer/styles/global/roadmap.css */
.roadmap-list-header {
position: relative;
z-index: 30;
overflow: visible;
}
.roadmap-filter {
position: relative;
z-index: 30;
display: flex;
flex: 1;
min-width: 120px;
max-width: 320px;
gap: 4px;
}
.roadmap-search-input {
flex: 1;
min-width: 80px;
}
.roadmap-filter-toggle {
flex: none;
border-radius: var(--radius);
color: var(--text-secondary);
}
.roadmap-filter-toggle[aria-expanded=true] {
color: var(--text-primary);
background: var(--bg-hover);
}
.roadmap-filter-menu {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
min-width: 190px;
max-height: min(420px, 70vh);
overflow-y: auto;
padding: var(--spacing-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-elevated);
box-shadow: var(--shadow-md);
}
.roadmap-filter-heading {
margin: var(--spacing-xs) 0 2px;
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.roadmap-filter-heading:first-child {
margin-top: 0;
}
.roadmap-filter-option {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-xs);
margin: 0;
padding: 2px 0;
color: var(--text-secondary);
font-size: var(--font-size-sm);
cursor: pointer;
}
.roadmap-filter-option input {
width: auto;
height: auto;
margin: 0;
padding: 0;
accent-color: var(--accent);
}
.roadmap-category-group {
display: flex;
flex-direction: column;
}
.roadmap-category-header {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: var(--spacing-xs) var(--spacing-sm);
border: 0;
border-radius: 0;
background: transparent;
color: var(--text-muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-align: left;
text-transform: uppercase;
cursor: pointer;
}
.roadmap-category-header:hover {
background: var(--bg-hover);
color: var(--text-secondary);
}
.roadmap-category-chevron {
width: 10px;
height: 10px;
flex: none;
}
.roadmap-category-count {
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.roadmap-category-items {
display: flex;
flex-direction: column;
}
.roadmap-action-buttons {
display: flex;
gap: var(--spacing-xs);
flex-shrink: 0;
}
.roadmap-row {
align-items: center;
}
.roadmap-row .memories-row-main {
flex-direction: row;
align-items: center;
gap: var(--spacing-xs);
}
.roadmap-row-title {
flex: 1 1 auto;
min-width: 0;
}
.roadmap-row-meta {
display: flex;
flex-wrap: nowrap;
gap: var(--spacing-xs);
align-items: center;
flex-shrink: 0;
margin-left: auto;
}
.roadmap-status-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
text-transform: lowercase;
letter-spacing: 0.02em;
}
.roadmap-status-badge.is-blocked {
background: color-mix(in srgb, var(--warning, #d29922) 18%, transparent);
color: var(--warning, #d29922);
}
.roadmap-status-badge.is-conflicts {
background: color-mix(in srgb, var(--danger, #f14c4c) 16%, transparent);
color: var(--danger, #f14c4c);
}
.roadmap-row.is-done .roadmap-row-title {
color: var(--text-muted);
text-decoration: line-through;
}
.roadmap-row.is-archived .roadmap-row-title {
color: var(--text-muted);
}
.roadmap-done-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 2px;
color: var(--text-muted);
cursor: pointer;
opacity: 0;
}
.roadmap-row:hover .roadmap-done-toggle,
.roadmap-row:focus-within .roadmap-done-toggle,
.roadmap-done-toggle:focus {
opacity: 1;
}
.roadmap-done-toggle:hover {
color: var(--success, #3fb950);
}
.roadmap-done-toggle-icon {
width: 12px;
height: 12px;
}
.roadmap-status-select {
width: auto;
align-self: flex-start;
}
.roadmap-form .memories-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
justify-content: flex-start;
}
.roadmap-form .memories-actions .memories-btn {
width: auto;
flex: 0 0 auto;
min-width: 0;
padding-inline: var(--spacing-sm);
}
.roadmap-form .memories-actions .memories-btn-danger {
margin-left: 0;
}
.roadmap-issue-chip {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--accent);
cursor: pointer;
}
.roadmap-issue-chip:hover {
text-decoration: underline;
}
.roadmap-thread-chip {
display: inline-flex;
align-items: center;
color: var(--text-muted);
cursor: pointer;
}
.roadmap-thread-chip:hover {
color: var(--accent);
}
.roadmap-thread-chip-icon {
width: 12px;
height: 12px;
}
.roadmap-category-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.roadmap-category-badge.is-bug {
color: var(--danger, #f14c4c);
}
.roadmap-category-badge.is-feature {
color: var(--accent);
}
.roadmap-category-badge.is-project {
color: var(--warning, #d29922);
}
.roadmap-complexity-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.roadmap-complexity-badge.is-medium {
color: var(--warning, #d29922);
}
.roadmap-complexity-badge.is-high {
color: var(--danger, #f14c4c);
}
.roadmap-fit-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.roadmap-fit-badge.is-likely {
color: var(--success, #3fb950);
}
.roadmap-fit-badge.is-partial {
color: var(--warning, #d29922);
}
.roadmap-fit-badge.is-unlikely {
color: var(--danger, #f14c4c);
}
.roadmap-fit-result {
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: pre-wrap;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-sm);
}
.roadmap-attachments {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-items: center;
}
.roadmap-attachment-chip {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
font-size: var(--font-size-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2px 4px 2px 6px;
background: var(--bg-hover);
color: var(--text-secondary);
}
.roadmap-attachment-thumb {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: calc(var(--radius) / 2);
flex: none;
}
.roadmap-attachment-name {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.roadmap-attachment-remove {
display: inline-flex;
align-items: center;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
padding: 0 2px;
flex: none;
}
.roadmap-attachment-remove:hover {
color: var(--danger, #f14c4c);
}
.roadmap-attach-btn {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px dashed var(--border);
border-radius: var(--radius);
background: none;
color: var(--text-muted);
font-size: var(--font-size-sm);
padding: 2px 8px;
cursor: pointer;
}
.roadmap-attach-btn:hover {
color: var(--text-primary);
border-color: var(--accent);
}
.roadmap-form.is-drop-target {
outline: 1px dashed var(--accent);
outline-offset: -4px;
}
.roadmap-attachment-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
line-height: 1.4;
color: var(--text-muted);
}
.roadmap-attachment-badge-icon {
width: 10px;
height: 10px;
}
.roadmap-review-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: var(--bg-hover);
color: var(--text-muted);
}
.roadmap-review-badge.is-resolved {
color: var(--success, #3fb950);
}
.roadmap-review-badge.is-likely {
color: color-mix(in srgb, var(--success, #3fb950) 70%, var(--warning, #d29922));
}
.roadmap-review-badge.is-partial {
color: var(--warning, #d29922);
}
.roadmap-review-badge.is-open {
color: var(--text-muted);
}
.roadmap-review-result {
font-size: var(--font-size-sm);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.roadmap-review-result-meta {
color: var(--text-muted);
font-size: var(--font-size-xs, 11px);
text-transform: lowercase;
}
.roadmap-review-result.is-error .roadmap-review-result-meta {
color: var(--danger, #f14c4c);
}
.roadmap-review-result.is-error .roadmap-review-result-body {
white-space: pre-wrap;
}
.roadmap-review-row-detail {
color: var(--text-secondary);
}
.roadmap-review-row-detail ul {
margin: 0;
padding-left: 1.2em;
}
.roadmap-review-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.roadmap-review-row {
display: flex;
flex-direction: column;
gap: 4px;
font-size: var(--font-size-sm);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--spacing-xs) var(--spacing-sm);
}
.roadmap-review-row.is-applied {
opacity: 0.82;
border-style: dashed;
}
.roadmap-review-row-header {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.roadmap-review-applied-badge {
font-size: 10px;
line-height: 1.4;
padding: 0 6px;
border-radius: var(--radius);
background: color-mix(in srgb, var(--success, #3fb950) 18%, transparent);
color: var(--success, #3fb950);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.roadmap-review-row-actions {
flex-wrap: wrap;
gap: var(--spacing-xs);
padding-top: 2px;
}
.roadmap-review-actions {
flex-wrap: wrap;
}
.roadmap-review-row-title {
font-weight: 600;
color: var(--text-primary);
}
.roadmap-import-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.roadmap-import-row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: 0;
min-width: 0;
font-size: var(--font-size-sm);
color: var(--text-primary);
cursor: pointer;
}
.roadmap-import-check {
width: auto;
height: auto;
padding: 0;
margin: 0;
flex: none;
align-self: center;
accent-color: var(--accent);
background: transparent;
border: none;
border-radius: 0;
}
.roadmap-import-row.is-pinned,
.roadmap-import-row.is-covered {
color: var(--text-muted);
cursor: default;
}
.roadmap-import-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.roadmap-import-coverage {
flex: none;
max-width: 40%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
color: var(--text-muted);
}
/* src/renderer/styles/global/brand.css */
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
}
:is(.welcome-new-btn, .welcome-open-btn, .submit-btn, .stop-btn, .settings-buttons button, .onboarding-primary, .onboarding-skip, .onboarding-back, .ask-user-cancel, .ask-user-submit, .confirm-dialog-cancel, .confirm-dialog-confirm, .update-prompt-secondary, .update-prompt-primary, .ssh-prompt-cancel, .ssh-prompt-submit) {
height: var(--action-min-height);
min-height: var(--action-min-height);
padding: var(--action-padding-block) var(--action-padding-inline);
border-radius: var(--action-radius);
font-size: var(--font-size-base);
font-weight: 600;
line-height: var(--line-height-base);
}
#settings-dialog .settings-buttons button {
height: var(--action-min-height);
min-height: var(--action-min-height);
padding: var(--action-padding-block) var(--action-padding-inline);
border-radius: var(--action-radius);
font-size: var(--font-size-base);
font-weight: 600;
line-height: var(--line-height-base);
}
@supports (text-box: trim-both cap alphabetic) {
:is(.welcome-new-btn, .welcome-open-btn, .submit-btn, .stop-btn, .settings-buttons button, .onboarding-primary, .onboarding-skip, .onboarding-back, .ask-user-cancel, .ask-user-submit, .confirm-dialog-cancel, .confirm-dialog-confirm, .update-prompt-secondary, .update-prompt-primary, .ssh-prompt-cancel, .ssh-prompt-submit, .ui-btn):not(:has(*)),
#settings-dialog .settings-buttons button:not(:has(*)) {
display: inline-block;
align-content: center;
text-align: center;
text-box: trim-both cap alphabetic;
}
}
:is(.settings-buttons button[type=button], .onboarding-skip, .onboarding-back, .ask-user-cancel, .confirm-dialog-cancel, .update-prompt-secondary, .ssh-prompt-cancel) {
border: 1px solid currentColor;
color: var(--text-primary);
}
:is(.welcome-new-btn, .welcome-open-btn, .submit-btn, .settings-buttons button[type=submit], .onboarding-primary, .ask-user-submit, .confirm-dialog-confirm:not(.confirm-dialog-danger), .update-prompt-primary, .ssh-prompt-submit) {
color: var(--text-on-accent);
background: var(--accent-fill);
}
:is(.welcome-new-btn, .welcome-open-btn, .submit-btn, .settings-buttons button[type=submit], .onboarding-primary, .ask-user-submit, .confirm-dialog-confirm:not(.confirm-dialog-danger), .update-prompt-primary, .ssh-prompt-submit):hover {
opacity: 1;
background: var(--accent-fill-hover);
}
/* src/renderer/styles/global.css */
/* src/renderer/styles/themes.css */
[data-theme=dark] {
color-scheme: dark;
--text-primary: #d4d4d4;
--text-secondary: #a6a6a6;
--text-muted: #808080;
--border: #414141;
--border-subtle: #333333;
--border-strong: #565656;
--accent-hover: color-mix(in srgb, var(--accent) 85%, white);
--link: color-mix(in srgb, var(--accent) 65%, white);
--link-hover: color-mix(in srgb, var(--accent) 50%, white);
--error: #f48771;
--danger: #f14c4c;
--success: #4ec9b0;
--warning: #cca700;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
--shadow-composer: 0 -6px 18px rgba(0, 0, 0, 0.1);
}
[data-theme=dark][data-tint-palette=copse][data-tint-strength=strong] {
--bg-base: #002e2b;
--bg-elevated: #073936;
--bg-hover: #0d4540;
--bg-muted: #123f3b;
--bg-subtle: #043431;
--text-primary: #f9fcff;
--text-secondary: #b8cbc8;
--text-muted: #829e9a;
--border: #28534f;
--border-subtle: #16413d;
--border-strong: #50736f;
}
[data-theme=light] {
color-scheme: light;
--tint-light-boost: 1.9;
--tint-amount-light: calc(var(--tint-amount) * var(--tint-light-boost));
--bg-base: color-mix(in srgb, var(--tint-hue) var(--tint-amount-light), #ffffff);
--bg-elevated: color-mix(in srgb, var(--tint-hue) var(--tint-amount-light), #f3f3f3);
--bg-hover: color-mix(in srgb, var(--tint-hue) var(--tint-amount-light), #e8e8e8);
--bg-muted: color-mix(in srgb, var(--tint-hue) var(--tint-amount-light), #ececec);
--bg-subtle: color-mix(in srgb, var(--tint-hue) var(--tint-amount-light), #f7f7f7);
--bg-active: #0060c0;
--bg-selected: color-mix(in srgb, var(--accent) 13%, var(--bg-elevated));
--selection-bg: #b0d3ff;
--selection-text: #10243b;
--highlight-current-bg: #ffcc33;
--highlight-current-text: #241a00;
--text-primary: #333333;
--text-secondary: #5f5f5f;
--text-muted: #767676;
--select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23707070'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
--border: #d4d4d4;
--border-subtle: #e4e4e4;
--border-strong: #ababab;
--accent: color-mix(in srgb, var(--accent-color) 30%, black);
--accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
--accent-hover: color-mix(in srgb, var(--accent) 85%, black);
--accent-fill-hover: color-mix(in srgb, var(--accent-fill) 85%, black);
--link: var(--accent);
--link-hover: color-mix(in srgb, var(--accent) 82%, black);
--error: #cf222e;
--danger: #cf222e;
--success: #1a7f37;
--warning: #9a6700;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.14);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.2);
--shadow-composer: 0 -6px 18px rgba(0, 0, 0, 0.05);
}
/* src/renderer/styles/global/popout.css */
html.is-popout,
html.is-popout body,
html.is-popout #app {
height: 100%;
}
html.is-popout #titlebar,
html.is-popout #pane-projects,
html.is-popout #resizer-projects,
html.is-popout #pane-chat,
html.is-popout #resizer-files,
html.is-popout #welcome {
display: none !important;
}
html.is-popout #body {
height: 100%;
}
html.is-popout #pane-files {
display: flex !important;
flex: 1 1 auto;
width: 100% !important;
height: 100%;
}
html.is-popout .pane-popout-btn,
html.is-popout .pane-maximize-btn {
display: none;
}
html.is-popout .roadmap-start-btn,
html.is-popout .roadmap-reopen-btn,
html.is-popout .roadmap-thread-indicator {
display: none;
}
html.is-popout #pane-files {
position: relative;
}
html.is-popout .popout-panel-bar-host {
position: absolute;
left: var(--spacing-md);
bottom: var(--spacing-md);
z-index: 40;
pointer-events: none;
}
html.is-popout .popout-panel-bar {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: nowrap;
overflow: visible;
box-sizing: border-box;
padding: 0 var(--spacing-sm);
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 4px 16px color-mix(in srgb, var(--bg-base) 40%, transparent);
pointer-events: auto;
}
html.is-popout .popout-panel-bar .titlebar-text-btn,
html.is-popout .popout-panel-bar .portrait-panel-btn {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
box-sizing: border-box;
height: calc(var(--chrome-action-band-height) - 2 * var(--spacing-xs));
padding: 0 var(--spacing-sm);
gap: 4px;
white-space: nowrap;
}
html.is-popout .popout-panel-bar .titlebar-text-btn:hover,
html.is-popout .popout-panel-bar .portrait-panel-btn:hover {
background: var(--bg-hover);
}
html.is-popout .popout-panel-bar .titlebar-text-btn.active,
html.is-popout .popout-panel-bar .portrait-panel-btn.active {
background: color-mix(in srgb, var(--accent) 16%, var(--bg-hover));
color: var(--accent);
}
html.is-popout .popout-panel-bar .titlebar-text-btn[data-portrait-overflow],
html.is-popout .popout-panel-bar .portrait-panel-btn[data-portrait-overflow] {
display: none;
}
/* node_modules/.pnpm/@xterm+xterm@6.0.0/node_modules/@xterm/xterm/css/xterm.css */
.xterm {
cursor: text;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
z-index: 5;
}
.xterm .xterm-helper-textarea {
padding: 0;
border: 0;
margin: 0;
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -5;
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
background: #000;
color: #FFF;
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
background-color: #000;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.xterm .xterm-screen {
position: relative;
}
.xterm .xterm-screen canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
top: 0;
left: -9999em;
line-height: normal;
}
.xterm.enable-mouse-events {
cursor: default;
}
.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
cursor: pointer;
}
.xterm.column-select.focus {
cursor: crosshair;
}
.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10;
color: transparent;
pointer-events: none;
}
.xterm .xterm-accessibility-tree:not(.debug) *::selection {
color: transparent;
}
.xterm .xterm-accessibility-tree {
font-family: monospace;
user-select: text;
white-space: pre;
}
.xterm .xterm-accessibility-tree > div {
transform-origin: left;
width: fit-content;
}
.xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.xterm-dim {
opacity: 1 !important;
}
.xterm-underline-1 {
text-decoration: underline;
}
.xterm-underline-2 {
text-decoration: double underline;
}
.xterm-underline-3 {
text-decoration: wavy underline;
}
.xterm-underline-4 {
text-decoration: dotted underline;
}
.xterm-underline-5 {
text-decoration: dashed underline;
}
.xterm-overline {
text-decoration: overline;
}
.xterm-overline.xterm-underline-1 {
text-decoration: overline underline;
}
.xterm-overline.xterm-underline-2 {
text-decoration: overline double underline;
}
.xterm-overline.xterm-underline-3 {
text-decoration: overline wavy underline;
}
.xterm-overline.xterm-underline-4 {
text-decoration: overline dotted underline;
}
.xterm-overline.xterm-underline-5 {
text-decoration: overline dashed underline;
}
.xterm-strikethrough {
text-decoration: line-through;
}
.xterm-screen .xterm-decoration-container .xterm-decoration {
z-index: 6;
position: absolute;
}
.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
z-index: 7;
}
.xterm-decoration-overview-ruler {
z-index: 8;
position: absolute;
top: 0;
right: 0;
pointer-events: none;
}
.xterm-decoration-top {
z-index: 2;
position: relative;
}
.xterm .xterm-scrollable-element > .scrollbar {
cursor: default;
}
.xterm .xterm-scrollable-element > .scrollbar > .scra {
cursor: pointer;
font-size: 11px !important;
}
.xterm .xterm-scrollable-element > .visible {
opacity: 1;
background: rgba(0, 0, 0, 0);
transition: opacity 100ms linear;
z-index: 11;
}
.xterm .xterm-scrollable-element > .invisible {
opacity: 0;
pointer-events: none;
}
.xterm .xterm-scrollable-element > .invisible.fade {
transition: opacity 800ms linear;
}
.xterm .xterm-scrollable-element > .shadow {
position: absolute;
display: none;
}
.xterm .xterm-scrollable-element > .shadow.top {
display: block;
top: 0;
left: 3px;
height: 3px;
width: 100%;
box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.left {
display: block;
top: 3px;
left: 0;
height: 100%;
width: 3px;
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
display: block;
top: 0;
left: 0;
height: 3px;
width: 3px;
}
.xterm .xterm-scrollable-element > .shadow.top.left {
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
}
/*! Bundled license information:
@xterm/xterm/css/xterm.css:
(**
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
* https://github.com/chjj/term.js
* @license MIT
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
* Originally forked from (with the author's permission):
* Fabrice Bellard's javascript vt100 for jslinux:
* http://bellard.org/jslinux/
* Copyright (c) 2011 Fabrice Bellard
* The original design remains. The terminal itself
* has been extended to include xterm CSI codes, among
* other features.
*)
*/