/* ════════════════════════════════════════════════════════════════════════
   cc-instrument.css — 終端機首屏「Instrument（精密儀器）」

   設計稿：https://claude.ai/artifact/2Kd3gDnBE1omJP2f1wTYnA
   規格來源：該畫布 System.dc.html 第 01–05 區

   🔴 所有選擇器一律以 #terminalPanel 開頭。
      `cc-` 前綴在本專案**不唯一** —— .cc-error 曾和 analyst-panel.css
      撞過，終端機的狀態符號被畫成紅色圓角方塊
      （見 memory/terminal-ui-direction-a.md）。新增全域 class 前先 grep。
   ════════════════════════════════════════════════════════════════════════ */

#terminalPanel {
  /* ── 版面 ── */
  --ins-shell: 1120px;
  --ins-gutter: 24px;

  /* ── 底色（暖黑，不是純黑）── */
  --ins-bg: #0A0908;
  --ins-bg-rail: #0D0C0B;
  --ins-bg-chrome: #0E0D0C;
  --ins-bg-field: #131110;

  /* ── 線 ── */
  --ins-line: rgba(255, 255, 255, 0.08);
  --ins-line-strong: rgba(255, 255, 255, 0.14);
  --ins-line-faint: rgba(255, 255, 255, 0.05);

  /* ── 文字（對 #0A0908 的對比：t2 7.9:1、t3 5.2:1，都過 WCAG AA）── */
  --ins-t1: #F5F4F1;
  --ins-t2: #A8A29E;
  --ins-t3: #8A827B;
  --ins-border: #2E2A26;

  /* ── 重點色：只用在送出鍵 / 使用中指示 / 品牌符號 ✻，面積不超過 2% ── */
  --ins-accent: #F97316;

  /* ── 市場漲跌（台股慣例：紅漲綠跌）── */
  --ins-up: #FF5C5C;
  --ins-down: #3FCF8E;
  --ins-flat: #44403C;

  /* ── 系統狀態：絕不用紅綠，否則跟漲跌打架 ── */
  --ins-info: #7DA7F5;
  --ins-warn: #E0A458;

  --ins-mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
}

/* ──────────────────────────────────────────────────────────────────────
   拆掉 v12 的圓角外框
   ──────────────────────────────────────────────────────────────────────
   wrap 仍掛著 .cc-welcome-v2 —— 不能拿掉，collapseWelcome()
   (terminal/index.js:96) 用它找節點，拿掉就不能收合了。
   所以照本專案既有手法「保留 class、歸零盒子樣式」(同 .cc-error 那次)。

   為什麼要拆：v12 的圓角框 + padding 會把內容往內縮一圈，新設計要的是
   「滿版分隔線 + 置中內容」—— 線必須到邊，那是儀器面板的感覺來源。 */
#terminalPanel .cc-welcome.cc-instrument {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-family: Archivo, 'Noto Sans TC', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

/* 收合：送出第一則訊息後把首屏收成一行。
   原本的規則指向 .cc-welcome-v2-banner / -grid，兩個都已不存在 ——
   不補這段，收合會變成「什麼都沒收到」。 */
#terminalPanel .cc-welcome-v2[data-collapsed="true"] .ins-market-slot,
#terminalPanel .cc-welcome-v2[data-collapsed="true"] .ins-chips,
#terminalPanel .cc-welcome-v2[data-collapsed="true"] .ins-feeds,
#terminalPanel .cc-welcome-v2[data-collapsed="true"] .ins-meta {
  display: none;
}

/* 置中殼層：市場帶 / 三欄 / 輸入列 / 狀態列共用同一組 padding-inline，
   內容左緣永遠對齊。刻意不包 wrapper 元素 —— 直接對兄弟元素套，
   邊框仍滿版（滿版分隔線 + 置中內容 = 儀器面板的感覺來源）。
   ⚠️ 驗證對齊要量「內容左緣」(left + paddingLeft)，不是 border box。 */
#terminalPanel .ins-shell,
#terminalPanel .terminal-input-area,
#terminalPanel .cc-bottom-bar {
  padding-inline: max(var(--ins-gutter), calc((100% - var(--ins-shell)) / 2));
}

/* 數字一律等寬 —— 整套設計裡最像專業終端的一招。
   數字切換時位數不跳動，小數點垂直對齊。 */
#terminalPanel .ins-num {
  font-family: var(--ins-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ──────────────────────────────────────────────────────────────────────
   分區標題（全大寫 overline）
   ────────────────────────────────────────────────────────────────────── */
#terminalPanel .ins-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 13px;
}
#terminalPanel .ins-overline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ins-t3);
}
#terminalPanel .ins-section-meta {
  font-size: 10.5px;
  color: var(--ins-t3);
}

