/* ============================================================
   terminal-panel.css
   Agent Terminal Panel — ported from app-agent/static/terminal.html
   Scoped under #terminalPanel, all classes prefixed terminal-
   Variables remapped to TalkStock --color-* system
   ============================================================ */

#terminalPanel {
  /* Local variable aliases */
  --t-bg:      var(--color-bg-primary,    #1c1c1e);
  --t-surface: var(--color-bg-secondary,  #2c2c2e);
  --t-border:  var(--color-border,        #3a3a3c);
  --t-fg:      var(--color-text-primary,  #cccccc);
  --t-dim:     var(--color-text-secondary,#636366);
  --t-bright:  var(--color-text-bright,   #f5f5f7);
  --t-green:   var(--color-success,       #32d74b);
  --t-cyan:    var(--color-accent,        #64d2ff);
  --t-red:     var(--color-danger,        #ff453a);
  --t-yellow:  var(--color-warning,       #ffd60a);
  --t-blue:    #0a84ff;
  /* === Spacing tokens (added 2026-04-18) === */
  --t-gap-xs: 6px;
  --t-gap-sm: 10px;
  --t-gap-md: 16px;
  --t-gap-lg: 24px;
  --t-gap-xl: 32px;
  /* === Market-aware up/down colours (defaults: US/JP convention — green up, red down) === */
  --color-up:   #32d74b;
  --color-down: #ff453a;
  /* === Typography split === */
  --t-sans: -apple-system, 'SF Pro Text', 'Inter', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --t-font:    'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

  /* === Claude Code-style palette (cc-*) — new UI === */
  --cc-bg:            var(--t-bg);
  --cc-fg:            #f5f5f7;              /* main text — near-white on dark */
  --cc-dim:           #a8a29e;              /* secondary — still readable */
  --cc-bright:        #ffffff;              /* emphasis — pure white headings */
  --cc-cyan:          #7dd3fc;              /* brighter cyan for better contrast */
  --cc-success:       #4ade80;              /* brighter green for ✓ */
  --cc-error:         #f87171;              /* brighter red for ✗ */
  --cc-warning:       #fbbf24;              /* brighter amber for ⚠ */
  --cc-suggestion:    #a5b4fc;              /* brighter indigo */
  --cc-thinking-from: rgb(220, 220, 220);   /* shimmer brighter on dark */
  --cc-thinking-to:   rgb(255, 255, 255);

  font-family: var(--t-font);
  background:  var(--t-bg);
  color:       var(--t-fg);
  font-size:   13px;
  line-height: 1.6;
  flex-direction: column;
  overflow:    hidden;
}
/* TW/CN: 紅漲綠跌（台股/A 股慣例） */
#terminalPanel[data-market="TW"],
#terminalPanel[data-market="CN"] {
  --color-up:   #ff453a;
  --color-down: #32d74b;
}
/* US/JP: 綠漲紅跌（預設，已由 :root var 涵蓋；明確標示以備未來覆寫） */
#terminalPanel[data-market="US"],
#terminalPanel[data-market="JP"] {
  --color-up:   #32d74b;
  --color-down: #ff453a;
}
/* Only show as flex when active — #id specificity must not override .panel { display:none } */
#terminalPanel.active {
  display: flex;
}

/* ── Output Area ── */
#terminalPanel .terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  scroll-behavior: smooth;
}
#terminalPanel .terminal-output::-webkit-scrollbar { width: 6px; }
#terminalPanel .terminal-output::-webkit-scrollbar-track { background: transparent; }
#terminalPanel .terminal-output::-webkit-scrollbar-thumb {
  background: var(--t-border);
  border-radius: 3px;
}

/* ── Welcome Screen ── */
#terminalPanel .terminal-welcome {
  margin-bottom: var(--t-gap-md);
  padding-bottom: var(--t-gap-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#terminalPanel .terminal-welcome-ascii {
  font-family: var(--t-font);
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 var(--t-gap-sm) 0;
  white-space: pre;
  user-select: none;
  opacity: 0;
  animation: terminal-welcome-fadein 0.6s ease-out 0.1s forwards;
}
@keyframes terminal-welcome-fadein { to { opacity: 1; } }

/* Logo gradient fills + one-time shimmer (dual-layer background) */
#terminalPanel .terminal-welcome-talk {
  background:
    linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.95) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #6fe8a3 0%, #2bb868 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(50, 215, 75, 0.25));
  animation: terminal-logo-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
#terminalPanel .terminal-welcome-stock {
  background:
    linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.95) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #9be7ff 0%, #3fb8e8 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(100, 210, 255, 0.25));
  animation: terminal-logo-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards;
}
#terminalPanel .terminal-welcome-sep   { color: rgba(255, 255, 255, 0.18); }
#terminalPanel .terminal-welcome-ai {
  background:
    linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.95) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #ffe27a 0%, #e8b73a 100%) 0 0 / 100% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  filter: drop-shadow(0 0 10px rgba(255, 214, 10, 0.3));
  animation: terminal-logo-shimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
@keyframes terminal-logo-shimmer {
  0%   { background-position: 100% 0, 0 0; }
  100% { background-position: -100% 0, 0 0; }
}
/* Fallback for browsers without background-clip: text */
@supports not (background-clip: text) {
  #terminalPanel .terminal-welcome-talk  { color: #32d74b; background: none !important; -webkit-text-fill-color: initial; animation: none; filter: none; }
  #terminalPanel .terminal-welcome-stock { color: #64d2ff; background: none !important; -webkit-text-fill-color: initial; animation: none; filter: none; }
  #terminalPanel .terminal-welcome-ai    { color: #ffd60a; background: none !important; -webkit-text-fill-color: initial; animation: none; filter: none; }
}

