repoburg 1.3.202 → 1.3.209

package/agent-pane/frontend/src/styles/app.css

@@ -1,627 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;510;590;600&family=JetBrains+Mono:wght@400;500&display=swap');
-@import './tokens.css';
-
-* { margin: 0; padding: 0; box-sizing: border-box; }
-
-html, body { height: 100%; overflow: hidden; }
-
-body {
-  font-family: var(--font-sans);
-  font-size: 13px;
-  font-weight: 400;
-  background: var(--canvas);
-  color: var(--text-2);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-  font-feature-settings: "ss03", "cv11";
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -0.01em;
-}
-
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }
-
-:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
-
-/* === IDE Root Layout === */
-.ide-root { display: flex; flex-direction: column; height: 100vh; }
-/* Default track sizes match uiSlice defaults; IdeWorkspace overrides via inline style
-   once hydrated (and adds two 6px resize-handle tracks: 240px 6px 1fr 6px 300px). */
-.ide-layout { display: grid; grid-template-columns: 240px 6px 1fr 6px 300px; flex: 1; overflow: hidden; }
-
-/* === Resize handles === */
-.resize-handle { width: 6px; cursor: col-resize; background: transparent; flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
-.resize-handle:hover, .resize-handle.dragging { background: var(--border-hover); }
-/* While dragging, suppress text selection across the whole app. */
-body.is-resizing { user-select: none; }
-body.is-resizing * { cursor: col-resize !important; }
-
-/* === Sidebar === */
-.ide-sidebar { background: var(--surface-0); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }
-.sidebar-header { padding: 10px 12px 8px; display: flex; align-items: center; justify-content: space-between; }
-.sidebar-header-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
-.sidebar-add { width: 20px; height: 20px; border-radius: var(--r-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all var(--dur-normal) var(--ease); }
-.sidebar-add:hover { background: rgba(0,0,0,0.06); color: var(--text); }
-
-.tree-section { margin-bottom: 2px; }
-.tree-section-header { padding: 5px 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 590; color: var(--text-2); cursor: pointer; user-select: none; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
-.tree-section-header:hover { background: rgba(0,0,0,0.04); }
-.tree-chevron { font-size: 9px; color: var(--text-muted); width: 10px; transition: transform var(--dur-normal) var(--ease); }
-.tree-section.collapsed .tree-chevron { transform: rotate(-90deg); }
-.tree-section.collapsed .tree-children { display: none; }
-.tree-count { margin-left: auto; font-size: 10px; background: var(--surface-2); padding: 1px 6px; border-radius: var(--r-pill); color: var(--text-muted); font-variant-numeric: tabular-nums; }
-.tree-children { padding-left: 4px; }
-.tree-item { padding: 4px 8px 4px 26px; border-radius: var(--r-sm); font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--text-2); user-select: none; transition: all var(--dur-fast) var(--ease); position: relative; }
-.tree-item:hover { background: rgba(0,0,0,0.04); color: var(--text); }
-.tree-item.active { background: var(--accent-soft); color: var(--text); }
-.tree-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent); border-radius: var(--r-pill); }
-.tree-item .ri { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #fff; flex-shrink: 0; }
-.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sidebar-footer { margin-top: auto; padding: 8px 12px; border-top: 1px solid var(--border-muted); font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
-.sidebar-footer:hover { color: var(--text-2); }
-
-/* === Center === */
-.ide-center { display: flex; flex-direction: column; background: var(--canvas); overflow: hidden; min-height: 0; }
-.ide-tabs { display: flex; background: var(--surface-0); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
-.ide-tabs::-webkit-scrollbar { display: none; }
-.ide-tab { padding: 8px 12px; font-size: 12px; color: var(--text-3); border-right: 1px solid var(--border-muted); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; user-select: none; transition: all var(--dur-fast) var(--ease); position: relative; }
-.ide-tab:hover { background: rgba(0,0,0,0.03); color: var(--text-2); }
-.ide-tab.active { color: var(--text); background: var(--canvas); }
-.ide-tab.active::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
-.ide-tab .ri { width: 14px; height: 14px; font-size: 7px; border-radius: 3px; }
-.ide-tab-close { margin-left: 4px; color: var(--text-muted); font-size: 14px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); display: flex; align-items: center; }
-.ide-tab:hover .ide-tab-close { opacity: 1; }
-.ide-tab-close:hover { color: var(--red); }
-.ide-tab-add { padding: 8px 10px; color: var(--text-muted); cursor: pointer; font-size: 14px; transition: color var(--dur-fast) var(--ease); display: flex; align-items: center; }
-.ide-tab-add:hover { color: var(--text); }
-
-.ide-render { flex: 1; overflow: hidden; display: flex; flex-direction: column; position: relative; min-height: 0; }
-.render-scroll { flex: 1; padding: 20px 28px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--text); min-height: 0; }
-
-/* === Markdown === */
-.render-content { max-width: 720px; }
-.render-content h1, .render-content h2, .render-content h3 { margin: 20px 0 8px; font-weight: 600; color: var(--text); line-height: 1.3; }
-.render-content h1 { font-size: 20px; }
-.render-content h2 { font-size: 17px; }
-.render-content h3 { font-size: 15px; }
-.render-content p { margin-bottom: 12px; color: var(--text-2); }
-.render-content ul, .render-content ol { margin-bottom: 12px; padding-left: 24px; }
-.render-content li { margin-bottom: 4px; color: var(--text-2); }
-.render-content code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-1); padding: 2px 6px; border-radius: var(--r-sm); color: var(--accent); }
-.render-content pre { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; overflow-x: auto; margin-bottom: 12px; }
-.render-content pre code { background: none; padding: 0; color: var(--text); font-size: 12.5px; line-height: 1.6; }
-.render-content a { color: var(--accent); text-decoration: none; }
-.render-content a:hover { text-decoration: underline; }
-.render-content blockquote { border-left: 3px solid var(--border); padding-left: 14px; color: var(--text-3); margin-bottom: 12px; }
-.render-content table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
-.render-content th, .render-content td { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; }
-.render-content th { background: var(--surface-1); font-weight: 510; }
-
-/* === Turn cards === */
-.turn-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
-.turn-header-icon { width: 24px; height: 24px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; font-weight: 700; color: #fff; }
-.turn-header-title { font-size: 14px; font-weight: 600; color: var(--text); }
-.turn-header-meta { font-size: 11px; color: var(--text-muted); }
-
-/* Collapsible tool calls */
-.tool-calls { margin-bottom: 16px; }
-.tool-calls-header {
-  display: flex; align-items: center; gap: 8px;
-  padding: 6px 12px;
-  background: var(--surface-1);
-  border: 1px solid var(--border);
-  border-radius: var(--r-sm);
-  cursor: pointer;
-  transition: background 150ms ease-out;
-  user-select: none;
-}
-.tool-calls-header:hover { background: var(--surface-2); }
-.tool-calls-icon { display: flex; align-items: center; color: var(--text-3); flex-shrink: 0; }
-.tool-calls-summary { font-size: 13px; font-weight: 500; color: var(--text-2); flex: 1; }
-.tool-calls-chevron { color: var(--text-muted); transition: transform 150ms ease-out; flex-shrink: 0; }
-.tool-calls-body { margin-top: 8px; padding-left: 16px; border-left: 2px solid var(--border); }
-.intermediate-segment { margin-bottom: 16px; }
-.intermediate-segment:last-child { margin-bottom: 0; }
-.user-message { font-size: 14px; color: var(--text); background: var(--accent-soft); padding: 12px 16px; border-radius: var(--r-md); border: 1px solid rgba(217,119,6,0.15); }
-
-/* === Command input === */
-.cmd-bar { position: relative; display: flex; flex-direction: column; padding: 0; background: var(--surface-0); border-top: 1px solid var(--border); flex-shrink: 0; }
-.cmd-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; }
-.cmd-bar:focus-within { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4); }
-.cmd-textarea { flex: 1; border: none; background: transparent; color: var(--text); font-size: 13px; font-family: var(--font-sans); outline: none; resize: none; overflow-y: auto; line-height: 1.5; padding: 6px 0; }
-.cmd-textarea::placeholder { color: var(--text-muted); }
-.cmd-textarea:disabled { opacity: 0.5; }
-.cmd-textarea:focus-visible { box-shadow: none; }
-.cmd-send-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); cursor: default; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
-.cmd-send-btn:not(:disabled) { background: var(--accent); color: #fff; cursor: pointer; }
-.cmd-send-btn:not(:disabled):hover { background: var(--accent-hover); }
-.cmd-send-btn:disabled { opacity: 0.4; }
-.cmd-stop-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--red); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
-.cmd-stop-btn:hover { background: #b91c1c; }
-
-/* === Right Panel === */
-.ide-right { background: var(--surface-0); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
-.right-tabs { display: flex; padding: 0 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 2px; }
-.right-tab { padding: 7px 10px; font-size: 11px; font-weight: 510; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; user-select: none; transition: all var(--dur-fast) var(--ease); margin-bottom: -1px; }
-.right-tab:hover { color: var(--text-2); }
-.right-tab.active { color: var(--text); border-bottom-color: var(--accent); }
-.right-content { flex: 1; overflow-y: auto; padding: 14px; }
-
-.right-section { margin-bottom: 20px; }
-.right-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 8px; }
-
-/* === Turns panel === */
-.turn-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 12px; color: var(--text-3); transition: all var(--dur-fast) var(--ease); position: relative; }
-.turn-item:hover { background: rgba(0,0,0,0.04); color: var(--text-2); }
-.turn-item.active { background: var(--accent-soft); color: var(--text); }
-.turn-item.active::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent); border-radius: var(--r-pill); }
-.turn-item-icon { width: 18px; height: 18px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; font-weight: 700; color: #fff; }
-.turn-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.turn-item-status { font-size: 10px; color: var(--amber); flex-shrink: 0; }
-.turn-item-meta { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
-
-/* === File changes === */
-.file-change { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--border-muted); }
-.file-change:last-child { border: none; }
-.file-change.clickable { cursor: pointer; transition: background var(--dur-fast) var(--ease); }
-.file-change.clickable:hover { background: rgba(0,0,0,0.03); }
-.fc-status { width: 14px; text-align: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
-.fc-add { color: var(--green); }
-.fc-mod { color: var(--amber); }
-.fc-del { color: var(--red); }
-.fc-name { flex: 1; color: var(--text-2); font-family: var(--font-mono); font-size: 11px; }
-.fc-delta { font-size: 10px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
-
-/* === Diff === */
-.diff-file-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: none; }
-.diff-file-status { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
-.diff-file-name { font-family: var(--font-mono); font-size: 13px; font-weight: 510; color: var(--text); }
-.diff-file-stats { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
-.diff-file-badge { padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); font-size: 10px; }
-.diff-body { border: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; margin-bottom: 20px; }
-.diff-line { display: flex; align-items: flex-start; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
-.diff-line-num { width: 42px; flex-shrink: 0; text-align: right; padding: 0 8px; color: var(--text-muted); background: var(--surface-0); user-select: none; border-right: 1px solid var(--border-muted); }
-.diff-sign { width: 20px; flex-shrink: 0; text-align: center; user-select: none; font-weight: 700; }
-.diff-line-content { flex: 1; padding: 0 8px; white-space: pre-wrap; word-break: break-all; min-width: 0; }
-.diff-line-add { background: rgba(22, 163, 74, 0.06); }
-.diff-line-add .diff-sign { color: var(--green); }
-.diff-line-del { background: rgba(220, 38, 38, 0.06); }
-.diff-line-del .diff-sign { color: var(--red); }
-.diff-line-ctx .diff-sign { color: var(--text-muted); }
-.diff-line-ctx .diff-line-content { color: var(--text-3); }
-
-/* === Scope toggle === */
-.changes-scope-toggle { display: flex; gap: 2px; margin-bottom: 12px; padding: 2px; background: var(--surface-1); border-radius: var(--r-md); }
-.scope-btn { flex: 1; padding: 5px 10px; border: none; background: transparent; color: var(--text-3); font-size: 11px; font-weight: 510; cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
-.scope-btn:hover { color: var(--text-2); }
-.scope-btn.active { background: var(--surface-0); color: var(--text); box-shadow: var(--inset-highlight); }
-
-/* === Status Bar === */
-.ide-statusbar { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 24px; background: var(--surface-0); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
-.sb-item { display: flex; align-items: center; gap: 3px; cursor: pointer; transition: color var(--dur-fast) var(--ease); }
-.sb-item:hover { color: var(--text-2); }
-.sb-spacer { flex: 1; }
-.sb-divider { color: var(--border); }
-.sb-context { display: flex; align-items: center; gap: 5px; }
-.sb-context-text { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
-
-/* Model selector — 3-level cascading popover */
-.model-selector { position: relative; }
-.model-selector-btn {
-  display: flex; align-items: center; gap: 4px;
-  background: none; border: none; cursor: pointer;
-  color: var(--text-muted); font-size: 11px;
-  padding: 2px 6px; border-radius: 3px;
-  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
-}
-.model-selector-btn:hover { background: var(--surface-1); color: var(--text-2); }
-.model-selector-provider { font-weight: 500; color: var(--accent); }
-.model-selector-sep { color: var(--border); margin: 0 1px; }
-.model-selector-model { color: var(--text-2); }
-.model-selector-reasoning { color: var(--text-muted); font-style: italic; }
-.model-selector-chevron { opacity: 0.5; flex-shrink: 0; }
-
-.model-selector-popover {
-  position: absolute; bottom: calc(100% + 4px); left: 0;
-  display: flex; gap: 1px;
-  background: var(--surface-0);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-  z-index: 100;
-  min-width: 0;
-  overflow: hidden;
-}
-.model-selector-column {
-  min-width: 140px; max-width: 220px;
-  padding: 4px 0;
-  background: var(--surface-0);
-}
-.model-selector-col-header {
-  padding: 4px 10px;
-  font-size: 9px; font-weight: 600; text-transform: uppercase;
-  color: var(--text-muted); letter-spacing: 0.5px;
-}
-.model-selector-item {
-  display: flex; align-items: center; gap: 6px;
-  padding: 6px 10px;
-  cursor: pointer;
-  font-size: 11px; color: var(--text-2);
-  transition: background var(--dur-fast) var(--ease);
-}
-.model-selector-item:hover { background: var(--surface-1); }
-.model-selector-item.selected { color: var(--accent); }
-.model-selector-item.disabled { cursor: default; opacity: 0.5; }
-.model-selector-item.disabled:hover { background: none; }
-.model-selector-item-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
-.model-selector-item-name { font-weight: 500; white-space: nowrap; }
-.model-selector-item-desc { font-size: 9px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.model-selector-coming-soon {
-  display: flex; align-items: center; gap: 2px;
-  font-size: 9px; color: var(--text-muted); font-style: italic;
-}
-.model-selector-empty {
-  padding: 8px 10px;
-  font-size: 10px; color: var(--text-muted); font-style: italic;
-}
-
-/* Dialog select dropdowns */
-.dialog-select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  padding-right: 26px;
-}
-
-/* === Badges === */
-.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 510; white-space: nowrap; }
-.badge-running { background: var(--green-soft); color: var(--green); }
-.badge-queued  { background: var(--amber-soft); color: var(--amber); }
-.badge-done    { background: var(--accent-soft); color: var(--accent); }
-.badge-failed  { background: var(--red-soft); color: var(--red); }
-.badge-paused  { background: rgba(168, 163, 153, 0.12); color: var(--text-muted); }
-
-/* === Runtime Icons === */
-.runtime-icon { width: 20px; height: 20px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0; }
-.ic-claude   { background: var(--ic-claude); }
-.ic-codex    { background: var(--ic-codex); }
-.ic-repoburg { background: var(--ic-repoburg); }
-.ic-cursor   { background: var(--ic-cursor); }
-
-/* === Status dots === */
-.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
-.status-dot.running { background: var(--green); animation: dot-pulse 1.5s ease-in-out infinite; }
-.status-dot.queued  { background: var(--amber); }
-.status-dot.error   { background: var(--red); }
-.status-dot.done    { background: var(--accent); }
-.status-dot.paused  { background: var(--text-muted); }
-
-/* === Lucide === */
-[data-lucide], svg.lucide { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; }
-.icon-xs { width: 12px !important; height: 12px !important; }
-.icon-sm { width: 14px !important; height: 14px !important; }
-.icon-lg { width: 20px !important; height: 20px !important; }
-
-/* === Dialog === */
-.dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 100; }
-.dialog { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg); width: 400px; max-width: 90vw; box-shadow: 0 8px 32px rgba(0,0,0,0.16); }
-.dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-muted); }
-.dialog-title { font-size: 14px; font-weight: 600; color: var(--text); }
-.dialog-close { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: var(--r-sm); display: flex; align-items: center; transition: all var(--dur-fast) var(--ease); }
-.dialog-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }
-.dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
-.dialog-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 510; color: var(--text-muted); }
-.dialog-input { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; transition: border-color var(--dur-fast) var(--ease); }
-.dialog-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
-.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-muted); }
-.dialog-btn-cancel { padding: 6px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
-.dialog-btn-cancel:hover { background: var(--surface-2); color: var(--text); }
-.dialog-btn-create { padding: 6px 14px; border-radius: var(--r-sm); border: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 510; cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
-.dialog-btn-create:hover { background: var(--accent-hover); }
-
-/* === Turn group === */
-.turn-group { margin-bottom: 24px; }
-.turn-block { margin-bottom: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
-.turn-block:last-child { border-bottom: none; }
-.cmd-block { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px; overflow-x: auto; margin-bottom: 12px; }
-.cmd-block code { font-family: var(--font-mono); font-size: 12px; color: var(--text); }
-.cmd-output { background: var(--surface-0); border: 1px solid var(--border-muted); border-radius: var(--r-md); padding: 10px 14px; overflow-x: auto; margin-bottom: 12px; max-height: 200px; overflow-y: auto; }
-.cmd-output code { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
-
-/* Output truncation toggle */
-.cmd-output-toggle { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-1); color: var(--text-muted); font-size: 11px; font-family: var(--font-sans); padding: 4px 10px; cursor: pointer; margin-bottom: 12px; transition: all var(--dur-fast) var(--ease); }
-.cmd-output-toggle:hover { background: var(--surface-2); color: var(--text-2); }
-
-/* MCP tool call arguments + results */
-.mcp-args { margin-bottom: 12px; }
-.mcp-arg { margin-bottom: 6px; }
-.mcp-arg-key { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 3px; }
-.mcp-arg-value { font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
-.file-change-list { display: flex; flex-direction: column; gap: 2px; }
-.todo-list { list-style: none; padding-left: 0; }
-.todo-done { color: var(--text-3); text-decoration: line-through; }
-.todo-pending { color: var(--text-2); }
-
-/* === Empty state === */
-.empty-state { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
-
-/* === Command Palette === */
-.palette-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; z-index: 200; }
-.palette { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg); width: 520px; max-width: 90vw; box-shadow: 0 12px 40px rgba(0,0,0,0.2); overflow: hidden; }
-.palette-search { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-muted); }
-.palette-search input { flex: 1; border: none; background: transparent; color: var(--text); font-size: 15px; font-family: var(--font-sans); outline: none; }
-.palette-search input::placeholder { color: var(--text-muted); }
-.palette-esc { font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); }
-.palette-list { max-height: 360px; overflow-y: auto; padding: 4px; }
-.palette-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
-.palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
-.palette-item.selected { background: var(--accent-soft); }
-.palette-item-icon { color: var(--text-muted); flex-shrink: 0; display: flex; align-items: center; }
-.palette-item.selected .palette-item-icon { color: var(--accent); }
-.palette-item-label { font-size: 13px; color: var(--text); font-weight: 510; }
-.palette-item-hint { font-size: 11px; color: var(--text-muted); margin-left: auto; }
-.palette-item-enter { color: var(--text-muted); flex-shrink: 0; }
-
-/* === Toast === */
-.toast-container { position: fixed; bottom: 36px; right: 16px; display: flex; flex-direction: column-reverse; gap: 8px; z-index: 300; pointer-events: none; }
-.toast { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 500; min-width: 280px; max-width: 400px; pointer-events: auto; animation: toast-in 200ms ease-out; border: 1px solid var(--border); background: var(--surface-0); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
-@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
-.toast-success { border-left: 3px solid var(--green); } .toast-success svg { color: var(--green); }
-.toast-error { border-left: 3px solid var(--red); } .toast-error svg { color: var(--red); }
-.toast-info { border-left: 3px solid var(--accent); } .toast-info svg { color: var(--accent); }
-.toast-warn { border-left: 3px solid var(--amber); } .toast-warn svg { color: var(--amber); }
-.toast-message { flex: 1; color: var(--text-2); }
-.toast-close { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: var(--r-sm); display: flex; align-items: center; transition: color var(--dur-fast) var(--ease); }
-.toast-close:hover { color: var(--text); }
-
-/* === Error / Aborted Banner === */
-.error-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--r-md); margin-bottom: 16px; }
-.banner-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
-.error-banner .banner-icon { background: var(--red); color: #fff; }
-.error-banner .banner-text { color: var(--red); font-size: 13px; font-weight: 500; }
-.aborted-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.2); border-radius: var(--r-md); margin-bottom: 16px; }
-.aborted-banner .banner-icon { background: var(--amber); color: #fff; }
-.aborted-banner .banner-text { color: var(--amber); font-size: 13px; font-weight: 500; }
-
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
-}
-
-/* === Skeleton Loading (F2) === */
-.skeleton-bars { width: 80%; max-width: 500px; margin: 20px 0; }
-.skeleton-bar { height: 10px; border-radius: var(--r-sm); background: var(--surface-1); margin-bottom: 8px; animation: shimmer 1.2s infinite; }
-.skeleton-bar:nth-child(1) { width: 60%; }
-.skeleton-bar:nth-child(2) { width: 85%; }
-.skeleton-bar:nth-child(3) { width: 70%; }
-.skeleton-bar:nth-child(4) { width: 90%; }
-.skeleton-bar:nth-child(5) { width: 50%; }
-@keyframes shimmer { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } }
-
-@keyframes dot-pulse {
-  from { opacity: 1; }
-  to { opacity: 0.4; }
-}
-
-/* === Diff Highlight (F4) === */
-.diff-file-header { transition: background 300ms ease-out; }
-.diff-file-header.diff-highlight { background: var(--accent-soft); }
-
-/* === Palette Footer (F5) === */
-.palette-footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border-muted); font-size: 11px; color: var(--text-muted); }
-.palette-footer-hint { display: flex; align-items: center; gap: 4px; }
-.kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
-
-/* === Toast Undo (F6) === */
-.toast-undo { font-size: 12px; font-weight: 500; color: var(--accent); background: transparent; border: none; cursor: pointer; padding: 2px 8px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 4px; transition: background var(--dur-fast) var(--ease); }
-.toast-undo:hover { background: var(--accent-soft); }
-
-/* === Workspace Sidebar (hierarchy + quick create) === */
-.tree-section-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
-.tree-section-add { width: 18px; height: 18px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
-.tree-section-add:hover { background: var(--accent-soft); color: var(--accent); }
-.tree-empty { padding: 4px 8px 4px 26px; font-size: 11px; color: var(--text-muted); font-style: italic; }
-
-/* === Sidebar sub-groups (Working / Finished) === */
-.tree-subgroup { margin-bottom: 1px; }
-.tree-subgroup-header { padding: 3px 8px 3px 18px; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 590; color: var(--text-muted); cursor: pointer; user-select: none; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
-.tree-subgroup-header:hover { background: rgba(0,0,0,0.04); color: var(--text-2); }
-.tree-subgroup.collapsed .tree-chevron { transform: rotate(-90deg); }
-.tree-subgroup.collapsed .tree-subgroup-items { display: none; }
-.tree-subgroup-label { text-transform: uppercase; letter-spacing: 0.05em; }
-.tree-subgroup-count { margin-left: auto; font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
-.tree-subgroup-items { padding-left: 0; }
-.tree-item-finished .tree-label { color: var(--text-muted); opacity: 0.6; }
-.tree-item-finished:hover .tree-label { opacity: 0.85; }
-
-/* === Context Menu === */
-.ctx-menu { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 4px; min-width: 160px; }
-.ctx-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
-.ctx-menu-item:hover { background: var(--accent-soft); color: var(--text); }
-.ctx-menu-item.ctx-danger:hover { background: rgba(220,38,38,0.08); color: var(--red); }
-.ctx-menu-item.ctx-disabled { opacity: 0.4; cursor: default; }
-.ctx-menu-item.ctx-disabled:hover { background: transparent; color: var(--text-2); }
-
-/* === Inline rename input in sidebar === */
-.tree-rename-input { flex: 1; border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 1px 6px; font-size: 12px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; box-shadow: var(--focus-ring); min-width: 0; }
-
-/* === Slash Popup === */
-.slash-popup { position: absolute; bottom: 100%; left: 12px; right: 12px; margin-bottom: 4px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.12); max-height: 280px; overflow-y: auto; z-index: 100; }
-.slash-popup-header { padding: 6px 10px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; }
-.slash-popup-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: var(--r-sm); }
-.slash-popup-back:hover { background: var(--surface-1); color: var(--text-2); }
-.slash-popup-empty { padding: 12px 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
-.slash-popup-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; cursor: pointer; border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
-.slash-popup-item:hover, .slash-popup-item.selected { background: var(--accent-soft); }
-.slash-popup-label { font-size: 12px; font-weight: 500; color: var(--text-2); font-family: var(--font-mono); }
-.slash-popup-hint { font-size: 11px; color: var(--text-muted); }
-.slash-popup-item-main { display: flex; flex-direction: column; gap: 1px; }
-.slash-popup-check { color: var(--accent); font-size: 13px; }
-
-/* === Skill Badges === */
-.skill-badges { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; }
-.skill-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: 11px; font-family: var(--font-mono); color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); }
-.skill-badge-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
-.skill-badge-remove:hover { color: var(--red); }
-
-/* === Attachment Preview Area (input bar) === */
-.attachment-preview-area { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px 0; }
-.attachment-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); max-width: 180px; position: relative; transition: border-color var(--dur-fast) var(--ease); }
-.attachment-chip:hover { border-color: var(--accent); }
-.attachment-thumb { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
-.attachment-file-icon { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
-.attachment-info { display: flex; flex-direction: column; gap: 0; overflow: hidden; min-width: 0; }
-.attachment-name { font-size: 10px; font-family: var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
-.attachment-size { font-size: 9px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
-.attachment-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-xs); transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
-.attachment-remove:hover { color: var(--red); background: rgba(239,68,68,0.1); }
-
-/* === Paperclip Button === */
-.attachment-clip-btn { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--dur-fast) var(--ease); }
-.attachment-clip-btn:hover { color: var(--accent); background: var(--surface-2); }
-.attachment-clip-btn:disabled { opacity: 0.3; cursor: default; }
-
-/* === Drag-over Highlight === */
-.cmd-bar.drag-over { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
-
-/* === Image Preview Modal === */
-.image-preview-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; padding: 32px; animation: modal-fade-in 150ms ease-out; }
-@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
-.image-preview-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
-.image-preview-content img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--r-sm); border: 1px solid var(--border); }
-.image-preview-info { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
-.image-preview-close { position: absolute; top: -12px; right: -12px; width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease); }
-.image-preview-close:hover { background: var(--red); color: #fff; }
-
-/* === Attachment Pills (render area) === */
-.attachment-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
-.attachment-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); transition: border-color var(--dur-fast) var(--ease); }
-.attachment-pill:hover { border-color: var(--accent); }
-.attachment-pill-thumb { width: 16px; height: 16px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
-.attachment-pill-icon { color: var(--text-muted); flex-shrink: 0; }
-.attachment-pill-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
-/* === Tasks Panel === */
-.right-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; font-size: 10px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 8px; }
-.task-count-badge { font-size: 10px; font-weight: 500; }
-.task-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; transition: border-color var(--dur-fast) var(--ease); }
-.task-card.task-running { border-color: var(--accent); }
-.task-card.task-failed { border-color: var(--red); }
-.task-card-header { display: flex; align-items: center; gap: 8px; }
-.task-card-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); flex-shrink: 0; }
-.task-card-type { font-size: 13px; font-weight: 600; color: var(--text); }
-.task-card-status { display: flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 6px; border-radius: var(--r-sm); flex-shrink: 0; }
-.task-status-running { color: var(--accent); background: var(--accent-soft); }
-.task-status-done { color: var(--green); background: var(--green-soft); }
-.task-status-failed { color: var(--red); background: var(--red-soft); }
-.task-card-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
-.task-card-desc { font-size: 12px; color: var(--text-2); margin-top: 6px; font-family: var(--font-mono); }
-.task-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-.task-card-body { margin-top: 8px; }
-.task-output { max-height: 300px; }
-.task-card-placeholder { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
-.task-card-context { font-size: 10px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-/* === Discussion Threads === */
-/* Highlight marks on anchored text */
-mark[data-thread-id] { background: rgba(217, 119, 6, 0.18); border-radius: 2px; cursor: pointer; padding: 0 1px; transition: background var(--dur-fast) var(--ease); }
-mark[data-thread-id]:hover { background: rgba(217, 119, 6, 0.3); }
-mark[data-thread-id].thread-mark-resolved { background: transparent; border-bottom: 2px dashed var(--text-muted); }
-
-/* Floating selection actions (Discuss + Quote) */
-.selection-actions { position: fixed; z-index: 9999; display: flex; gap: 4px; }
-.discuss-button { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-0); color: var(--accent); font-size: 11px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: all var(--dur-fast) var(--ease); }
-.discuss-button:hover { background: var(--accent-soft); border-color: var(--accent); }
-
-/* Thread creation popover */
-.thread-create-popover { position: fixed; z-index: 9999; min-width: 280px; max-width: 360px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 10px; display: flex; flex-direction: column; gap: 8px; transform: translateX(-100%); }
-.thread-create-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
-.thread-create-quote { font-size: 11px; color: var(--text-muted); font-style: italic; flex: 1; line-height: 1.4; }
-.thread-create-close { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: var(--r-sm); flex-shrink: 0; }
-.thread-create-close:hover { background: var(--surface-1); color: var(--text); }
-.thread-create-input { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; resize: none; line-height: 1.5; transition: border-color var(--dur-fast) var(--ease); }
-.thread-create-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
-.thread-create-footer { display: flex; align-items: center; justify-content: space-between; }
-.thread-create-hint { font-size: 10px; color: var(--text-muted); }
-.thread-create-send { display: flex; align-items: center; gap: 4px; padding: 4px 10px; border: none; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-size: 11px; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
-.thread-create-send:disabled { opacity: 0.4; cursor: default; }
-.thread-create-send:not(:disabled):hover { background: var(--accent-hover); }
-
-/* Threads sidebar — filter tabs */
-.thread-filter-tabs { display: flex; gap: 2px; margin-bottom: 12px; padding: 2px; background: var(--surface-1); border-radius: var(--r-md); }
-.thread-filter-tab { flex: 1; padding: 4px 8px; border: none; background: transparent; color: var(--text-3); font-size: 10px; font-weight: 500; cursor: pointer; border-radius: var(--r-sm); font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
-.thread-filter-tab:hover { color: var(--text-2); }
-.thread-filter-tab.active { background: var(--surface-0); color: var(--text); box-shadow: var(--inset-highlight); }
-
-/* Thread card */
-.thread-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
-.thread-card.thread-resolved { opacity: 0.7; }
-.thread-card-highlighted { border-color: var(--accent); background: var(--accent-soft); }
-.thread-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; cursor: pointer; }
-.thread-card-quote { font-size: 11px; color: var(--text-muted); font-style: italic; line-height: 1.4; flex: 1; }
-.thread-card-header-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
-.thread-status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
-.thread-status-open { background: var(--accent-soft); color: var(--accent); }
-.thread-status-resolved { background: var(--green-soft); color: var(--green); }
-
-/* Thread conversation */
-.thread-card-conversation { margin-top: 8px; max-height: 300px; overflow-y: auto; }
-.thread-card-turn { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border-muted); }
-.thread-card-turn:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
-.thread-card-user-message { font-size: 12px; color: var(--text); background: var(--accent-soft); padding: 6px 10px; border-radius: var(--r-sm); border: 1px solid rgba(217,119,6,0.15); margin-bottom: 4px; }
-.thread-card-ai-response { font-size: 12px; color: var(--text-2); padding: 4px 0; line-height: 1.5; }
-.thread-card-ai-response p { margin-bottom: 6px; }
-.thread-card-ai-response code { font-family: var(--font-mono); font-size: 11px; background: var(--surface-1); padding: 1px 4px; border-radius: var(--r-sm); color: var(--accent); }
-.thread-card-ai-response pre { background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px; overflow-x: auto; margin-bottom: 6px; }
-.thread-card-ai-response pre code { background: none; padding: 0; }
-.thread-card-pending { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 0; }
-.thread-card-placeholder { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
-
-/* Follow-up input */
-.thread-card-followup { display: flex; gap: 4px; margin-top: 8px; }
-.thread-card-followup-input { flex: 1; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12px; font-family: var(--font-sans); color: var(--text); background: var(--canvas); outline: none; resize: none; line-height: 1.5; transition: border-color var(--dur-fast) var(--ease); }
-.thread-card-followup-input:focus { border-color: var(--accent); }
-.thread-card-followup-input:disabled { opacity: 0.5; }
-.thread-card-followup-send { width: 28px; height: 28px; border: none; border-radius: var(--r-sm); background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
-.thread-card-followup-send:disabled { opacity: 0.4; cursor: default; }
-.thread-card-followup-send:not(:disabled):hover { background: var(--accent-hover); }
-
-.thread-locate-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 3px; display: flex; align-items: center; transition: all var(--dur-fast) var(--ease); flex-shrink: 0; }
-.thread-locate-btn:hover { color: var(--accent); background: var(--accent-soft); }
-
-/* Thread mark flash animation */
-.thread-mark-flash { animation: mark-flash 1.5s ease-out; }
-@keyframes mark-flash { 0% { background: rgba(217,119,6,0.5); } 100% { background: rgba(217,119,6,0.18); } }
-
-/* Thread actions */
-.thread-card-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-muted); }
-.thread-action-btn { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--text-3); font-size: 11px; cursor: pointer; font-family: var(--font-sans); transition: all var(--dur-fast) var(--ease); }
-.thread-action-btn:hover { background: var(--surface-1); color: var(--text); }
-.thread-action-btn.thread-action-danger:hover { background: rgba(220,38,38,0.08); color: var(--red); border-color: rgba(220,38,38,0.2); }
-
-/* === Agent call card (non-clickable status display) === */
-.agent-call-card { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
-.agent-call-icon { color: var(--text-2); display: flex; align-items: center; }
-.agent-call-desc { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
-.agent-call-status { font-size: 10px; font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--r-sm); }
-.agent-call-status.running { color: var(--accent); background: var(--accent-soft); }
-.agent-call-status.done { color: var(--green); background: rgba(34,197,94,0.08); }
-.agent-call-status.failed { color: var(--red); background: rgba(239,68,68,0.08); }
-
-/* === Ask-user selection buttons (platform parity) === */
-.ask-user-card { border-left: 3px solid var(--accent); }
-.ask-user-groups { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
-.ask-user-group { display: flex; flex-direction: column; gap: 6px; }
-.ask-user-question { font-size: 12px; font-weight: 600; color: var(--text-2); }
-.ask-user-options { display: flex; flex-wrap: wrap; gap: 6px; }
-.ask-user-option { padding: 4px 10px; font-size: 12px; font-family: var(--font-sans); color: var(--text-2); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
-.ask-user-option:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
-.ask-user-option.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
-.ask-user-option:disabled { opacity: 0.55; cursor: default; }
-.ask-user-option.selected:disabled { opacity: 0.8; }
-.ask-user-send { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; font-family: var(--font-sans); color: #fff; background: var(--accent); border: none; border-radius: var(--r-sm); cursor: pointer; align-self: flex-start; transition: background var(--dur-fast) var(--ease); }
-.ask-user-send:disabled { opacity: 0.4; cursor: default; }
-.ask-user-send:not(:disabled):hover { background: var(--accent-hover); }
-.ask-user-submitted { font-size: 11px; color: var(--text-muted); font-style: italic; }