/* ──────────────────────────────────────────────────────────────────────
   市場儀表帶
   ────────────────────────────────────────────────────────────────────── */
/* 分隔線掛在帶 padding 的外層 slot 上，不是內層 section ——
   border 會跨滿含 padding 的整個寬度，這樣才是「滿版分隔線 + 置中內容」。
   掛在內層會被 padding 內縮，線兩端各短一截。 */
#terminalPanel .ins-market-slot {
  padding-top: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ins-line);
}

#terminalPanel .ins-market-empty {
  font-size: 12.5px;
  color: var(--ins-t3);
  padding: 10px 0;
}

/* 單列橫向捲動 —— 窄螢幕不換行、不壓縮，直接捲。
   （多欄換行會讓 border-left 留孤兒線，而 CSS 判斷不出該欄是不是該行第一個） */
#terminalPanel .ins-cells {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  gap: 0;
}

#terminalPanel .ins-cell {
  flex: 1 0 auto;
  min-width: 196px;
  padding-right: 22px;
}
#terminalPanel .ins-cell + .ins-cell {
  padding-left: 22px;
  border-left: 1px solid var(--ins-line);
}

#terminalPanel .ins-cell-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ins-t3);
  white-space: nowrap;
}

/* 過期資料：降一階對比 + 琥珀色資料日。
   不是裝飾 —— 日線表會落後，不標就等於騙人說那是今天的數字。 */
#terminalPanel .ins-cell.ins-stale .ins-value,
#terminalPanel .ins-cell.ins-stale .ins-inst .ins-num {
  opacity: 0.72;
}
#terminalPanel .ins-asof {
  color: var(--ins-warn);
  font-family: var(--ins-mono);
  font-size: 9.5px;
  letter-spacing: 0;
}

#terminalPanel .ins-cell-main {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 7px;
}
#terminalPanel .ins-value {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ins-t1);
  display: inline-block;
}

#terminalPanel .ins-delta {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.01em;
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}
#terminalPanel .ins-delta.is-up,
#terminalPanel .ins-delta .is-up { color: var(--ins-up); }
#terminalPanel .ins-delta.is-down,
#terminalPanel .ins-delta .is-down { color: var(--ins-down); }
#terminalPanel .ins-delta.is-flat,
#terminalPanel .ins-delta .is-flat { color: var(--ins-t3); }

/* 漲跌家數長條：段與段之間留 2px 底色縫，不要黏成一條 */
#terminalPanel .ins-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 16px;
  height: 10px;
}
#terminalPanel .ins-bar > span { height: 10px; transform-origin: left; }
#terminalPanel .ins-bar > .is-up { background: var(--ins-up); }
#terminalPanel .ins-bar > .is-down { background: var(--ins-down); }
#terminalPanel .ins-bar > .is-flat { background: var(--ins-flat); }

/* 三大法人 */
#terminalPanel .ins-inst {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#terminalPanel .ins-inst-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
#terminalPanel .ins-inst-name { color: var(--ins-t2); font-size: 11.5px; }
#terminalPanel .ins-inst-row .is-up { color: var(--ins-up); }
#terminalPanel .ins-inst-row .is-down { color: var(--ins-down); }
#terminalPanel .ins-inst-row .is-flat { color: var(--ins-t3); }

/* 元資料行：市場 / 語系 / session。
   舊版那個浮在外框上的 frame title 跟新版的滿版分隔線打架，降級成這一行。 */
#terminalPanel .ins-meta {
  padding-bottom: 16px;
  font-size: 10.5px;
  color: var(--ins-t3);
  animation: ins-fade 400ms ease 900ms both;
}

/* ──────────────────────────────────────────────────────────────────────
   指令晶片
   ────────────────────────────────────────────────────────────────────── */
#terminalPanel .ins-chips {
  padding-top: 18px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
#terminalPanel .ins-chip {
  font-family: var(--ins-mono);
  font-size: 11.5px;
  color: var(--ins-t2);
  background: transparent;
  border: 1px solid #26231F;
  border-radius: 2px;
  padding: 6px 11px;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 120ms ease, color 120ms ease;
}
#terminalPanel .ins-chip:hover {
  color: var(--ins-t1);
  border-color: var(--ins-line-strong);
}
#terminalPanel .ins-chip.is-accent {
  color: var(--ins-accent);
  border-color: rgba(249, 115, 22, 0.35);
}

/* ──────────────────────────────────────────────────────────────────────
   三欄
   ────────────────────────────────────────────────────────────────────── */
#terminalPanel .ins-feeds {
  padding-bottom: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 40px;
}

/* 🔴 欄間只用 gap，不畫直線 —— auto-fit 換行後 border-left 會在新一行
   第一欄留孤兒線，而 CSS 判斷不出「這欄是不是該行第一個」（v12 教訓）。 */