/* Status chips (replaces plain-text status line) */
#terminalPanel .terminal-welcome-chips {
  display: flex;
  gap: 8px;
  margin-top: var(--t-gap-xs);
  margin-bottom: var(--t-gap-xs);
  flex-wrap: wrap;
  font-family: var(--t-font);
}
#terminalPanel .terminal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
}
#terminalPanel .terminal-chip-ok     { color:#32d74b; background:rgba(50,215,75,0.08); border:1px solid rgba(50,215,75,0.18); }
#terminalPanel .terminal-chip-info   { color:#64d2ff; background:rgba(100,210,255,0.08); border:1px solid rgba(100,210,255,0.18); }
#terminalPanel .terminal-chip-market { color:#ffd60a; background:rgba(255,214,10,0.08); border:1px solid rgba(255,214,10,0.18); }

#terminalPanel .terminal-welcome-session {
  color: var(--t-dim);
  font-size: 11px;
  margin-top: var(--t-gap-xs);
  font-family: var(--t-font);
}

/* ── Turn Container ── */
#terminalPanel .terminal-turn {
  padding-left: 0;
}
#terminalPanel .terminal-turn-separator {
  border-top: 1px solid var(--t-border);
  margin: 16px 0 12px;
}
/* Indent response content within a turn (not the user query) */
#terminalPanel .terminal-turn .terminal-msg-response,
#terminalPanel .terminal-turn .terminal-thinking,
#terminalPanel .terminal-turn .terminal-suggestions-bar,
#terminalPanel .terminal-turn .terminal-disclaimer-inline {
  margin-left: 16px;
}
/* Result tables: indent to align with response-body text (dot + gap offset) */
#terminalPanel .terminal-turn .terminal-msg:has(.terminal-table),
#terminalPanel .terminal-turn .terminal-msg:has(.terminal-result-meta) {
  margin-left: 38px;
}
/* User query: larger weight to anchor the turn */
#terminalPanel .terminal-turn .terminal-msg-user {
  font-size: 14px;
  margin-bottom: 10px;
}

/* ── Message Blocks ── */
#terminalPanel .terminal-msg { margin-bottom: 8px; }
#terminalPanel .terminal-msg-user { color: var(--t-bright); }
#terminalPanel .terminal-msg-user .terminal-prompt { color: var(--t-green); font-weight: 700; }
#terminalPanel .terminal-msg-text {
  color: var(--t-fg);
  white-space: pre-wrap;
  word-break: break-word;
}
#terminalPanel .terminal-msg-text strong { color: var(--t-bright); font-weight: 700; }
#terminalPanel .terminal-msg-error { color: var(--t-red); }
#terminalPanel .terminal-msg-system { color: var(--t-dim); font-size: 12px; }

/* ── Tool Events ── */
#terminalPanel .terminal-tool-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
}
#terminalPanel .terminal-tool-row:hover { opacity: 0.85; }
#terminalPanel .terminal-tool-icon     { color: var(--t-cyan); }
#terminalPanel .terminal-tool-icon-ok  { color: var(--t-green); }
#terminalPanel .terminal-tool-icon-err { color: var(--t-red); }
#terminalPanel .terminal-tool-name    { color: var(--t-cyan); font-weight: 600; }
#terminalPanel .terminal-tool-summary { color: var(--t-dim); }
#terminalPanel .terminal-tool-elapsed { color: var(--t-dim); font-size: 11px; }
#terminalPanel .terminal-tool-expand-hint {
  color: var(--t-dim);
  margin-left: auto;
  font-size: 11px;
}

#terminalPanel .terminal-tool-detail {
  display: none;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 4px 0 6px 18px;
  font-size: 12px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  color: var(--t-fg);
}
/* JSON mode keeps pre-wrap; table mode uses default */
#terminalPanel .terminal-tool-detail:not(:has(.terminal-table)) {
  white-space: pre-wrap;
  word-break: break-all;
}
#terminalPanel .terminal-tool-detail.open { display: block; }
#terminalPanel .terminal-tool-detail .terminal-json-key  { color: var(--t-cyan); }
#terminalPanel .terminal-tool-detail .terminal-json-str  { color: var(--t-green); }
#terminalPanel .terminal-tool-detail .terminal-json-num  { color: var(--t-yellow); }
#terminalPanel .terminal-tool-detail .terminal-json-bool { color: var(--t-yellow); }
#terminalPanel .terminal-tool-detail .terminal-json-null { color: var(--t-dim); }

/* ── Result Meta Row (above each result table) ── */
#terminalPanel .terminal-result-meta {
  color: var(--t-dim);
  font-size: 12px;
  margin: var(--t-gap-sm) 0 var(--t-gap-xs);
  font-family: var(--t-font);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#terminalPanel .terminal-result-meta .meta-count {
  color: var(--t-cyan);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#terminalPanel .terminal-result-meta .meta-filters { color: var(--t-fg); }
#terminalPanel .terminal-result-meta .meta-sep    { color: var(--t-border); }
#terminalPanel .terminal-result-meta .meta-time   { color: var(--t-dim); }

