claude-controller 0.1.2 → 0.2.0

package/web/static/styles.css

@@ -1,1922 +0,0 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-:root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --surface-hover: #222531;
-  --surface-active: #2a2d3a;
-  --border: #2e3140;
-  --border-light: #3a3d4a;
-  --text: #e4e6ed;
-  --text-secondary: #8b8fa3;
-  --text-muted: #5c5f73;
-  --accent: #6c8cff;
-  --accent-hover: #8aa4ff;
-  --accent-glow: rgba(108, 140, 255, 0.15);
-  --green: #34d399;
-  --green-dim: rgba(52, 211, 153, 0.15);
-  --red: #f87171;
-  --red-dim: rgba(248, 113, 113, 0.15);
-  --yellow: #fbbf24;
-  --yellow-dim: rgba(251, 191, 36, 0.15);
-  --blue: #60a5fa;
-  --blue-dim: rgba(96, 165, 250, 0.15);
-  --radius: 8px;
-  --radius-lg: 12px;
-  --font: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
-  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
-  --transition: 0.2s ease;
-  --shadow: 0 2px 8px rgba(0,0,0,0.3);
-}
-
-html { font-size: 14px; }
-
-body {
-  font-family: var(--font);
-  background: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
-
-/* ── Buttons ── */
-button {
-  font-family: var(--font);
-  cursor: pointer;
-  border: none;
-  outline: none;
-  transition: all var(--transition);
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 14px;
-  border-radius: var(--radius);
-  font-size: 0.82rem;
-  font-weight: 500;
-  background: var(--surface-hover);
-  color: var(--text-secondary);
-  border: 1px solid var(--border);
-}
-
-.btn:hover {
-  background: var(--surface-active);
-  color: var(--text);
-  border-color: var(--border-light);
-}
-
-.btn:active { transform: scale(0.97); }
-
-.btn-primary {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-}
-
-.btn-primary:hover {
-  background: var(--accent-hover);
-  border-color: var(--accent-hover);
-  box-shadow: 0 0 20px var(--accent-glow);
-}
-
-.btn-danger {
-  color: var(--red);
-}
-
-.btn-danger:hover {
-  background: var(--red-dim);
-  border-color: var(--red);
-}
-
-.btn-success {
-  color: var(--green);
-}
-
-.btn-success:hover {
-  background: var(--green-dim);
-  border-color: var(--green);
-}
-
-.btn-sm {
-  padding: 4px 10px;
-  font-size: 0.75rem;
-}
-
-.btn-icon {
-  padding: 7px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Context Toolbar ── */
-.ctx-toolbar-wrap {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.ctx-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.ctx-btn {
-  padding: 4px 10px;
-  border-radius: var(--radius);
-  font-size: 0.72rem;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  letter-spacing: 0.02em;
-  text-transform: lowercase;
-}
-
-.ctx-btn:hover {
-  background: var(--surface-hover);
-  color: var(--text-secondary);
-  border-color: var(--border);
-}
-
-.ctx-btn.active {
-  background: var(--accent-glow);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-.ctx-btn-x {
-  padding: 4px 6px;
-  border-radius: var(--radius);
-  font-size: 0.78rem;
-  font-weight: 500;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ctx-btn-x:hover {
-  background: var(--red-dim);
-  color: var(--red);
-  border-color: var(--red);
-}
-
-.ctx-session-label {
-  display: none;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-family: var(--font-mono);
-  background: var(--blue-dim);
-  color: var(--blue);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.6;
-  min-width: 0;
-}
-
-.ctx-session-label.visible {
-  display: inline;
-}
-
-.session-picker {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 4px;
-  width: 520px;
-  max-width: calc(100vw - 32px);
-  max-height: 420px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
-  z-index: 200;
-}
-
-.session-picker.open { display: flex; }
-
-.session-picker-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.session-picker-title {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.session-picker-search {
-  padding: 8px 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.session-picker-search input {
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 0.78rem;
-  font-family: var(--font);
-  outline: none;
-  transition: border-color var(--transition);
-}
-
-.session-picker-search input:focus {
-  border-color: var(--accent);
-}
-
-.session-picker-search input::placeholder {
-  color: var(--text-muted);
-}
-
-.session-picker-list {
-  overflow-y: auto;
-  flex: 1;
-}
-
-.session-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 10px 14px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--border);
-  transition: background var(--transition);
-}
-
-.session-item:hover { background: var(--surface-hover); }
-.session-item:last-child { border-bottom: none; }
-
-.session-item-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.session-item-status {
-  display: inline-block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.session-item-status.done { background: var(--green); }
-.session-item-status.failed { background: var(--red); }
-.session-item-status.running { background: var(--yellow); animation: pulse 1.5s infinite; }
-.session-item-status.unknown { background: var(--text-muted); }
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-
-.session-item-id {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  color: var(--accent);
-  flex-shrink: 0;
-}
-
-.session-item-slug {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-  font-style: italic;
-}
-
-.session-item-job {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.session-item-prompt {
-  font-size: 0.78rem;
-  color: var(--text);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-item-meta {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding-left: 15px;
-}
-
-.session-item-time {
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.session-item-cwd {
-  font-size: 0.65rem;
-  color: var(--text-muted);
-  font-family: var(--font-mono);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.session-item-cost {
-  font-size: 0.65rem;
-  color: var(--green);
-  font-family: var(--font-mono);
-  flex-shrink: 0;
-}
-
-.session-filter-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.session-filter-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 8px;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  font-size: 0.68rem;
-  font-family: var(--font);
-  cursor: pointer;
-  transition: all var(--transition);
-  white-space: nowrap;
-}
-
-.session-filter-toggle:hover { border-color: var(--accent); color: var(--text-secondary); }
-.session-filter-toggle.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
-
-.session-filter-project {
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.session-group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  background: var(--bg);
-  font-size: 0.68rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.session-group-header svg {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  opacity: 0.6;
-}
-
-.session-group-count {
-  font-weight: 400;
-  color: var(--text-muted);
-  margin-left: auto;
-}
-
-.session-empty {
-  padding: 24px 14px;
-  text-align: center;
-  font-size: 0.78rem;
-  color: var(--text-muted);
-}
-
-.session-empty-icon {
-  font-size: 1.5rem;
-  margin-bottom: 8px;
-  opacity: 0.5;
-}
-
-/* ── Layout ── */
-.layout {
-  min-height: 100vh;
-}
-
-.main {
-  padding: 8px 0;
-  overflow-x: hidden;
-}
-
-/* ── CWD badge ── */
-.cwd-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 500;
-  background: var(--accent-glow);
-  color: var(--accent);
-  margin-left: 8px;
-  max-width: 180px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-
-.cwd-badge:empty { display: none; }
-
-/* ── Directory Picker ── */
-.dir-picker {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.dir-picker-display {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: var(--radius);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  font-family: var(--font-mono);
-  min-height: 38px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all var(--transition);
-}
-
-.dir-picker-display:hover {
-  border-color: var(--border-light);
-  background: var(--surface);
-}
-
-.dir-picker-display.has-value {
-  color: var(--text);
-}
-
-.dir-picker-display .dir-icon {
-  flex-shrink: 0;
-  color: var(--text-muted);
-}
-
-.dir-picker-clear {
-  flex-shrink: 0;
-  padding: 4px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-  display: none;
-}
-
-.dir-picker-clear:hover {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-.dir-picker-clear.visible { display: inline-flex; }
-
-/* ── Recent Directory Chips ── */
-.recent-dirs {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-bottom: 10px;
-}
-
-.recent-dirs:empty { display: none; }
-
-.recent-dirs-label {
-  font-size: 0.72rem;
-  color: var(--text-muted);
-  font-weight: 500;
-  flex-shrink: 0;
-  margin-right: 2px;
-}
-
-.recent-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-  cursor: pointer;
-  transition: all var(--transition);
-  max-width: 200px;
-}
-
-.recent-chip:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-glow);
-}
-
-.recent-chip.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-glow);
-  font-weight: 500;
-}
-
-.recent-chip-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.recent-chip-remove {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  margin-left: 2px;
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  cursor: pointer;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition);
-}
-
-.recent-chip-remove:hover {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-/* ── Inline Directory Browser Panel ── */
-.dir-browser-panel {
-  display: none;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-  margin-top: 8px;
-  overflow: hidden;
-  animation: panel-slide 0.15s ease-out;
-}
-
-.dir-browser-panel.open { display: block; }
-
-@keyframes panel-slide {
-  from { opacity: 0; transform: translateY(-4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.dir-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-}
-
-.dir-modal-title {
-  font-size: 0.82rem;
-  font-weight: 600;
-  color: var(--text);
-}
-
-.dir-modal-close {
-  padding: 4px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-}
-
-.dir-modal-close:hover { background: var(--surface-active); color: var(--text); }
-
-.dir-modal-path {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 12px;
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.dir-modal-path .breadcrumb-seg {
-  padding: 2px 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--accent);
-  transition: background var(--transition);
-}
-
-.dir-modal-path .breadcrumb-seg:hover {
-  background: var(--accent-glow);
-}
-
-.dir-modal-path .breadcrumb-sep {
-  color: var(--text-muted);
-}
-
-.dir-modal-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 4px 0;
-  max-height: 240px;
-}
-
-.dir-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  cursor: pointer;
-  font-size: 0.85rem;
-  color: var(--text);
-  transition: background var(--transition);
-}
-
-.dir-item:hover { background: var(--surface-hover); }
-
-.dir-item-icon {
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  color: var(--text-muted);
-}
-
-.dir-item-icon.is-dir { color: var(--yellow); }
-.dir-item-icon.is-parent { color: var(--accent); }
-
-.dir-item-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dir-item-name.is-dir { font-weight: 500; }
-
-.dir-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 12px;
-  border-top: 1px solid var(--border);
-  gap: 8px;
-}
-
-.dir-modal-current {
-  flex: 1;
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  color: var(--text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dir-modal-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px;
-  color: var(--text-muted);
-  font-size: 0.85rem;
-  gap: 8px;
-}
-
-/* ── Cards / Sections ── */
-.section {
-  margin-bottom: 24px;
-  animation: fadeIn 0.3s ease forwards;
-  animation-iteration-count: 1;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
-  overflow: visible;
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 18px;
-  border-bottom: 1px solid var(--border);
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.card-title {
-  font-size: 0.92rem;
-  font-weight: 600;
-  color: var(--text);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.card-title svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
-
-.card-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.card-body { padding: 18px; }
-
-/* ── Send Task Form ── */
-.form-group { margin-bottom: 14px; }
-
-.form-label {
-  display: flex;
-  align-items: center;
-  font-size: 0.78rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-}
-
-textarea, input[type="text"] {
-  width: 100%;
-  padding: 10px 14px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font);
-  font-size: 0.85rem;
-  line-height: 1.6;
-  resize: vertical;
-  transition: border-color var(--transition);
-}
-
-textarea:focus, input[type="text"]:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-textarea { min-height: unset; position: relative; }
-
-/* ── Prompt Input + Mirror (color-only highlight, no text replacement) ── */
-#promptInput {
-  color: transparent;
-  caret-color: var(--text);
-  padding-right: 44px;
-}
-
-#promptInput::selection {
-  background: rgba(108, 140, 255, 0.3);
-  color: transparent;
-}
-
-.prompt-mirror {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  padding: 10px 14px;
-  padding-right: 44px;
-  font-family: var(--font);
-  font-size: 0.85rem;
-  line-height: 1.6;
-  color: var(--text);
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.prompt-at-ref {
-  color: var(--green);
-  font-weight: 500;
-}
-
-/* ── Image Attachments ── */
-.prompt-wrapper {
-  position: relative;
-}
-
-.prompt-wrapper.drag-over textarea {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-
-.drop-overlay {
-  display: none;
-  position: absolute;
-  inset: 0;
-  background: rgba(108, 140, 255, 0.08);
-  border: 2px dashed var(--accent);
-  border-radius: var(--radius);
-  z-index: 10;
-  pointer-events: none;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--accent);
-  gap: 8px;
-}
-
-.prompt-wrapper.drag-over .drop-overlay {
-  display: flex;
-}
-
-.image-previews {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.image-previews:empty { display: none; }
-
-.img-thumb {
-  position: relative;
-  width: 72px;
-  height: 72px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  overflow: hidden;
-  background: var(--bg);
-  flex-shrink: 0;
-  animation: fadeIn 0.2s ease;
-}
-
-.img-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  cursor: pointer;
-}
-
-.img-thumb .img-remove {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.7);
-  color: #fff;
-  font-size: 11px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-  border: none;
-  padding: 0;
-  line-height: 1;
-}
-
-.img-thumb:hover .img-remove {
-  opacity: 1;
-}
-
-.img-thumb.uploading {
-  opacity: 0.5;
-}
-
-.img-thumb.uploading::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,0.3);
-}
-
-.img-count-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  background: var(--accent-glow);
-  color: var(--accent);
-  margin-left: 8px;
-}
-
-.img-count-badge:empty { display: none; }
-
-/* ── File Attachments (non-image) ── */
-.file-thumb {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px 6px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  max-width: 200px;
-  animation: fadeIn 0.2s ease;
-  flex-shrink: 0;
-}
-.file-thumb .file-icon {
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  background: var(--surface-active);
-  color: var(--text-muted);
-  flex-shrink: 0;
-  font-size: 0.6rem;
-  font-weight: 700;
-  font-family: var(--font-mono);
-  text-transform: uppercase;
-  letter-spacing: -0.02em;
-}
-.file-thumb .file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  overflow: hidden;
-  min-width: 0;
-}
-.file-thumb .file-name {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.file-thumb .file-size {
-  font-size: 0.65rem;
-  color: var(--text-muted);
-}
-.file-thumb .file-remove {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: rgba(0,0,0,0.7);
-  color: #fff;
-  font-size: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-  border: none;
-  padding: 0;
-  line-height: 1;
-}
-.file-thumb:hover .file-remove { opacity: 1; }
-.file-thumb.uploading { opacity: 0.5; }
-
-/* ── Attach Button (inside prompt-wrapper) ── */
-.attach-float-btn {
-  position: absolute;
-  bottom: 12px;
-  right: 10px;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: var(--surface-hover);
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all var(--transition);
-  z-index: 5;
-}
-.attach-float-btn:hover {
-  background: var(--surface-active);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-textarea::placeholder, input::placeholder {
-  color: var(--text-muted);
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-/* ── Job Table ── */
-.table-wrap { overflow-x: hidden; }
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.82rem;
-  table-layout: fixed;
-}
-
-th {
-  text-align: left;
-  padding: 10px 14px;
-  font-weight: 600;
-  font-size: 0.72rem;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-muted);
-  background: var(--bg);
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-}
-
-td {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-secondary);
-  vertical-align: top;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-tr:hover td { background: var(--surface-hover); }
-tr { cursor: pointer; transition: background var(--transition); }
-thead tr { cursor: default; }
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 9px;
-  border-radius: 20px;
-  font-size: 0.72rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.badge-running {
-  background: var(--blue-dim);
-  color: var(--blue);
-}
-
-.badge-running::before {
-  content: '';
-  width: 6px; height: 6px;
-  border-radius: 50%;
-  background: var(--blue);
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.badge-done {
-  background: var(--green-dim);
-  color: var(--green);
-}
-
-.badge-failed {
-  background: var(--red-dim);
-  color: var(--red);
-}
-
-.badge-pending {
-  background: var(--yellow-dim);
-  color: var(--yellow);
-}
-
-.job-id {
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  color: var(--accent);
-}
-
-.job-cwd {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.job-session {
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  color: var(--text-muted);
-}
-.job-session.clickable {
-  color: var(--accent);
-  cursor: pointer;
-  border-radius: 3px;
-  transition: background var(--transition);
-}
-.job-session.clickable:hover {
-  text-decoration: underline;
-  background: var(--accent-glow);
-}
-
-.job-time {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-
-.expand-row td {
-  padding: 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.expand-content {
-  padding: 14px 18px;
-  background: var(--bg);
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  line-height: 1.7;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 300px;
-  overflow-y: auto;
-  animation: slideDown 0.2s ease;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; max-height: 0; }
-  to { opacity: 1; max-height: 300px; }
-}
-
-.empty-state {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--text-muted);
-  font-size: 0.85rem;
-}
-
-.empty-state svg {
-  width: 40px;
-  height: 40px;
-  margin-bottom: 12px;
-  opacity: 0.3;
-}
-
-/* ── Stream Panel ── */
-.stream-panel {
-  background: var(--bg);
-  border-top: 1px solid var(--border);
-  animation: streamSlideDown 0.25s ease;
-}
-
-@keyframes streamSlideDown {
-  from { opacity: 0; max-height: 0; }
-  to { opacity: 1; max-height: 600px; }
-}
-
-
-.stream-spinner {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  border: 2px solid rgba(96, 165, 250, 0.25);
-  border-top-color: var(--blue);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.stream-pulse {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.7rem;
-  color: var(--blue);
-  font-weight: 500;
-}
-
-.stream-pulse-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--blue);
-  animation: streamPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes streamPulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.3; transform: scale(0.7); }
-}
-
-.stream-content {
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 14px 18px;
-  background: #080a0e;
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  line-height: 1.7;
-  scroll-behavior: smooth;
-}
-
-.stream-content::-webkit-scrollbar-thumb { background: var(--border-light); }
-
-.stream-event {
-  padding: 3px 0;
-  word-break: break-word;
-}
-
-.stream-event + .stream-event {
-  margin-top: 2px;
-}
-
-.stream-event-text {
-  color: #e4e6ed;
-  white-space: pre-wrap;
-}
-
-.stream-event-tool {
-  color: var(--yellow);
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 4px 0;
-}
-
-.stream-tool-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--yellow-dim);
-  color: var(--yellow);
-  font-size: 0.7rem;
-  font-weight: 600;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.stream-tool-badge::before {
-  content: '>';
-  opacity: 0.5;
-}
-
-.stream-tool-input {
-  color: #d4d4d4;
-  white-space: pre-wrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.stream-event-result {
-  color: var(--green);
-  padding: 6px 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.stream-result-icon {
-  color: var(--green);
-  flex-shrink: 0;
-  font-weight: 700;
-}
-
-.stream-result-text {
-  white-space: pre-wrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.stream-event-error {
-  color: var(--red);
-  padding: 4px 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.stream-error-icon {
-  color: var(--red);
-  flex-shrink: 0;
-  font-weight: 700;
-}
-
-.stream-error-text {
-  white-space: pre-wrap;
-  flex: 1;
-  min-width: 0;
-}
-
-.stream-empty {
-  color: var(--text-muted);
-  text-align: center;
-  padding: 24px;
-  font-size: 0.8rem;
-}
-
-.stream-done-banner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 8px 18px;
-  background: var(--green-dim);
-  color: var(--green);
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-top: 1px solid rgba(52, 211, 153, 0.2);
-}
-
-.stream-done-banner.failed {
-  background: var(--red-dim);
-  color: var(--red);
-  border-top-color: rgba(248, 113, 113, 0.2);
-}
-
-/* ── Stream Action Buttons ── */
-.stream-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 18px;
-  border-top: 1px solid var(--border);
-  background: var(--surface);
-}
-
-.stream-actions .btn svg { flex-shrink: 0; }
-
-/* ── Delete Button in Job Row ── */
-.btn-delete-job {
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  font-size: 0.72rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: all var(--transition);
-}
-
-.btn-delete-job:hover {
-  background: var(--red-dim);
-  color: var(--red);
-  border-color: var(--red);
-}
-
-/* ── Retry Job Button in Job Row ── */
-.btn-retry-job {
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  font-size: 0.72rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: all var(--transition);
-}
-
-.btn-retry-job:hover {
-  background: var(--yellow-dim);
-  color: var(--yellow);
-  border-color: var(--yellow);
-}
-
-/* ── Continue Session Button in Job Row ── */
-.btn-continue-job {
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  font-size: 0.72rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: all var(--transition);
-}
-
-.btn-continue-job:hover {
-  background: var(--accent-glow);
-  color: var(--accent);
-  border-color: var(--accent);
-}
-
-/* ── Fork Session Button in Job Row ── */
-.btn-fork-job {
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--text-muted);
-  border: 1px solid transparent;
-  font-size: 0.72rem;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: all var(--transition);
-}
-
-.btn-fork-job:hover {
-  background: var(--yellow-dim);
-  color: var(--yellow);
-  border-color: var(--yellow);
-}
-
-/* ── Follow-up Input in Stream Panel ── */
-.stream-followup {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
-  border-top: 1px solid var(--border);
-  background: var(--bg);
-}
-
-.stream-followup-label {
-  font-size: 0.7rem;
-  color: var(--accent);
-  font-weight: 600;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.followup-input-wrap {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-}
-
-.followup-input {
-  flex: 1;
-  padding: 6px 10px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text);
-  font-size: 0.78rem;
-  font-family: var(--font-mono);
-  outline: none;
-  transition: border-color var(--transition);
-}
-
-.followup-input:focus {
-  border-color: var(--accent);
-}
-
-.followup-input::placeholder {
-  color: var(--text-muted);
-  font-size: 0.72rem;
-}
-
-.followup-previews {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 0 18px;
-}
-
-.followup-previews:empty { display: none; }
-
-.followup-file-chip {
-  display: inline-block;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: 0.68rem;
-  font-family: var(--font-mono);
-  background: var(--green-dim);
-  color: var(--green);
-  white-space: nowrap;
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* ── Copy Success Animation ── */
-.btn-copied {
-  color: var(--green) !important;
-  border-color: var(--green) !important;
-  background: var(--green-dim) !important;
-}
-
-/* ── Toast ── */
-.toast-container {
-  position: fixed;
-  top: 70px;
-  right: 24px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.toast {
-  padding: 10px 16px;
-  border-radius: var(--radius);
-  font-size: 0.82rem;
-  font-weight: 500;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.toast.success { border-color: var(--green); color: var(--green); }
-.toast.error { border-color: var(--red); color: var(--red); }
-
-@keyframes toastIn {
-  from { opacity: 0; transform: translateX(20px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes toastOut {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(20px); }
-}
-
-/* ── Spinner ── */
-.spinner {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* ── Responsive ── */
-/* ── @image Chip in prompt cell ── */
-.prompt-img-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 1px 7px;
-  border-radius: 4px;
-  background: var(--blue-dim);
-  color: var(--blue);
-  font-size: 0.7rem;
-  font-weight: 600;
-  font-family: var(--font-mono);
-  white-space: nowrap;
-  vertical-align: baseline;
-}
-
-.prompt-img-chip svg {
-  width: 10px;
-  height: 10px;
-  flex-shrink: 0;
-}
-
-@media (max-width: 900px) {
-  th, td { padding: 10px 10px; font-size: 0.78rem; }
-}
-
-@media (max-width: 600px) {
-  .main { padding: 4px 0; }
-  .card-body { padding: 14px; }
-  th, td { padding: 8px 6px; font-size: 0.74rem; }
-  .stream-content { max-height: 300px; }
-}
-
-/* ── Settings Panel ── */
-.settings-fab {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 300;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-  transition: all var(--transition);
-}
-.settings-fab:hover {
-  background: var(--surface-hover);
-  color: var(--accent);
-  border-color: var(--accent);
-  transform: rotate(30deg);
-}
-
-.settings-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 400;
-  background: rgba(0,0,0,0.5);
-  backdrop-filter: blur(4px);
-  animation: fadeIn 0.2s ease;
-}
-.settings-overlay.open { display: flex; align-items: center; justify-content: center; }
-
-.settings-panel {
-  width: 520px;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: panel-slide 0.2s ease-out;
-}
-
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border);
-}
-.settings-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.settings-title svg { width: 18px; height: 18px; color: var(--accent); }
-.settings-close {
-  padding: 6px;
-  border-radius: var(--radius);
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  cursor: pointer;
-}
-.settings-close:hover { background: var(--surface-active); color: var(--text); }
-
-.settings-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.settings-section {
-  margin-bottom: 20px;
-}
-.settings-section-title {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  margin-bottom: 12px;
-}
-
-.setting-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--border);
-  gap: 16px;
-}
-.setting-row:last-child { border-bottom: none; }
-
-.setting-info { flex: 1; min-width: 0; }
-.setting-label {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--text);
-  margin-bottom: 2px;
-}
-.setting-desc {
-  font-size: 0.72rem;
-  color: var(--text-muted);
-  line-height: 1.4;
-}
-
-.setting-control { flex-shrink: 0; }
-
-/* Toggle Switch */
-.toggle {
-  position: relative;
-  width: 40px;
-  height: 22px;
-  cursor: pointer;
-}
-.toggle input { display: none; }
-.toggle-track {
-  position: absolute;
-  inset: 0;
-  background: var(--border);
-  border-radius: 11px;
-  transition: background var(--transition);
-}
-.toggle input:checked + .toggle-track { background: var(--accent); }
-.toggle-thumb {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #fff;
-  transition: transform var(--transition);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
-}
-.toggle input:checked ~ .toggle-thumb { transform: translateX(18px); }
-
-.setting-input {
-  width: 100%;
-  padding: 7px 10px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: 0.8rem;
-  transition: border-color var(--transition);
-}
-.setting-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-glow);
-}
-.setting-input-sm { width: 80px; text-align: center; }
-
-.settings-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 14px 20px;
-  border-top: 1px solid var(--border);
-}
-
-.setting-restart-hint {
-  font-size: 0.7rem;
-  color: var(--yellow);
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* ── Connection Modal ── */
-.conn-message {
-  font-size: 0.8rem;
-  color: var(--red);
-  background: var(--red-dim);
-  border: 1px solid rgba(248, 113, 113, 0.25);
-  border-radius: var(--radius);
-  padding: 8px 12px;
-}
-
-/* ── Running Job Preview Row ── */
-.preview-row {
-  cursor: default !important;
-}
-.preview-row,
-.preview-row:hover {
-  background: transparent !important;
-}
-.preview-row td {
-  padding: 0 !important;
-  border-bottom: 1px solid var(--border) !important;
-}
-
-.job-preview {
-  padding: 6px 14px;
-  background: var(--bg);
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  line-height: 1.7;
-  color: var(--text-muted);
-  max-height: calc(0.78rem * 1.7 * 2 + 6px + 6px);
-  overflow: hidden;
-  box-sizing: content-box;
-}
-.preview-lines {
-  min-width: 0;
-  overflow: hidden;
-}
-.preview-line {
-  padding: 2px 0;
-  word-break: break-word;
-}
-.preview-line + .preview-line {
-  margin-top: 1px;
-}
-.preview-tool {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--yellow-dim);
-  color: var(--yellow);
-  font-size: 0.7rem;
-  font-weight: 600;
-  white-space: nowrap;
-  margin-right: 4px;
-}
-.preview-tool::before {
-  content: '>';
-  opacity: 0.5;
-}
-.preview-result {
-  color: var(--green);
-}
-.preview-result::before {
-  content: '✓ ';
-  font-weight: 700;
-}
-.preview-text {
-  color: var(--text-muted);
-}