#terminalPanel .ins-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#terminalPanel .ins-col-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin-top: 9px;
  transform-origin: left;
}
#terminalPanel .ins-col-foot {
  font-family: var(--ins-mono);
  font-size: 10.5px;
  color: var(--ins-accent);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

#terminalPanel .ins-rows { list-style: none; margin: 0; padding: 0; }
#terminalPanel .ins-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--ins-line-faint);
}
#terminalPanel .ins-rows > .ins-row:last-child { border-bottom: 0; }
#terminalPanel .ins-row-ts {
  font-family: var(--ins-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--ins-t3);
}
#terminalPanel .ins-row-ts.is-accent { color: var(--ins-accent); }
#terminalPanel .ins-row-txt {
  font-size: 12.5px;
  color: #E7E5E4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
}
#terminalPanel button.ins-row-txt { cursor: pointer; }
#terminalPanel button.ins-row-txt:hover { color: var(--ins-t1); }
#terminalPanel .ins-row-tag {
  font-family: var(--ins-mono);
  font-size: 9.5px;
  color: var(--ins-t3);
}
#terminalPanel .ins-row-cmd {
  font-family: var(--ins-mono);
  font-size: 11.5px;
  color: var(--ins-accent);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

/* ──────────────────────────────────────────────────────────────────────
   既有的輸入列與狀態列：改造，不是新增
   （終端機本來就有這兩個元素，在 welcome 裡再畫一個會變成兩個輸入框）
   ────────────────────────────────────────────────────────────────────── */
#terminalPanel .terminal-input-area {
  padding-top: 14px;
  padding-bottom: 14px;
}
#terminalPanel .terminal-input-prompt {
  color: var(--ins-accent);
  font-family: var(--ins-mono);
}
#terminalPanel .terminal-input-field {
  font-family: 'Noto Sans TC', Archivo, var(--ins-mono);
  font-size: 14.5px;
}
#terminalPanel .cc-bottom-bar {
  font-family: var(--ins-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--ins-t3);
}

/* ══════════════════════════════════════════════════════════════════════
   開機序列 —— 首屏播一次，全程約 1.2 秒
   順序有意義：連線 → 市場數字 → 指令列。規格見 System.dc.html 第 05 區。
   ══════════════════════════════════════════════════════════════════════ */
@keyframes ins-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ins-rise { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
@keyframes ins-roll { from { opacity: 0; transform: translateY(0.5em); filter: blur(6px) } to { opacity: 1; transform: none; filter: blur(0) } }
@keyframes ins-wipe-x { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ins-draw { from { stroke-dashoffset: 200 } to { stroke-dashoffset: 0 } }
@keyframes ins-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(125,167,245,0.34) } 55% { box-shadow: 0 0 0 5px rgba(125,167,245,0) } }

#terminalPanel .ins-market { animation: ins-fade 300ms ease 60ms both; }
#terminalPanel .ins-cell-label { animation: ins-rise 320ms cubic-bezier(.2,.7,.3,1) both; }
#terminalPanel .ins-value { animation: ins-roll 640ms cubic-bezier(.2,.8,.2,1) both; }
#terminalPanel .ins-delta { animation: ins-rise 320ms cubic-bezier(.2,.7,.3,1) both; }
#terminalPanel .ins-bar > span { animation: ins-wipe-x 520ms cubic-bezier(.2,.8,.2,1) both; }
#terminalPanel .ins-inst-row { animation: ins-rise 320ms cubic-bezier(.2,.7,.3,1) both; }

/* 逐格 58ms 階梯（階差小於 20ms 看不出來，大於 40ms 會拖） */
#terminalPanel .ins-cell:nth-child(1) .ins-cell-label { animation-delay: 100ms; }
#terminalPanel .ins-cell:nth-child(1) .ins-value      { animation-delay: 155ms; }
#terminalPanel .ins-cell:nth-child(1) .ins-delta      { animation-delay: 250ms; }
#terminalPanel .ins-cell:nth-child(2) .ins-cell-label { animation-delay: 158ms; }
#terminalPanel .ins-cell:nth-child(2) .ins-value      { animation-delay: 213ms; }
#terminalPanel .ins-cell:nth-child(2) .ins-delta      { animation-delay: 308ms; }
#terminalPanel .ins-cell:nth-child(3) .ins-cell-label { animation-delay: 216ms; }
#terminalPanel .ins-cell:nth-child(3) .ins-value      { animation-delay: 271ms; }
#terminalPanel .ins-cell:nth-child(3) .ins-delta      { animation-delay: 366ms; }
#terminalPanel .ins-cell:nth-child(4) .ins-cell-label { animation-delay: 274ms; }
#terminalPanel .ins-cell:nth-child(4) .ins-delta      { animation-delay: 424ms; }
#terminalPanel .ins-cell:nth-child(4) .ins-bar > span:nth-child(1) { animation-delay: 320ms; }
#terminalPanel .ins-cell:nth-child(4) .ins-bar > span:nth-child(2) { animation-delay: 380ms; }
#terminalPanel .ins-cell:nth-child(4) .ins-bar > span:nth-child(3) { animation-delay: 440ms; }
#terminalPanel .ins-cell:nth-child(5) .ins-cell-label { animation-delay: 332ms; }
#terminalPanel .ins-cell:nth-child(5) .ins-inst-row:nth-child(1) { animation-delay: 382ms; }
#terminalPanel .ins-cell:nth-child(5) .ins-inst-row:nth-child(2) { animation-delay: 420ms; }
#terminalPanel .ins-cell:nth-child(5) .ins-inst-row:nth-child(3) { animation-delay: 458ms; }