/* ── Terminal Table ── */
#terminalPanel .terminal-table {
  border-collapse: collapse;
  font-size: 12.5px;
  margin: var(--t-gap-sm) 0 var(--t-gap-xs);
  width: auto;
}
#terminalPanel .terminal-table th,
#terminalPanel .terminal-table td {
  padding: 7px 12px;
  white-space: nowrap;
  border: 0;
}
#terminalPanel .terminal-table thead th {
  color: var(--t-dim);
  font-weight: 500;
  background: transparent;
  text-align: left;
  border-bottom: 1px solid var(--t-border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#terminalPanel .terminal-table th.terminal-sortable {
  cursor: pointer;
  user-select: none;
}
#terminalPanel .terminal-table th.terminal-sortable:hover {
  text-decoration: none;
  color: var(--t-cyan);
}
#terminalPanel .terminal-table th .terminal-sort-arrow {
  margin-left: 2px;
  font-size: 10px;
}
#terminalPanel .terminal-table th .terminal-sort-arrow.terminal-hint {
  color: var(--t-border);
}
#terminalPanel .terminal-table th.terminal-sortable:hover .terminal-sort-arrow.terminal-hint {
  color: var(--t-dim);
}
#terminalPanel .terminal-table th .terminal-sort-arrow.active {
  color: var(--t-cyan);
}
#terminalPanel .terminal-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}
#terminalPanel .terminal-table tbody tr:hover td {
  background: rgba(100, 210, 255, 0.06);
}
#terminalPanel .terminal-table td {
  color: var(--t-fg);
  transition: background 0.15s ease;
}
#terminalPanel .terminal-table td.terminal-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Market-aware up/down cell colouring (add class `up` or `down` to td) */
#terminalPanel .terminal-table td.up   { color: var(--color-up); }
#terminalPanel .terminal-table td.down { color: var(--color-down); }
/* Stock code accent */
#terminalPanel .terminal-table td.code { color: var(--t-cyan); }
#terminalPanel .terminal-table .terminal-meta-row {
  color: var(--t-dim);
  font-size: 11px;
  margin-bottom: 4px;
}
#terminalPanel .terminal-table-footer {
  color: var(--t-dim);
  font-size: 11px;
  margin-top: 2px;
}

/* ── Table Pagination ── */
#terminalPanel .terminal-pager {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  font-size: 12px;
  font-family: var(--t-font);
  user-select: none;
}
#terminalPanel .terminal-pager .terminal-pg-btn {
  background: transparent;
  border: 1px solid var(--t-border);
  color: var(--t-dim);
  padding: 1px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--t-font);
  font-size: 12px;
  line-height: 1.4;
}
#terminalPanel .terminal-pager .terminal-pg-btn:hover {
  color: var(--t-bright);
  border-color: var(--t-cyan);
}
#terminalPanel .terminal-pager .terminal-pg-btn.active {
  color: var(--t-cyan);
  border-color: var(--t-cyan);
}
#terminalPanel .terminal-pager .terminal-pg-btn:disabled {
  opacity: 0.3;
  cursor: default;
  border-color: var(--t-border);
}
#terminalPanel .terminal-pager .terminal-pg-info {
  color: var(--t-dim);
  font-size: 11px;
  margin-left: 8px;
}

/* ── Thinking Spinner ── */
#terminalPanel .terminal-thinking {
  font-size: 13px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#terminalPanel .terminal-thinking-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    transparent 90deg,
    var(--t-cyan) 210deg,
    rgba(100, 210, 255, 0.4) 300deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #fff calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #fff calc(100% - 2px));
  animation: terminal-thinking-spin 1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(100, 210, 255, 0.6));
  flex-shrink: 0;
}
@keyframes terminal-thinking-spin {
  to { transform: rotate(360deg); }
}
#terminalPanel .terminal-thinking-text {
  font-weight: 600;
  background:
    linear-gradient(90deg,
      transparent 42%, rgba(220, 245, 255, 0.9) 48%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(220, 245, 255, 0.9) 52%, transparent 58%),
    linear-gradient(90deg,
      transparent 20%, rgba(100, 210, 255, 0.15) 35%,
      rgba(140, 225, 255, 0.3) 50%,
      rgba(100, 210, 255, 0.15) 65%, transparent 80%),
    linear-gradient(90deg, var(--t-cyan), var(--t-cyan));
  background-size: 500% 100%, 300% 100%, 100% 100%;
  background-position: 120% center, 95% center, 0% center;
  -webkit-background-clip: text, text, text;
  background-clip: text, text, text;
  -webkit-text-fill-color: transparent;
  animation: terminal-thinking-shimmer 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes terminal-thinking-shimmer {
  0%   { background-position: 120% center, 95% center, 0% center; }
  35%  { background-position: -20% center, 50% center, 0% center; }
  55%  { background-position:  80% center, -5% center, 0% center; }
  80%  { background-position: 120% center, 40% center, 0% center; }
  100% { background-position: 120% center, 95% center, 0% center; }
}

/* ── Bullet Response ── */
#terminalPanel .terminal-msg-response {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
#terminalPanel .terminal-response-dot {
  color: var(--t-cyan);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.6;
}
/* ── Result Disclaimer ── */
#terminalPanel .terminal-disclaimer {
  color: var(--t-dim);
  font-size: 11px;
  margin-top: 4px;
}

/* ── Input Area ── */
#terminalPanel .terminal-input-area {
  background: transparent;
  border-top: 1px solid var(--color-text-secondary, rgba(255, 255, 255, 0.25));
  border-bottom: 1px solid var(--color-text-secondary, rgba(255, 255, 255, 0.25));
  padding: 12px 16px;
  position: relative; /* anchor for #terminalSlashDropdown (position:absolute; bottom:100%) */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#terminalPanel .terminal-input-prompt {
  color: var(--t-green);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  animation: terminal-blink 1s step-end infinite;
}
@keyframes terminal-blink {
  50% { opacity: 0; }
}
#terminalPanel .terminal-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--t-bright);
  font-family: var(--t-font);
  font-size: 14px;
  line-height: 1.8;
  caret-color: var(--t-green);
}
#terminalPanel .terminal-input-field:disabled { opacity: 0.4; }
#terminalPanel .terminal-input-disclaimer {
  background: var(--t-bg);
  color: var(--t-dim);
  font-size: 11px;
  text-align: center;
  padding: 4px 0;
  flex-shrink: 0;
}

/* ── Suggestion Options ── */
#terminalPanel .terminal-suggestion-option {
  display: inline-block;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 4px;
  padding: 4px 12px;
  margin: 3px 4px 3px 0;
  color: var(--t-cyan);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
#terminalPanel .terminal-suggestion-option:hover {
  border-color: var(--t-cyan);
  background: #1a3a4a;
}
#terminalPanel .terminal-suggestion-label {
  color: var(--t-green);
  font-weight: 700;
  margin-right: 4px;
}
#terminalPanel .terminal-suggestions-bar { margin-top: 6px; }

/* ── Pulse animation for active tools ── */
@keyframes terminal-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
#terminalPanel .terminal-tool-active {
  animation: terminal-pulse 1.2s ease-in-out infinite;
}

/* ── Enter animation (added 2026-04-18) ──
 * Turn-level opacity fade only. Row-level stagger removed because streaming
 * response text causes frequent style re-evaluation on ancestor innerHTML
 * mutations, which could re-trigger delayed row animations and leave rows
 * stuck at opacity 0 (invisible table). Turn-level fade is safe because
 * the turn element itself is stable during streaming.
 */
@keyframes terminal-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#terminalPanel .terminal-turn {
  animation: terminal-enter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Reduced-motion override (kill animations but keep layout) */
@media (prefers-reduced-motion: reduce) {
  #terminalPanel *,
  #terminalPanel *::before,
  #terminalPanel *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0 !important;
    transition-duration: 0.001ms !important;
  }
  /* with `both` fill-mode and opacity-only keyframes, reduced-motion auto-settles */
}

/* ── Status Line (between output and input) ── */
#terminalPanel .terminal-status-line {
  height: 26px;
  display: flex;
  align-items: center;
  background: var(--t-surface);
  border-top: 1px solid var(--t-border);
  border-bottom: 1px solid var(--t-border);
  padding: 0 12px;
  font-size: 12px;
  flex-shrink: 0;
}
#terminalPanel .terminal-status-line-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
#terminalPanel .terminal-status-line-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* ── Pills ── */
#terminalPanel .terminal-pill {
  background: var(--t-bg);
  border: 1px solid var(--t-border);
  border-radius: 3px;
  padding: 1px 8px;
  color: var(--t-cyan);
  cursor: pointer;
  position: relative;
  font-family: var(--t-font);
  font-size: 12px;
  line-height: 1.4;
}
#terminalPanel .terminal-pill:hover { border-color: var(--t-cyan); }

/* ── Popovers ── */
#terminalPanel .terminal-popover {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: 4px;
  min-width: 140px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow: hidden;
}
#terminalPanel .terminal-popover.open { display: block; }
#terminalPanel .terminal-popover-item {
  padding: 6px 12px;
  color: var(--t-fg);
  cursor: pointer;
  font-size: 12px;
}
#terminalPanel .terminal-popover-item:hover {
  background: var(--t-bg);
  color: var(--t-bright);
}
#terminalPanel .terminal-popover-item.active { color: var(--t-green); }
#terminalPanel .terminal-pill-sep  { color: var(--t-border); font-size: 14px; }
#terminalPanel .terminal-pill-group { position: relative; display: inline-flex; }

/* ── Context Budget Bar ── */
#terminalPanel .terminal-ctx-bar-container {
  display: flex;
  align-items: center;
  gap: 6px;
}
#terminalPanel .terminal-ctx-bar-track {
  width: 80px;
  height: 6px;
  background: var(--t-bg);
  border-radius: 3px;
  overflow: hidden;
}
#terminalPanel .terminal-ctx-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--t-green);
  transition: width 0.4s, background 0.4s;
  width: 0%;
}
#terminalPanel .terminal-ctx-bar-label {
  color: var(--t-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 100px;
}