#terminalPanel .ins-chip { animation: ins-rise 320ms cubic-bezier(.2,.7,.3,1) both; }
#terminalPanel .ins-chip:nth-child(1) { animation-delay: 520ms; }
#terminalPanel .ins-chip:nth-child(2) { animation-delay: 546ms; }
#terminalPanel .ins-chip:nth-child(3) { animation-delay: 572ms; }
#terminalPanel .ins-chip:nth-child(4) { animation-delay: 598ms; }
#terminalPanel .ins-chip:nth-child(5) { animation-delay: 624ms; }
#terminalPanel .ins-chip:nth-child(6) { animation-delay: 650ms; }

#terminalPanel .ins-col-head { animation: ins-fade 300ms ease both; }
#terminalPanel .ins-col-rule { animation: ins-wipe-x 480ms cubic-bezier(.2,.8,.2,1) both; }
#terminalPanel .ins-row { animation: ins-rise 300ms cubic-bezier(.2,.7,.3,1) both; }
#terminalPanel .ins-feeds > div:nth-child(1) .ins-col-head { animation-delay: 680ms; }
#terminalPanel .ins-feeds > div:nth-child(1) .ins-col-rule { animation-delay: 700ms; }
#terminalPanel .ins-feeds > div:nth-child(2) .ins-col-head { animation-delay: 720ms; }
#terminalPanel .ins-feeds > div:nth-child(2) .ins-col-rule { animation-delay: 740ms; }
#terminalPanel .ins-feeds > div:nth-child(3) .ins-col-head { animation-delay: 760ms; }
#terminalPanel .ins-feeds > div:nth-child(3) .ins-col-rule { animation-delay: 780ms; }
#terminalPanel .ins-row:nth-child(1) { animation-delay: 740ms; }
#terminalPanel .ins-row:nth-child(2) { animation-delay: 768ms; }
#terminalPanel .ins-row:nth-child(3) { animation-delay: 796ms; }
#terminalPanel .ins-row:nth-child(4) { animation-delay: 824ms; }
#terminalPanel .ins-row:nth-child(5) { animation-delay: 852ms; }
#terminalPanel .ins-row:nth-child(6) { animation-delay: 880ms; }

/* 🔴 收合過一次之後就不要再播開機序列。
   collapseWelcome() 第一次收合時會設 data-cc-collapsible="1" 且永不移除，
   拿它當「這不是第一次進來」的旗標。

   不擋的話：收合→展開時 display:none → block 會讓 CSS 動畫從頭重跑，
   而最長的 animation-delay 是 900ms，使用者會盯著一片空白將近一秒。
   （2026-10-27 截圖抓到：展開後畫面整片黑，只剩一條分隔線。） */
#terminalPanel .cc-welcome-v2[data-cc-collapsible="1"] .ins-market-slot *,
#terminalPanel .cc-welcome-v2[data-cc-collapsible="1"] .ins-chips *,
#terminalPanel .cc-welcome-v2[data-cc-collapsible="1"] .ins-feeds *,
#terminalPanel .cc-welcome-v2[data-cc-collapsible="1"] .ins-market,
#terminalPanel .cc-welcome-v2[data-cc-collapsible="1"] .ins-meta {
  animation: none !important;
}

/* 生命跡象：agent 連線點緩慢呼吸。畫面永遠是活的，但不吵。 */
#terminalPanel .cc-chip.cc-chip-ok {
  animation: ins-breathe 2800ms ease-in-out 1500ms infinite;
}

/* 🔴 使用者關動畫就全部到位，不要硬播。 */
@media (prefers-reduced-motion: reduce) {
  #terminalPanel *,
  #terminalPanel *::before,
  #terminalPanel *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}