/* Agent Chart — inline Highcharts in terminal responses */
.agent-chart {
  width: 100%;
  height: 400px;
  margin: 12px 0;
  border: 1px solid var(--border-color, #E2E8F0);
  border-radius: 8px;
  overflow: hidden;
}

.agent-chart .highcharts-container {
  border-radius: 8px;
}

/* ── Save strategy hint (Claude Code-style breathing glow) ── */
.terminal-save-hint {
  color: var(--t-yellow, #ffd60a);
  font-weight: 700;
  cursor: pointer;
  animation: save-hint-breathe 2.5s ease-in-out infinite;
  transition: transform 0.15s ease, text-shadow 0.15s ease;
  display: inline-block;
}
.terminal-save-hint:hover {
  transform: scale(1.15);
  text-shadow: 0 0 8px rgba(255, 214, 10, 0.6);
}
@keyframes save-hint-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Slash command autocomplete ── */
.terminal-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--t-surface, #2c2c2e);
  border: 1px solid var(--t-border, #3a3a3c);
  border-radius: 6px;
  margin-bottom: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
}
.terminal-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--t-mono, 'SF Mono', 'Fira Code', monospace);
}
.terminal-ac-item:hover,
.terminal-ac-active {
  background: var(--t-blue, #0a84ff);
  color: #fff;
}
.terminal-ac-cmd {
  color: var(--t-cyan, #64d2ff);
  font-weight: 600;
  white-space: nowrap;
}
.terminal-ac-active .terminal-ac-cmd {
  color: #fff;
}
.terminal-ac-desc {
  color: var(--t-dim, #636366);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.terminal-ac-active .terminal-ac-desc {
  color: rgba(255,255,255,0.7);
}

/* ── Cron Status Dropdown ── */
.cron-dropdown {
  background: var(--color-bg-secondary, #2c2c2e);
  border: 1px solid var(--color-border, #3a3a3c);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 300px;
  max-width: 440px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 1000;
  font-size: 12px;
  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  color: var(--color-text-primary, #cccccc);
}
.cron-dropdown-item {
  padding: 8px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cron-dropdown-item:hover {
  background: var(--color-bg-primary, #1c1c1e);
}
.cron-dropdown-item:first-child { border-radius: 8px 8px 0 0; }
.cron-dropdown-item:last-child  { border-radius: 0 0 8px 8px; }
.cron-dropdown-item:only-child  { border-radius: 8px; }
.cron-dropdown-sep {
  height: 1px;
  background: var(--color-border, #3a3a3c);
  margin: 2px 0;
}

/* ================================================= */
/* === Claude Code style components (cc-*)         === */
/* ================================================= */

#terminalPanel .cc-msg {
  font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas',
               'Noto Sans Mono CJK TC', 'PingFang TC', monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  margin: 6px 0;
  animation: cc-enter 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes cc-enter {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #terminalPanel .cc-msg { animation-duration: 0.001ms; }
}

#terminalPanel .cc-user      { color: var(--cc-fg); }
#terminalPanel .cc-user::before { content: '> '; color: var(--cc-dim); }

#terminalPanel .cc-assistant { color: var(--cc-fg); }
#terminalPanel .cc-dot       { color: var(--cc-fg); }

/* Assistant body — main answer should be near-white */
#terminalPanel .cc-assistant .cc-msg-body { color: var(--cc-fg); }
/* Markdown headings in assistant output — bold + bright */
#terminalPanel .cc-assistant .cc-h1,
#terminalPanel .cc-assistant .cc-h2,
#terminalPanel .cc-assistant .cc-h3,
#terminalPanel .cc-assistant .cc-h4,
#terminalPanel .cc-assistant .cc-h5,
#terminalPanel .cc-assistant .cc-h6 {
  color: var(--cc-bright);
  font-weight: 700;
  margin: 10px 0 4px;
  line-height: 1.25;
}
#terminalPanel .cc-assistant .cc-h1 { font-size: 1.35em; }
#terminalPanel .cc-assistant .cc-h2 { font-size: 1.2em; }
#terminalPanel .cc-assistant .cc-h3 { font-size: 1.1em; }
#terminalPanel .cc-assistant .cc-h4 { font-size: 1.05em; }
#terminalPanel .cc-assistant .cc-h5 { font-size: 1em; }
#terminalPanel .cc-assistant .cc-h6 { font-size: 0.95em; color: var(--cc-fg); }
#terminalPanel .cc-assistant strong { color: var(--cc-bright); font-weight: 700; }
#terminalPanel .cc-assistant .cc-list {
  color: var(--cc-fg);
  margin: 3px 0;
  padding-left: 20px;
}
#terminalPanel .cc-assistant .cc-list li { margin: 1px 0; }
#terminalPanel .cc-assistant .cc-list li > .cc-list { margin: 1px 0; }
#terminalPanel .cc-assistant .cc-quote {
  border-left: 3px solid var(--cc-dim);
  margin: 4px 0;
  padding: 2px 12px;
  color: var(--cc-dim);
}
#terminalPanel .cc-assistant a {
  color: var(--cc-suggestion);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
#terminalPanel .cc-assistant a:hover { text-decoration: underline; }

#terminalPanel .cc-tool      { color: var(--cc-fg); }
#terminalPanel .cc-tool-name { font-weight: 600; color: var(--cc-bright); margin-left: 6px; }
/* Phase B' — category renderers wrap inputs in .cc-tool-args (dim parens). */
#terminalPanel .cc-tool-args { font-weight: 400; }
#terminalPanel .cc-dim       { color: var(--cc-dim); }
#terminalPanel .cc-tool-status { margin-left: 6px; }
#terminalPanel .cc-tool-status.cc-success { color: var(--cc-success); }
#terminalPanel .cc-tool-status.cc-error   { color: var(--cc-error); }

#terminalPanel .cc-msg-response {
  display: flex;
  gap: 4px;
  padding-left: 2ch;
  color: var(--cc-dim);
  margin-top: 2px;
}
#terminalPanel .cc-branch { flex-shrink: 0; color: var(--cc-dim); }
#terminalPanel .cc-msg-body { flex: 1; color: var(--cc-fg); }
/* Only tool/task result bodies (inside ⎿ response) stay dim */
#terminalPanel .cc-msg-response .cc-msg-body { color: var(--cc-dim); }
#terminalPanel .cc-msg-body.cc-error-body { color: var(--cc-error); }

/* Tier 2 (2026-04-24): live stdout preview under a running tool card.
   Populated from tool_progress.detail.output — last ~5 lines of the
   subprocess's stdout, refreshed every 3s via heartbeat. Cleared on
   tool_complete. See static/js/modules/terminal/renderers/tool-use.js
   `setLiveOutput` / `clearLiveOutput`. */
#terminalPanel .tool-live-output {
  margin-top: 2px;
  padding-left: 2ch;            /* align under the ⎿ branch figure */
  font-family: var(--cc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85em;
  line-height: 1.35;
  color: var(--cc-dim);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 6.5em;            /* ~5 lines cap */
  overflow: hidden;
  opacity: 0.85;
}

/* Tier 3 (2026-04-24): stderr slot under a running tool card — inherits
   the base .tool-live-output layout but paints error-red to signal a
   Python traceback streaming from a still-running failing subprocess,
   giving users an at-a-glance failure reason before tool_complete. */
#terminalPanel .tool-live-output-stderr {
  color: var(--cc-error);
  opacity: 0.92;
}

#terminalPanel .cc-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cc-dim);
  margin: 8px 0;
}
#terminalPanel .cc-thinking-spinner {
  display: inline-block;
  color: var(--cc-cyan);
  width: 1ch;
  font-variant-numeric: tabular-nums;
}
#terminalPanel .cc-thinking-verb {
  font-style: italic;
  color: var(--cc-fg);
  animation: cc-shimmer 2s ease-in-out infinite;
}
@keyframes cc-shimmer {
  0%, 100% { color: var(--cc-thinking-from); }
  50%      { color: var(--cc-thinking-to); }
}
#terminalPanel .cc-thinking-meta {
  color: var(--cc-dim);
  font-size: 12px;
}

/* Stalled state (>3s no events): keep spinner unified cyan — only dim it
 * slightly so the user still gets a subtle "slow" signal without a jarring
 * colour flip to red. The cc-thinking-stalled JS class stays wired for
 * future label-level indicators. */
#terminalPanel .cc-thinking-stalled .cc-thinking-spinner {
  opacity: 0.55;
  transition: opacity 1s ease;
}

#terminalPanel .cc-thinking-collapsed {
  color: var(--cc-dim);
  font-style: italic;
  cursor: pointer;
}

#terminalPanel .cc-task      { color: var(--cc-fg); }
#terminalPanel .cc-task-desc { color: var(--cc-dim); margin-left: 6px; }

/* Task summary panel — Claude Code parity (TaskListV2 + AgentProgressLine) */
#terminalPanel .cc-task-summary {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  padding-left: 2ch;
}
#terminalPanel .cc-task-step {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--cc-dim);
  font-size: 12px;
  line-height: 1.5;
}
#terminalPanel .cc-task-step__branch { color: var(--cc-dim); flex-shrink: 0; }
#terminalPanel .cc-task-step__icon   { flex-shrink: 0; }
#terminalPanel .cc-task-step__icon.cc-success { color: var(--cc-success); }
#terminalPanel .cc-task-step__icon.cc-error   { color: var(--cc-error); }
#terminalPanel .cc-task-step__label { flex: 1; }
#terminalPanel .cc-task-step--done .cc-task-step__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.75;
}
#terminalPanel .cc-task-step--fail .cc-task-step__label {
  color: var(--cc-error);
  opacity: 0.9;
}
#terminalPanel .cc-task-summary__more {
  color: var(--cc-dim);
  font-style: italic;
  font-size: 11px;
  padding-left: calc(2ch + 6px);
  margin-top: 2px;
}
#terminalPanel .cc-task-stats {
  color: var(--cc-dim);
  margin-left: 6px;
  font-size: 12px;
}

#terminalPanel .cc-error       { color: var(--cc-error); }
#terminalPanel .cc-warning     { color: var(--cc-warning); }

#terminalPanel .cc-compact {
  color: var(--cc-dim);
  text-align: center;
  margin: 12px 0;
  font-size: 11px;
}

#terminalPanel .cc-result-summary {
  color: var(--cc-dim);
  font-size: 11px;
  padding-left: 2ch;
  margin-top: 2px;
}

#terminalPanel .cc-system-notice {
  color: var(--cc-dim);
  font-style: italic;
  margin: 6px 0;
}
#terminalPanel .cc-system-notice.cc-warning { color: var(--cc-warning); font-style: normal; }

#terminalPanel .cc-suggestion:disabled,
#terminalPanel .cc-suggestion[disabled] {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* === Welcome screen === */
#terminalPanel .cc-welcome { padding: 20px 0; }
#terminalPanel .cc-welcome-ascii {
  color: var(--cc-cyan);
  font-size: 11px;
  line-height: 1.2;
  margin: 0 0 12px 0;
}
#terminalPanel .cc-welcome-chips {
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--cc-dim);
}
#terminalPanel .cc-chip {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  border: 1px solid var(--cc-dim);
}
#terminalPanel .cc-chip.cc-chip-ok {
  color: var(--cc-success);
  border-color: var(--cc-success);
}
#terminalPanel .cc-chip.cc-chip-err {
  color: var(--cc-error);
  border-color: var(--cc-error);
}
#terminalPanel .cc-welcome-examples-label {
  font-size: 12px;
  margin-bottom: 4px;
}
#terminalPanel .cc-welcome-example {
  cursor: pointer;
  padding: 2px 6px;
  color: var(--cc-fg);
  font-size: 12.5px;
}
#terminalPanel .cc-welcome-example:hover {
  color: var(--cc-cyan);
}
#terminalPanel .cc-welcome-tip {
  margin-top: 12px;
  font-size: 11.5px;
}
#terminalPanel .cc-welcome-tip code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--cc-bright);
}

/* === Ask-user-question interactive === */
#terminalPanel .cc-ask-question {
  border-left: 2px solid var(--cc-suggestion);
  padding-left: 10px;
}
#terminalPanel .cc-aq-question {
  font-weight: 600;
  margin-bottom: 6px;
}
#terminalPanel .cc-aq-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#terminalPanel .cc-aq-option {
  background: transparent;
  border: 1px solid var(--cc-suggestion);
  color: var(--cc-fg);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
#terminalPanel .cc-aq-option:hover,
#terminalPanel .cc-aq-option.selected {
  background: var(--cc-suggestion);
  color: var(--cc-bright);
}
#terminalPanel .cc-aq-input {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--cc-dim);
  color: var(--cc-fg);
  padding: 4px 8px;
  font-family: inherit;
  width: 60%;
}

/* === Suggestion buttons (post-result) === */
#terminalPanel .cc-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-left: 2ch;
}
#terminalPanel .cc-suggestion {
  background: transparent;
  border: 1px solid var(--cc-suggestion);
  color: var(--cc-fg);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
#terminalPanel .cc-suggestion:hover {
  background: var(--cc-suggestion);
  color: var(--cc-bright);
}

/* === Bottom bar (context budget + session cost) === */
#terminalPanel .cc-bottom-bar {
  flex-shrink: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--t-border, #3a3a3c);
  font-size: 10.5px;
}
#terminalPanel .cc-ctx-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
#terminalPanel .cc-ctx-fill {
  height: 100%;
  transition: width 0.3s ease, background 0.3s ease;
}
#terminalPanel .cc-bottom-meta { margin-top: 2px; }

/* === System output (for /help, /status, etc.) === */
#terminalPanel .cc-system-output {
  white-space: pre-wrap;
  color: var(--cc-dim);
  margin: 6px 0;
  font-family: inherit;
}

/* === Code blocks + inline code === */
#terminalPanel .cc-code {
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 10px;
  border-radius: 3px;
  overflow-x: auto;
  margin: 6px 0;
}
#terminalPanel .cc-inline-code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0 4px;
  border-radius: 2px;
  color: var(--cc-bright);
}

/* === Markdown table (inside assistant response) === */
#terminalPanel .cc-table {
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 12.5px;
}
#terminalPanel .cc-table th,
#terminalPanel .cc-table td {
  border: 1px solid var(--t-border, #3a3a3c);
  padding: 4px 10px;
  text-align: left;
}
#terminalPanel .cc-table th { color: var(--cc-bright); }

/* ============================================================
   Light theme overrides — Terminal Tab
   The --cc-* palette was authored dark-only; without these rules
   nearly every terminal element is invisible on light backgrounds.
   Dark mode remains unchanged (these selectors only match when
   html[data-theme="light"] is active).
   ============================================================ */

/* A. --cc-* variable overrides (dark text / soft accent) */
html[data-theme="light"] #terminalPanel {
  --cc-bg:            var(--color-bg-page, #F5F4EF);
  --cc-fg:            #1C1917;            /* main text — dark ink */
  --cc-dim:           #57534E;            /* secondary — readable on light */
  --cc-bright:        #0C0A09;            /* emphasis — near-black */
  --cc-cyan:          #0369A1;            /* accent — deep cyan, not neon */
  --cc-success:       #059669;
  --cc-error:         #DC2626;
  --cc-warning:       #B45309;
  --cc-suggestion:    #2563EB;
  --cc-thinking-from: rgb(87, 83, 78);    /* shimmer base — darker */
  --cc-thinking-to:   rgb(68, 64, 60);    /* shimmer peak — darkest */
}

/* B. Component-level overrides (rgba hardcodes / input / borders) */

/* Input area — light needs visible border + white field */
html[data-theme="light"] #terminalPanel .terminal-input-area {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #terminalPanel .terminal-input-field {
  background: #FFFFFF;
  border: 1px solid #D6D3D1;
  color: #1C1917;
  padding: 6px 10px;
  border-radius: 4px;
}
html[data-theme="light"] #terminalPanel .terminal-input-field:focus {
  border-color: var(--cc-cyan);
  outline: 2px solid rgba(3, 105, 161, 0.2);
}
html[data-theme="light"] #terminalPanel .terminal-input-prompt {
  color: var(--cc-success);
}

/* Code fences + inline code — light needs dark-on-light bg */
html[data-theme="light"] #terminalPanel .cc-code {
  background: rgba(0, 0, 0, 0.04);
  color: #1C1917;
}
html[data-theme="light"] #terminalPanel .cc-inline-code {
  background: rgba(0, 0, 0, 0.06);
  color: #0C0A09;
}

/* Markdown table — light borders */
html[data-theme="light"] #terminalPanel .cc-table th,
html[data-theme="light"] #terminalPanel .cc-table td {
  border: 1px solid #D6D3D1;
}
html[data-theme="light"] #terminalPanel .cc-table th {
  color: #0C0A09;
}

/* Context bar track — darker so visible on light */
html[data-theme="light"] #terminalPanel .cc-ctx-bar {
  background: rgba(0, 0, 0, 0.08);
}

/* Welcome tip code inline — light background */
html[data-theme="light"] #terminalPanel .cc-welcome-tip code {
  background: rgba(0, 0, 0, 0.06);
  color: #0C0A09;
}

/* System output — visible on light */
html[data-theme="light"] #terminalPanel .cc-system-output {
  color: #44403C;
}

/* Welcome ASCII — deeper cyan for light */
html[data-theme="light"] #terminalPanel .cc-welcome-ascii {
  color: var(--cc-cyan);
  opacity: 0.85;
}

/* Chip borders — visible on light */
html[data-theme="light"] #terminalPanel .cc-chip {
  border-color: #A8A29E;
}
html[data-theme="light"] #terminalPanel .cc-chip.cc-chip-ok {
  border-color: var(--cc-success);
}
html[data-theme="light"] #terminalPanel .cc-chip.cc-chip-err {
  border-color: var(--cc-error);
}

/* Suggestion button hover / aq option — white text on colored bg */
html[data-theme="light"] #terminalPanel .cc-suggestion:hover,
html[data-theme="light"] #terminalPanel .cc-aq-option:hover,
html[data-theme="light"] #terminalPanel .cc-aq-option.selected {
  color: #FFFFFF;
}

/* === Running tool animation (⏺ pulse + spinner color) === */
#terminalPanel .cc-tool[data-state="running"] .cc-dot {
  animation: cc-tool-pulse 1.4s ease-in-out infinite;
}
#terminalPanel .cc-tool[data-state="running"] .cc-tool-status {
  color: var(--cc-cyan);
}
@keyframes cc-tool-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  #terminalPanel .cc-tool[data-state="running"] .cc-dot { animation: none; }
}

/* ─── Per-turn block (process zone vs answer zone) ───────────────────────
 * Each query creates one .cc-turn:
 *   .cc-turn__process  — collapsible header + body, holds thinking/tool_*
 *   .cc-turn__answer   — always-visible, holds text/tables/summary/suggestions
 * The process zone collapses on `result` so users see the answer first,
 * with execution detail one click away.
 * ──────────────────────────────────────────────────────────────────────── */

#terminalPanel .cc-turn {
  display: block;
  margin: 4px 0 6px;
}

#terminalPanel .cc-turn__process {
  border-left: 2px solid var(--cc-border, rgba(120, 120, 120, 0.18));
  margin: 2px 0 6px;
  padding: 0 0 0 6px;
}
#terminalPanel .cc-turn[data-state="failed"] .cc-turn__process {
  border-left-color: var(--cc-error, #d44);
}

#terminalPanel .cc-turn__process-header {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--cc-dim, #888);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.92em;
  padding: 2px 4px;
  margin: 0;
  border-radius: 3px;
  user-select: none;
}
#terminalPanel .cc-turn__process-header:hover {
  background: var(--cc-hover, rgba(255, 255, 255, 0.05));
  color: var(--cc-fg, inherit);
}
#terminalPanel .cc-turn__process-caret {
  display: inline-block;
  width: 1em;
  text-align: center;
}
#terminalPanel .cc-turn__process-label {
  font-weight: 600;
}
#terminalPanel .cc-turn__process-meta {
  color: var(--cc-dim, #888);
  font-size: 0.92em;
}

/* Body holds the actual renderer-produced DOM (.cc-tool, .cc-thinking, ...).
 * Default expanded; collapsed when data-collapsed="true". */
#terminalPanel .cc-turn__process-body {
  display: block;
  margin: 2px 0 0 4px;
}
#terminalPanel .cc-turn__process[data-collapsed="true"] .cc-turn__process-body {
  display: none;
}

/* Answer zone is just a flow container — no extra chrome so the assistant
 * message looks identical to the pre-turn version. */
#terminalPanel .cc-turn__answer {
  display: block;
}

/* Light theme adjustments */
html[data-theme="light"] #terminalPanel .cc-turn__process {
  border-left-color: rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] #terminalPanel .cc-turn__process-header:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ───────── Phase A1: thinking spinner glimmer + smooth stall fade ───────── */

@keyframes cc-glimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#terminalPanel .cc-thinking-verb {
  background: linear-gradient(
    90deg,
    var(--cc-bright) 0%,
    var(--cc-bright) 40%,
    #ffffff 50%,
    var(--cc-bright) 60%,
    var(--cc-bright) 100%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cc-glimmer-sweep 2.4s linear infinite;
  /* Smooth recovery from stalled red back to normal */
  transition: -webkit-text-fill-color 1s ease-out, color 1s ease-out;
}

#terminalPanel .cc-thinking.cc-thinking-stalled .cc-thinking-verb {
  animation: none;
  background: none;
  -webkit-text-fill-color: var(--cc-error);
  color: var(--cc-error);
  transition: -webkit-text-fill-color 2s ease-in, color 2s ease-in;
}

#terminalPanel .cc-thinking-spinner {
  transition: color 2s ease-in;
}
#terminalPanel .cc-thinking.cc-thinking-stalled .cc-thinking-spinner {
  color: var(--cc-error);
}

@media (prefers-reduced-motion: reduce) {
  #terminalPanel .cc-thinking-verb {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--cc-bright);
    color: var(--cc-bright);
  }
}

/* ───────── Phase A1: long-session tip ───────── */
#terminalPanel .cc-tip {
  margin-top: 4px;
  margin-left: 2ch;
  font-style: italic;
  color: var(--cc-dim);
}

/* /context visualization (Phase A2) */
.cc-ctx { padding: 8px 0; font-family: var(--cc-font-mono, ui-monospace, monospace); }
.cc-ctx-header { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.cc-ctx-tokens { font-weight: 600; }
.cc-ctx-status { margin-left: auto; padding: 1px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 600; }
.cc-ctx-status--ok { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.cc-ctx-status--warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.cc-ctx-status--critical { background: rgba(220, 38, 38, 0.15); color: #dc2626; }
.cc-ctx-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(127, 127, 127, 0.15); margin: 6px 0 12px;
}
.cc-ctx-bar-seg { height: 100%; transition: width 240ms ease; min-width: 1px; }
.cc-ctx-section-title {
  font-size: 0.85em; font-weight: 600; opacity: 0.7;
  margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.05em;
}
.cc-ctx-cat-row, .cc-ctx-tool-row {
  display: flex; gap: 8px; align-items: center; padding: 2px 0;
}
.cc-ctx-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.cc-ctx-cat-icon { width: 1.2em; text-align: center; }
.cc-ctx-cat-name, .cc-ctx-tool-name { flex: 1; }
.cc-ctx-cat-tokens, .cc-ctx-tool-tokens { min-width: 4em; text-align: right; }
.cc-ctx-cat-pct, .cc-ctx-tool-pct { min-width: 4em; text-align: right; }
.cc-ctx-tool-count { min-width: 3em; text-align: right; }
.cc-ctx-sug {
  border-left: 3px solid; padding: 4px 8px; margin-top: 4px;
  background: rgba(127, 127, 127, 0.06); border-radius: 0 4px 4px 0;
}
.cc-ctx-sug--info { border-color: #3b82f6; }
.cc-ctx-sug--warning { border-color: #f59e0b; }
.cc-ctx-sug--critical { border-color: #dc2626; }
.cc-ctx-sug-title { font-weight: 600; }
.cc-ctx--error { padding: 8px; background: rgba(220, 38, 38, 0.1); border-radius: 4px; color: #dc2626; }

/* Multi-line input (Phase A2) — textarea behaves like an auto-grow input */
textarea.terminal-input-field {
  resize: none;
  overflow-y: auto;
  line-height: 20px;
  min-height: 20px;
  max-height: 200px;
  font-family: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Reverse-i-search overlay (Phase A2) */
.cc-rsearch {
  font-family: var(--cc-font-mono, ui-monospace, monospace);
  font-size: 0.9em;
  padding: 4px 8px;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}
.cc-rsearch-prefix { opacity: 0.7; }
.cc-rsearch-match { font-weight: 600; }

/* SSE auto-retry banner (Phase A2) */
.cc-retry { padding: 4px 0; }
.cc-retry-text { font-style: italic; }
.cc-retry-cancel { color: #dc2626; text-decoration: underline; cursor: pointer; }
.cc-retry-cancel:hover { color: #ef4444; }