.dlg-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(2px);
  z-index: 100;
  animation: dlg-fade-in 0.15s ease-out;
}

.dlg-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  z-index: 110;
  min-width: 360px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  animation: dlg-pop 0.18s ease-out;
}

@keyframes dlg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dlg-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.dlg-header {
  padding: 14px 18px 4px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dlg-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-10);
  margin: 0;
  letter-spacing: -0.005em;
}

.dlg-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink-7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dlg-close:hover {
  background: var(--ink-3);
  color: var(--ink-9);
}

.dlg-body {
  padding: 8px 18px 16px 18px;
  font-size: 13px;
  color: var(--ink-9);
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.55;
}

.dlg-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.dlg-input-label {
  font-size: 11px;
  color: var(--ink-7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: -4px;
}

.dlg-input {
  padding: 8px 10px;
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  color: var(--ink-10);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.dlg-input:focus {
  border-color: var(--accent-w3);
}

.dlg-error {
  font-size: 11.5px;
  color: var(--rose);
}

.dlg-footer {
  padding: 12px 18px 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 按鈕已收編至全域 ui-btn 系統（styles.css）。 */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  font-size: 12.5px;
  color: var(--ink-9);
  line-height: 1.5;
  animation: toast-slide-in 0.2s ease-out;
}

.toast-error {
  border-left-color: var(--rose);
}
.toast-success {
  border-left-color: var(--accent-d);
}
.toast-info {
  border-left-color: var(--ink-7);
}

.toast-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.toast-error .toast-icon {
  color: var(--rose);
}
.toast-success .toast-icon {
  color: var(--accent-d);
}
.toast-info .toast-icon {
  color: var(--ink-7);
}

.toast-msg {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

.toast-close {
  background: transparent;
  border: none;
  color: var(--ink-7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 4px;
}

.toast-close:hover {
  background: var(--ink-3);
  color: var(--ink-9);
}

@keyframes toast-slide-in {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* MiniFlowTrace: 嵌在 LiveFlowTracePanel body 內，直式 chain：
 * 一個 node 一行往下排，中間用 ↓ 連接，像 timeline / flow diagram。 */

.mini-flow-trace {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  font-size: 11px;
  line-height: 1.3;
}

.mft-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.mft-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 10px;
  background: var(--ink-2, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--ink-4, rgba(0, 0, 0, 0.08));
  border-left: 3px solid var(--mft-accent);
  border-radius: 6px;
  width: 100%;
}

.mft-icon {
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.9;
}

.mft-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.mft-kind {
  font-weight: 600;
  color: var(--ink-9, #2c2c2c);
  white-space: nowrap;
  font-size: 11px;
}

.mft-nodeid {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--ink-7, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mft-slots {
  margin-top: 2px;
  font-size: 10px;
  color: var(--mft-accent);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 右側 status column：✓/✗/spinner 跟 duration 疊一起，
 * 跟 body 的 kind/nodeId/slots 視覺分離。 */
.mft-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.mft-dur {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: var(--ink-7, #888);
}

.mft-arrow {
  display: block;
  text-align: center;
  color: var(--ink-6, #bbb);
  font-size: 11px;
  line-height: 1;
  padding: 1px 0;
  flex-shrink: 0;
}

/* 狀態樣式 */
.mft-running {
  background: var(--ink-3, rgba(127, 181, 154, 0.06));
  animation: mft-pulse 1.4s ease-in-out infinite;
}

.mft-failed {
  border-left-color: var(--kind-hangup, #c95a5a);
}

@keyframes mft-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mft-accent) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mft-accent) 15%, transparent);
  }
}

.mft-spinner {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--mft-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: mft-spin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes mft-spin {
  to {
    transform: rotate(360deg);
  }
}

.mft-check {
  color: var(--mft-accent);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.mft-cross {
  color: var(--kind-hangup, #c95a5a);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
/* LiveFlowTracePanel：嵌在 .messages 容器內，sticky 黏在右上角，
 * 跟著 chat 區域邊界走、不會超出 input bar、不會跟著訊息一起捲走。
 * align-self: flex-end 讓它在 column flex 容器內貼右。 */

.lftp {
  position: sticky;
  top: 8px;
  align-self: flex-end;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--ink-1, #fafafa);
  border: 1px solid var(--ink-4, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  width: 240px;
  font-size: 12px;
  /* 關鍵：flex column 容器內 flex-shrink 預設 1，chat 訊息累積時 panel 會被
   * 壓扁；強制 0 維持 content 高度。配合 lftp-body 自己的 max-height 控總高。 */
  flex-shrink: 0;
  margin-bottom: -22px; /* 抵消 .messages 的 gap，避免 sticky panel 跟第一則訊息中間多一段空白 */
}

/* 收合時讓寬度跟內容走，避免 title / count / latest 被壓成多行；
 * 上限蓋住「Workflow Trace 99 步 · very-long-node-id」這種長 case。 */
.lftp-closed {
  width: auto;
  max-width: 280px;
}

.lftp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink-9, #2c2c2c);
  border-bottom: 1px solid transparent;
  transition: background 0.12s ease;
}

.lftp-open .lftp-header {
  border-bottom-color: var(--ink-4, rgba(0, 0, 0, 0.08));
}

.lftp-header:hover {
  background: var(--ink-2, rgba(0, 0, 0, 0.03));
}

.lftp-caret {
  display: inline-block;
  width: 12px;
  color: var(--ink-7, #777);
  font-size: 10px;
  flex-shrink: 0;
}

.lftp-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lftp-count {
  color: var(--ink-7, #888);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  margin-left: 2px;
  white-space: nowrap;
}

.lftp-latest {
  color: var(--ink-7, #888);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lftp-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--moss, #7fb59a);
  border-radius: 50%;
  margin-left: 4px;
  animation: lftp-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes lftp-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.lftp-body {
  padding: 10px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  /* 大約留 2~3 張卡片的高度，超過就在 panel 內部捲，
   * 避免把 chat 區跟 input bar 蓋住。 */
  max-height: 220px;
  overscroll-behavior: contain;
}

.lftp-body::-webkit-scrollbar {
  width: 6px;
}
.lftp-body::-webkit-scrollbar-thumb {
  background: var(--ink-5, rgba(0, 0, 0, 0.12));
  border-radius: 3px;
}
.main {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 0;
  background: var(--ink-1);
  position: relative;
  overflow: hidden;
}

/* Call status */
.call-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ink-4);
  background: linear-gradient(to bottom, var(--ink-2), var(--ink-1));
}
.call-glyph {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--ink-5);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--moss);
}
.call-status.active .call-glyph {
  box-shadow: 0 0 0 0 rgba(127, 181, 154, 0.5);
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(127, 181, 154, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(127, 181, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(127, 181, 154, 0);
  }
}
.call-status.transfer .call-glyph {
  color: var(--accent);
  border-color: var(--accent);
}
.call-status.hangup .call-glyph {
  color: var(--ink-7);
}
.call-text {
  flex: 1;
  min-width: 0;
}
.call-eyebrow {
  font-size: 10px;
  color: var(--moss);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.call-status.transfer .call-eyebrow {
  color: var(--accent);
}
.call-status.hangup .call-eyebrow {
  color: var(--ink-7);
}
.call-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-10);
  letter-spacing: -0.01em;
}
.call-meta {
  font-size: 11px;
  color: var(--ink-7);
  margin-top: 2px;
}
.call-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 開新對話鈕收編至 ui-btn（--primary --pill） */

/* Mode tabs */
.mode-row {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-2);
}
.mode-tab {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--ink-7);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}
.mode-tab:hover:not(:disabled) {
  color: var(--ink-9);
}
.mode-tab.active {
  color: var(--ink-10);
  border-bottom-color: var(--accent);
}
.mode-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mode-row-spacer {
  flex: 1;
}
/* TTS 朗讀開關（mode-row 右側）：對齊 mode-tab / topbar icon 鈕的扁平風格 */
/* 外觀收編至 ui-btn（--ghost --sm ＋ .is-active），只留版位 */
.tts-toggle {
  align-self: center;
}
/* 每則 bot 訊息的重播鈕（turn-foot-row 內）：對齊 topbar-icon-btn 的方形 ghost 鈕 */
.tts-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-7);
  cursor: pointer;
  border-radius: 5px;
}
.tts-btn svg {
  display: block;
}
.tts-btn:hover {
  color: var(--ink-10);
  background: var(--ink-3);
}
.tts-btn.playing {
  color: var(--accent);
  animation: tts-pulse 1s ease-in-out infinite;
}
.tts-btn.paused {
  color: var(--accent);
}
/* 喇叭鈕釘在 bubble 右下角；半透明底避免壓到文字時看不清，hover 才實心 */
.tts-btn.corner {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  color: var(--ink-6);
  background: color-mix(in srgb, var(--ink-2) 85%, transparent);
  opacity: 0.7;
}
.tts-btn.corner:hover {
  opacity: 1;
  color: var(--ink-10);
  background: var(--ink-3);
}
.tts-btn.corner.playing,
.tts-btn.corner.paused {
  opacity: 1;
  color: var(--accent);
}
@keyframes tts-pulse {
  50% {
    opacity: 0.4;
  }
}

/* Messages */
.messages {
  overflow-y: auto;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}
.messages.dimmed {
  opacity: 0.55;
  pointer-events: none;
}
.placeholder {
  margin: auto;
  text-align: center;
  color: var(--ink-7);
  font-size: 13px;
  max-width: 460px;
  line-height: 1.7;
}
.placeholder p:first-child {
  font-size: 20px;
  color: var(--ink-9);
  margin-bottom: 12px;
}
/* 外觀收編至 ui-btn（--primary --pill），只留版位 */
.start-conv-btn {
  margin-top: 18px;
}

/* Turn meta */
.turn-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ink-7);
  margin-bottom: 6px;
}
.turn-meta .arrow {
  color: var(--ink-6);
}
.intent-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--ink-9);
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
}
.intent-tag.k-rag_then_llm {
  color: var(--kind-purple);
  border-color: rgba(170, 140, 196, 0.3);
  background: rgba(170, 140, 196, 0.08);
}
.intent-tag.k-direct_template {
  color: var(--kind-green);
  border-color: rgba(142, 176, 112, 0.3);
  background: rgba(142, 176, 112, 0.08);
}
.intent-tag.k-direct_text {
  color: var(--kind-blue);
  border-color: rgba(107, 160, 200, 0.3);
  background: rgba(107, 160, 200, 0.08);
}
.intent-tag.k-direct_action {
  color: var(--kind-orange);
  border-color: rgba(212, 144, 96, 0.3);
  background: rgba(212, 144, 96, 0.08);
}
.intent-tag.dim {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.turn-meta .arrow.fallback-arrow {
  color: var(--ink-7);
  font-size: 12px;
}
.score {
  color: var(--ink-7);
}

/* Bubble */
.bubble {
  position: relative;
  max-width: 720px;
  padding: 12px 16px;
  border-radius: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  font-size: 14px;
}
.bubble .empty {
  color: var(--ink-7);
  font-style: italic;
}
.turn.user {
  align-self: flex-end;
  max-width: 540px;
}
.turn.user .bubble {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  color: var(--ink-1);
  border-top-right-radius: 4px;
  box-shadow: 0 2px 8px var(--accent-w);
}
.turn.assistant .bubble {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  color: var(--ink-10);
  border-top-left-radius: 4px;
}
.turn.assistant .bubble.streaming {
  border-color: var(--accent-w3);
  box-shadow: 0 0 0 1px var(--accent-w);
}

/* Streaming caret */
.caret {
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.9s ease-in-out infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* 一輪訊息底下的 chip 列：TimingChips 跟 WorkflowObservationChips 都放這 row
 * 內，flex-wrap 讓 chip 太多時自動換行，但同一輪兩個 group 不會強制分行。 */
.turn-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.turn-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Workflow observation chips（走 workflow 引擎時才出現） */
details.turn-foot.wf-obs {
  flex-direction: column;
  align-items: flex-start;
}
details.turn-foot.wf-obs > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
}
details.turn-foot.wf-obs > summary::-webkit-details-marker {
  display: none;
}
.timing-chip.wf {
  background: rgba(99, 102, 241, 0.18);
  color: rgba(165, 180, 252, 1);
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.timing-chip.dim {
  opacity: 0.65;
}
.timing-chip.warn {
  background: rgba(251, 146, 60, 0.18);
  color: rgba(254, 215, 170, 1);
  border: 1px solid rgba(251, 146, 60, 0.4);
}
.timing-chip.otd-hit {
  background: rgba(168, 100, 227, 0.15);
  color: rgba(206, 170, 255, 1);
  border: 1px solid rgba(168, 100, 227, 0.35);
}
.wf-obs-detail {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.wf-obs-detail .dim {
  color: var(--ink-7);
}

/* Input bar */
.input-bar {
  border-top: 1px solid var(--ink-4);
  padding: 16px 24px 18px;
  background: var(--ink-2);
}
.input-wrap {
  display: flex;
  align-items: end;
  gap: 10px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 12px;
  padding: 10px 12px;
}
.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-w);
}
.input-wrap.recording {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(201, 90, 90, 0.18);
}

/* Mic button */
.mic-btn {
  width: 36px;
  height: 36px;
  background: var(--ink-2);
  border: 1px solid var(--ink-5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-9);
  flex-shrink: 0;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.mic-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.mic-btn:disabled {
  opacity: 0.4;
}
.mic-btn.connecting {
  color: var(--ink-7);
  border-style: dashed;
}
.mic-btn.on {
  background: var(--rose);
  color: var(--ink-1);
  border-color: var(--rose);
  animation: mic-pulse 1.6s ease-out infinite;
}
@keyframes mic-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 90, 90, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(201, 90, 90, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 90, 90, 0);
  }
}

/* Live recording dot in hint row */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  margin-right: 6px;
  vertical-align: middle;
  animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
.input-bar textarea.msg {
  flex: 1;
  resize: none;
  max-height: 140px;
  min-height: 24px;
  background: transparent;
  border: none;
  color: var(--ink-10);
  font-size: 14px;
  padding: 6px 4px;
  font-family: var(--sans);
}
.input-bar textarea.msg::placeholder {
  color: var(--ink-7);
}
.input-bar textarea.msg:disabled {
  opacity: 0.5;
}
/* 送出鈕收編至 ui-btn（--icon --icon-primary） */
.input-hint {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-7);
}

/* Ended overlay */
.ended-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  /* 不用 flex centering：.ended-card 自己 absolute + translate(-50%, -50%) 置中，
     避免 Chromium 對「條件 mount 的 flex child + animation」第一幀 layout 還沒
     算好 flex centering 就 paint，child 落在 (0,0) 左上閃一下才被推到中間的 glitch。 */
}
/* 暗底 + blur 搬到偽元素，不放在「裝卡片的 flex 容器」上：backdrop-filter 在 Chromium 進場
   第一幀的合成 glitch 就只會發生在這層全螢幕 blur，不會把置中的卡片帶去左上角閃。 */
.ended-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 20, 25, 0.85);
  backdrop-filter: blur(6px);
  animation: fade-in 0.25s ease-out;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ended-card {
  max-width: 460px;
  width: 90%;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 18px;
  padding: 36px 32px 28px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  top: 50%;
  /* base transform 永遠包 -50% centering，不放進 animation：keyframe 跑 transform
     會跟 centering 的 translate(-50%, -50%) 衝突／在某些瀏覽器搶 compositor。
     彈跳感由 opacity 淡入承擔就好，視覺乾淨且不會打擾 first-paint 置中。 */
  transform: translate(-50%, -50%);
  animation: fade-in 0.3s ease-out backwards;
}

.ended-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}
.ended-glyph {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--ink-3);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent);
  position: relative;
}
.ended-overlay.transfer .ended-glyph::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: chat-spin 1.4s linear infinite;
}
@keyframes chat-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ended-overlay.hangup .ended-glyph {
  border-color: var(--ink-6);
  color: var(--ink-7);
}
.ended-eyebrow {
  font-size: 10.5px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ended-overlay.hangup .ended-eyebrow {
  color: var(--ink-7);
}
.ended-h1 {
  font-size: 24px;
  color: var(--ink-10);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.ended-h1 em {
  font-style: italic;
  color: var(--accent);
}
.ended-overlay.hangup .ended-h1 em {
  color: var(--ink-9);
}
.ended-sub {
  color: var(--ink-8);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.ended-collected {
  text-align: left;
  background: color-mix(in srgb, var(--ink-2) 60%, transparent);
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.ended-collected-title {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-7);
  margin-bottom: 8px;
}
.ended-collected-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.ended-collected-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.ended-collected-row dt {
  color: var(--ink-7);
  white-space: nowrap;
}
.ended-collected-row dd {
  margin: 0;
  color: var(--ink-10);
  font-weight: 500;
  text-align: right;
  word-break: break-all;
}
.ended-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--ink-7);
  padding: 12px 0;
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
  margin-bottom: 20px;
}
.ended-stats .stat strong {
  color: var(--ink-10);
  font-weight: 600;
}
.ended-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.btn-ghost {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--ink-5);
  color: var(--ink-9);
  border-radius: 999px;
  font-size: 13px;
}
.btn-ghost:hover {
  border-color: var(--ink-7);
}
.btn-cta {
  padding: 9px 22px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--ink-1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.btn-cta:hover {
  background: var(--accent-d);
}

/* Conversations list / detail */
.conv-list {
  overflow-y: auto;
  padding: 16px 24px 24px;
  min-height: 0;
}
.conv-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 12px;
}
.conv-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.conv-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conv-filter-label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-6);
}
/* 篩選 pill 收編至 ui-btn（--secondary --sm --pill ＋ .is-active） */
.conv-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-7);
  font-size: 12px;
}
.conv-error {
  padding: 10px 14px;
  color: var(--rose);
  background: rgba(201, 90, 90, 0.08);
  border-radius: 6px;
  font-size: 11.5px;
}
.conv-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 8px;
  margin-bottom: 6px;
  text-align: left;
}
.conv-row:hover {
  border-color: var(--ink-5);
}
.conv-row-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.conv-row-scenario {
  font-size: 12.5px;
  color: var(--ink-10);
}
.conv-row-id {
  font-size: 10.5px;
  color: var(--ink-6);
}
.conv-row-time {
  font-size: 11px;
  color: var(--ink-7);
}
.conv-time-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.conv-date {
  position: relative;
}
.conv-date-trigger {
  min-width: 116px;
  padding: 6px 10px;
  text-align: left;
  font-size: 11px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 7px;
  color: var(--ink-10);
}
.conv-date-trigger:hover {
  border-color: var(--ink-5);
}
.conv-date-trigger.empty {
  color: var(--ink-6);
}
.conv-date-trigger.open {
  border-color: var(--accent);
}
.conv-cal {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  width: 230px;
  padding: 10px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.conv-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.conv-cal-title {
  font-size: 12px;
  color: var(--ink-10);
}
.conv-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  color: var(--ink-8);
}
.conv-cal-nav:hover {
  border-color: var(--ink-5);
  color: var(--ink-10);
}
.conv-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.conv-cal-dow {
  padding: 2px 0 4px;
  text-align: center;
  font-size: 10px;
  color: var(--ink-6);
}
.conv-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-9);
  font-family: var(--mono);
  font-size: 11.5px;
}
.conv-cal-day:hover:not(:disabled) {
  background: var(--ink-3);
}
.conv-cal-day.today {
  box-shadow: inset 0 0 0 1px var(--ink-5);
}
.conv-cal-day.sel {
  background: var(--accent);
  color: var(--ink-1);
}
.conv-cal-day:disabled {
  color: var(--ink-5);
  cursor: not-allowed;
}
.conv-cal-day.blank {
  visibility: hidden;
}
.conv-search {
  position: relative;
}
.conv-search-input {
  width: 100%;
  padding: 7px 28px 7px 11px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 7px;
  color: var(--ink-10);
  font-size: 12px;
}
.conv-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.conv-search-input::placeholder {
  color: var(--ink-6);
}
.conv-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-7);
  font-size: 15px;
  line-height: 1;
}
.conv-search-clear:hover {
  color: var(--ink-10);
  background: var(--ink-4);
}
.conv-search-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
/* ↑ conv-search-menu 外觀歸 .ui-menu，只留定位／捲動 */
.conv-search-opt {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: none;
  border-radius: 5px;
  background: transparent;
  text-align: left;
}
.conv-search-opt:hover {
  background: var(--ink-3);
}
.conv-search-opt.on {
  background: var(--accent-w);
}
.conv-search-opt-name {
  font-size: 12.5px;
  color: var(--ink-10);
}
.conv-search-opt-key {
  font-size: 10.5px;
  color: var(--ink-6);
}
.conv-search-empty {
  padding: 10px 9px;
  font-size: 11.5px;
  color: var(--ink-7);
}
.conv-time-range span {
  font-size: 11px;
  color: var(--ink-7);
}
.conv-status-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
}
.conv-status-active {
  color: var(--moss);
  background: rgba(127, 181, 154, 0.1);
  border: 1px solid rgba(127, 181, 154, 0.3);
}
.conv-status-ended {
  color: var(--ink-7);
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
}

.conv-detail {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
.conv-detail-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-2);
}
.conv-detail-meta {
  font-size: 11px;
  color: var(--ink-7);
}
.conv-detail-msgs {
  overflow-y: auto;
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}
.scn-selector {
  position: relative;
  margin: 0 12px 12px;
}
.scn-selector.empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-7);
  text-align: center;
}
.scn-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
}
.scn-trigger:hover {
  border-color: var(--ink-5);
}
.scn-trigger-content {
  flex: 1;
  min-width: 0;
}
.scn-trigger-name {
  font-size: 14px;
  color: var(--ink-10);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scn-trigger-meta {
  font-size: 10px;
  color: var(--ink-7);
  margin-top: 2px;
}
.scn-chevron {
  color: var(--ink-7);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.scn-chevron.open {
  transform: rotate(180deg);
}

.scn-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30; /* 外觀歸 .ui-menu */
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.scn-pop-search {
  padding: 8px 8px 4px;
  border-bottom: 1px solid var(--ink-4);
}
.scn-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 9px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 7px;
  color: var(--ink-10);
  font-size: 13px;
}
.scn-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.scn-pop-section {
  padding: 6px;
  overflow-y: auto;
  max-height: 240px;
}
.scn-row-empty {
  padding: 14px 10px;
  color: var(--ink-7);
  font-size: 13px;
  text-align: center;
}
.scn-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.scn-row:hover {
  background: var(--ink-3);
}
.scn-row.active {
  background: var(--ink-3);
}
.scn-row.active::after {
  content: '✓';
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  margin-left: 8px;
}
.scn-row-name {
  font-size: 13px;
  color: var(--ink-10);
}
.scn-row-meta {
  font-size: 10.5px;
  color: var(--ink-7);
}

.scn-pop-actions {
  border-top: 1px solid var(--ink-4);
  padding: 4px;
}
.scn-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-9);
  text-align: left;
  cursor: pointer;
}
.scn-action:hover:not(:disabled) {
  background: var(--ink-3);
  color: var(--ink-10);
}
.scn-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.scn-action.danger {
  color: var(--rose);
}
.scn-action.danger:hover {
  background: rgba(201, 90, 90, 0.08);
}
.scn-action-badge {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
  background: rgba(127, 181, 154, 0.12);
  border: 1px solid rgba(127, 181, 154, 0.35);
  padding: 1px 6px;
  border-radius: 6px;
  line-height: 1.4;
}
.intent-router-admin-module {
  --ink-1: #f8fafc;
  --ink-2: #ffffff;
  --ink-3: #f1f5f9;
  --ink-4: #e2e8f0;
  --ink-5: #cbd5e1;
  --ink-6: #94a3b8;
  --ink-7: #64748b;
  --ink-8: #475569;
  --ink-9: #334155;
  --ink-10: #0f172a;
  --accent: var(--agent-primary, #c62828);
  --accent-d: var(--agent-primary-hover, #b71c1c);
  --accent-w: rgba(198, 40, 40, 0.08);
  --accent-w2: rgba(198, 40, 40, 0.14);
  --accent-w3: rgba(198, 40, 40, 0.28);
  --moss: #2e7d32;
  --moss-w: rgba(46, 125, 50, 0.08);
  --moss-b: rgba(46, 125, 50, 0.28);
  --gold: #b45309;
  --gold-w: rgba(180, 83, 9, 0.08);
  --gold-b: rgba(180, 83, 9, 0.28);
  --rose: #c62828;
  --rose-w: rgba(198, 40, 40, 0.08);
  --rose-b: rgba(198, 40, 40, 0.32);
  --kind-blue: #2563eb;
  --kind-green: #16a34a;
  --kind-orange: #ea580c;
  --kind-purple: #7c3aed;
  --kind-greeting: #16a34a;
  --kind-intent: #2563eb;
  --kind-collect: #0891b2;
  --kind-identity_verify: #7c3aed;
  --kind-confirm: #b45309;
  --kind-action: #ea580c;
  --kind-transfer: #9333ea;
  --kind-hangup: #c62828;
  --kind-custom: #64748b;
  --pulse: #db2777;
  --pulse-w: rgba(219, 39, 119, 0.25);
  --pulse-w2: rgba(219, 39, 119, 0.4);
  --minimap-mask: rgba(248, 250, 252, 0.82);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  display: flex;
  min-height: 680px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--agent-border, #e0e0e0);
  border-radius: 14px;
  background: var(--ink-1);
  color: var(--ink-9);
  font-family: var(--sans);
}

.intent-router-admin-module.compact {
  min-height: 760px;
}

.intent-router-admin-module *,
.intent-router-admin-module *::before,
.intent-router-admin-module *::after {
  box-sizing: border-box;
}

.intent-router-admin-module button,
.intent-router-admin-module input,
.intent-router-admin-module textarea,
.intent-router-admin-module select {
  font: inherit;
  color: inherit;
  outline: none;
}

.intent-router-admin-module button {
  cursor: pointer;
}

.intent-router-admin-module button:disabled {
  cursor: not-allowed;
}

.intent-router-admin-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-2);
  padding: 18px 20px;
}

.intent-router-admin-heading h3 {
  margin: 2px 0 6px;
  color: var(--ink-10);
  font-size: 1.05rem;
}

.intent-router-admin-heading p {
  margin: 0 0 8px;
  color: var(--ink-7);
  font-size: 0.84rem;
}

.intent-router-admin-heading code {
  display: inline-flex;
  max-width: min(72vw, 760px);
  overflow: hidden;
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  background: var(--ink-3);
  color: var(--ink-8);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 4px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intent-router-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* #15449 第 7 刀：尺寸對齊全域按鈕系統 primary/secondary 兩階
   （layout-spec §1，styles.css .btn-primary/.btn-secondary 同款數值），
   顏色沿用本模組既有的 --accent/--ink-* token，非本刀換色範圍。 */
.intent-router-admin-actions button {
  border-radius: 7px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
}

.intent-router-admin-actions button.secondary {
  border-color: var(--ink-4);
  background: var(--ink-2);
  color: var(--ink-8);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
}

.intent-router-admin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

.intent-router-admin-sidebar {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  overflow: hidden;
  border-right: 1px solid var(--ink-4);
  background: var(--ink-2);
}

.intent-router-scope-recovery {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 24px;
}

.intent-router-scope-card {
  width: min(720px, 100%);
  border: 1px solid var(--rose-b);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  padding: 24px;
}

.intent-router-scope-card h3 {
  margin: 4px 0 8px;
  color: var(--ink-10);
}

.intent-router-scope-card p {
  margin: 0 0 14px;
  color: var(--ink-8);
}

.intent-router-scope-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.intent-router-scope-grid code {
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  background: var(--ink-3);
  color: var(--ink-8);
  padding: 4px 10px;
}

.intent-router-admin-module .chat-shell {
  min-width: 0;
  min-height: 0;
}

.intent-router-admin-module .load-error {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: auto;
  max-width: 520px;
  border-radius: 8px;
  border: 1px solid var(--rose-b);
  background: #fff5f5;
  color: var(--rose);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
}

.intent-router-admin-module .mono {
  font-family: var(--mono);
}
.intent-router-admin-module .serif {
  font-family: var(--serif);
}

.intent-router-admin-module *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.intent-router-admin-module *::-webkit-scrollbar-track {
  background: transparent;
}
.intent-router-admin-module *::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 999px;
  border: 2px solid var(--ink-1);
}
.intent-router-admin-module *::-webkit-scrollbar-thumb:hover {
  background: var(--ink-5);
}

.intent-router-admin-module .toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--ink-5);
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.intent-router-admin-module .toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-7);
  transition: all 0.15s;
}
.intent-router-admin-module .toggle.on {
  background: var(--accent-w2);
}
.intent-router-admin-module .toggle.on::after {
  transform: translateX(14px);
  background: var(--accent);
}

.intent-router-admin-module .toggle-mini {
  width: 24px;
  height: 13px;
  border-radius: 7px;
  background: var(--ink-5);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.intent-router-admin-module .toggle-mini::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-7);
  transition: all 0.15s;
}
.intent-router-admin-module .toggle-mini.on {
  background: var(--accent-w2);
}
.intent-router-admin-module .toggle-mini.on::after {
  transform: translateX(11px);
  background: var(--accent);
}

.intent-router-admin-module .timing-chip {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  color: var(--ink-8);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.intent-router-admin-module .timing-chip .label {
  color: var(--ink-7);
  letter-spacing: 0.04em;
}
.intent-router-admin-module .timing-chip .v {
  color: var(--ink-10);
  font-weight: 500;
}
.intent-router-admin-module .timing-chip.fast {
  color: var(--moss);
  border-color: var(--moss-b);
  background: var(--moss-w);
}
.intent-router-admin-module .timing-chip.fast .label,
.intent-router-admin-module .timing-chip.fast .v {
  color: var(--moss);
}
.intent-router-admin-module .timing-chip.slow {
  color: var(--gold);
  border-color: var(--gold-b);
  background: var(--gold-w);
}
.intent-router-admin-module .timing-chip.slow .label,
.intent-router-admin-module .timing-chip.slow .v {
  color: var(--gold);
}
.intent-router-admin-module .timing-chip.via {
  background: var(--ink-3);
}
.intent-router-admin-module .timing-chip.rag-hits {
  position: relative;
}
.intent-router-admin-module .timing-chip.rag-hits.has-refs {
  cursor: help;
}
.intent-router-admin-module .timing-chip.rag-hits.has-refs .v {
  text-decoration: underline dotted rgba(100, 116, 139, 0.5);
  text-underline-offset: 2px;
}

.intent-router-admin-module .rag-refs-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 280px;
  max-width: 440px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
  text-align: left;
  cursor: default;
}
.intent-router-admin-module .rag-refs-title {
  font-size: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-3);
  margin-bottom: 8px;
}
.intent-router-admin-module .rag-refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intent-router-admin-module .rag-ref-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.intent-router-admin-module .rag-ref-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.intent-router-admin-module .rag-ref-doc {
  color: var(--ink-10);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.intent-router-admin-module .rag-ref-score {
  color: var(--ink-7);
  flex: 0 0 auto;
}
.intent-router-admin-module .rag-ref-content {
  color: var(--ink-8);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.intent-router-admin-module .kbd {
  padding: 1px 5px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 10px;
}

@keyframes intent-router-spin {
  to {
    transform: rotate(360deg);
  }
}
.intent-router-admin-module .spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: white;
  animation: intent-router-spin 0.8s linear infinite;
}

/* .icon-btn/.btn-cancel/.btn-save：#17821 路由表模式移除後已無人使用，死 CSS 一併清除。 */

.intent-router-admin-module .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.intent-router-admin-module .field-label {
  font-size: 10px;
  color: var(--ink-7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.intent-router-admin-module .field-input,
.intent-router-admin-module .field-textarea,
/* .field-select 已收編至全域 .ui-select（styles.css 第五刀）。 */
.intent-router-admin-module .field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intent-router-admin-module .term-label {
  font-size: 12px;
  color: var(--ink-9);
}
.intent-router-admin-module .field-hint {
  font-size: 11.5px;
  color: var(--ink-7);
  margin-top: 4px;
}
.intent-router-admin-module .code-textarea {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 7px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-10);
  line-height: 1.6;
  width: 100%;
  resize: vertical;
  min-height: 70px;
}
.intent-router-admin-module .code-textarea:focus {
  border-color: var(--accent);
}
.intent-router-admin-module .code-textarea.has-error {
  border-color: var(--rose);
}
.intent-router-admin-module .field-error,
.intent-router-admin-module .footer-error {
  font-size: 11.5px;
  color: var(--rose);
  padding: 6px 10px;
  background: var(--rose-w);
  border-radius: 6px;
}
.intent-router-admin-module .field-error {
  margin-top: 6px;
}

@media (max-width: 880px) {
  .intent-router-admin-grid {
    grid-template-columns: 1fr;
  }
  .intent-router-admin-sidebar {
    max-height: 420px;
    border-right: 0;
    border-bottom: 1px solid var(--ink-4);
  }
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__pane.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow .react-flow__edges {
  pointer-events: none;
  overflow: visible;
}
.react-flow__edge-path,
.react-flow__connection-path {
  stroke: #b1b1b7;
  stroke-width: 1;
  fill: none;
}
.react-flow__edge {
  pointer-events: visibleStroke;
  cursor: pointer;
}
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    -webkit-animation: none;
            animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge:focus .react-flow__edge-path,
  .react-flow__edge:focus-visible .react-flow__edge-path {
    stroke: #555;
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge-textbg {
    fill: white;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    -webkit-animation: dashdraw 0.5s linear infinite;
            animation: dashdraw 0.5s linear infinite;
  }
.react-flow__connectionline {
  z-index: 1001;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: -webkit-grab;
  cursor: grab;
}
.react-flow__node.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: -webkit-grab;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background: #1a192b;
  border: 1px solid white;
  border-radius: 100%;
}
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-top {
    left: 50%;
    top: -4px;
    transform: translate(-50%, 0);
  }
.react-flow__handle-left {
    top: 50%;
    left: -4px;
    transform: translate(0, -50%);
  }
.react-flow__handle-right {
    right: -4px;
    top: 50%;
    transform: translate(0, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.center {
    left: 50%;
    transform: translateX(-50%);
  }
.react-flow__attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@-webkit-keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-default,
.react-flow__node-input,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: 3px;
  width: 150px;
  font-size: 12px;
  color: #222;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #1a192b;
  background-color: white;
}
.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
    }
.react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: 0 0 0 0.5px #1a192b;
    }
.react-flow__node-group {
  background-color: rgba(240, 240, 240, 0.25);
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: rgba(0, 89, 220, 0.08);
  border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
}
.react-flow__controls-button {
    border: none;
    background: #fefefe;
    border-bottom: 1px solid #eee;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 5px;
  }
.react-flow__controls-button:hover {
      background: #f4f4f4;
    }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__minimap {
  background-color: #fff;
}
.react-flow__minimap svg {
  display: block;
}
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 4px;
  height: 4px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: #3367d9;
  transform: translate(-50%, -50%);
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: #3367d9;
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
/* Intent Router Workflow 編輯頁（Stage 2a/2b/2c）樣式。
 *
 * 規約：class 全部 irw- 前綴、scope 在 .irw-studio 下；顏色一律取全站 --c-*
 * token（kind 徽章色例外——沿用 flowNodeStyle.ts 色票，由 TSX 以
 * --irw-node-accent 內聯注入）；radius：卡片 8px、按鈕 10px、大區塊 12px、
 * badge 6px。reactflow 預設外觀（背景、邊、控制列、handle）的覆寫也收在本檔。
 */

.irw-studio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--c-text-primary);
}

/* ---- 工具列 ---------------------------------------------------------- */

.irw-studio .irw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.irw-studio .irw-toolbar__info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.irw-studio .irw-toolbar__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.irw-studio .irw-toolbar__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-dirty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-warning);
}

.irw-studio .irw-dirty__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warning);
}

.irw-studio .irw-toolbar__actions {
  display: flex;
  gap: 8px;
}

/* ---- 按鈕 ------------------------------------------------------------ */

/* 按鈕已收編至全域 ui-btn 系統（styles.css），本檔只留 mode-toggle 的併排造型。 */

/* ---- 提示與狀態卡 ---------------------------------------------------- */

.irw-studio .irw-alert {
  margin: 0;
  border: 1px solid;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  background: var(--c-surface-card);
}

.irw-studio .irw-alert--danger {
  color: var(--c-danger);
  border-color: var(--c-danger);
}

.irw-studio .irw-alert--success {
  color: var(--c-success);
  border-color: var(--c-success);
}

.irw-studio .irw-alert--warning {
  color: var(--c-warning);
  border-color: var(--c-warning);
}

.irw-studio-shell .irw-scenario-binding {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(280px, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
}

.irw-studio-shell .irw-scenario-binding__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--c-text-primary);
}

.irw-studio-shell .irw-scenario-binding__copy span {
  color: var(--c-text-secondary);
  font-size: 12px;
}

.irw-studio-shell .irw-scenario-binding .scn-wrap {
  min-width: 0;
}

@media (max-width: 760px) {
  .irw-studio-shell .irw-scenario-binding {
    grid-template-columns: 1fr;
  }
}

.irw-studio .irw-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 36px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--c-text-secondary);
}

.irw-studio .irw-state-card p {
  margin: 0;
}

.irw-studio .irw-state-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-state-card--error {
  color: var(--c-danger);
}

.irw-studio .irw-state-card--warning {
  border-color: var(--c-warning);
}

.irw-studio .irw-state-card__actions {
  display: flex;
  gap: 10px;
}

/* ---- 畫布外殼與節點工具箱 -------------------------------------------- */

.irw-studio .irw-canvas-shell {
  display: flex;
  gap: 12px;
  height: 560px;
  min-height: 380px;
}

.irw-studio--compact .irw-canvas-shell {
  height: 440px;
}

.irw-studio .irw-palette {
  flex: none;
  width: 216px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  overflow: hidden;
}

.irw-studio--compact .irw-palette {
  width: 180px;
}

.irw-studio .irw-palette__header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--c-border-default);
}

.irw-studio .irw-palette__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-palette__hint {
  margin: 0;
  font-size: 11px;
  color: var(--c-text-muted);
}

.irw-studio .irw-palette__list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.irw-studio .irw-palette__item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--c-text-primary);
  font: inherit;
}

.irw-studio .irw-palette__item:hover {
  background: var(--c-surface-sunken);
  border-color: var(--c-border-default);
}

.irw-studio .irw-palette__item:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 1px;
}

.irw-studio .irw-palette__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 13px;
}

.irw-studio .irw-palette__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.irw-studio .irw-palette__text strong {
  font-size: 12.5px;
  font-weight: 600;
}

.irw-studio .irw-palette__text span {
  font-size: 11px;
  line-height: 1.35;
  color: var(--c-text-muted);
}

.irw-studio--compact .irw-palette__text span {
  display: none;
}

.irw-studio .irw-canvas-pane {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-page);
  overflow: hidden;
}

/* ---- 自訂節點 --------------------------------------------------------- */

.irw-studio .irw-node {
  position: relative;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--c-border-default);
  border-left: 3px solid var(--irw-node-accent, var(--c-border-strong));
  border-radius: 8px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 10px 12px;
}

.irw-studio .irw-node--selected {
  border-color: var(--c-accent);
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.irw-studio .irw-node__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-btn-fg);
  background: var(--irw-node-accent, var(--c-border-strong));
}

.irw-studio .irw-node__label {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text-primary);
  word-break: break-word;
}

.irw-studio .irw-node__prompt {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--c-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- reactflow 預設外觀覆寫 ------------------------------------------ */

.irw-studio .react-flow {
  background: var(--c-surface-page);
}

/* 自訂 node type 的外層殼交給 .irw-node，殼本身不加視覺。 */
.irw-studio .react-flow__node-flowNode {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 8px;
  width: auto;
  font-size: inherit;
  text-align: left;
}

.irw-studio .react-flow__background circle {
  fill: var(--c-border-default);
}

.irw-studio .react-flow__background path {
  stroke: var(--c-border-default);
}

.irw-studio .react-flow__edge-path {
  stroke: var(--c-border-strong);
  stroke-width: 1.6;
}

.irw-studio .react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--c-accent);
}

.irw-studio .react-flow__edge-text {
  fill: var(--c-text-primary);
}

.irw-studio .react-flow__edge-textbg {
  fill: var(--c-surface-card);
}

.irw-studio .react-flow__connection-path {
  stroke: var(--c-accent);
}

.irw-studio .react-flow__handle {
  width: 9px;
  height: 9px;
  background: var(--c-surface-card);
  border: 2px solid var(--c-border-strong);
}

.irw-studio .react-flow__handle:hover {
  border-color: var(--c-accent);
}

.irw-studio .react-flow__controls {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--c-shadow-card);
}

.irw-studio .react-flow__controls-button {
  background: var(--c-surface-card);
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-primary);
}

.irw-studio .react-flow__controls-button:hover {
  background: var(--c-surface-sunken);
}

.irw-studio .react-flow__controls-button svg {
  fill: var(--c-text-primary);
}

.irw-studio .react-flow__attribution {
  background: transparent;
  color: var(--c-text-muted);
}

.irw-studio .react-flow__attribution a {
  color: var(--c-text-muted);
}

/* ---- 編輯區外框（畫布 + inspector 並排） ------------------------------ */

.irw-studio .irw-editor-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.irw-studio .irw-editor-body > .irw-canvas-shell {
  flex: 1;
  min-width: 0;
}

.irw-studio .irw-toolbar__divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 2px;
  background: var(--c-border-default);
}

/* ---- 模式切換組（積木/流程圖 segmented，B3） --------------------------- */

.irw-studio .irw-mode-toggle {
  display: inline-flex;
  align-items: stretch;
}

/* 兩顆併成一組：中縫共用 1px 邊框（第二顆負 margin 疊上第一顆右框），
   選中態（.is-active，--c-accent 規範）抬 z-index 讓 accent 邊框四邊完整。 */
.irw-studio .irw-mode-toggle__btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.irw-studio .irw-mode-toggle__btn + .irw-mode-toggle__btn {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.irw-studio .irw-mode-toggle__btn.is-active {
  position: relative;
  z-index: 1;
}

/* ---- 屬性編輯側欄（inspector） ---------------------------------------- */

.irw-studio .irw-inspector {
  flex: none;
  width: 300px;
  /* 與 .irw-canvas-shell 同高：內容多時在 __body 內捲動，不撐高整列。 */
  height: 560px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  overflow: hidden;
}

.irw-studio--compact .irw-inspector {
  width: 260px;
  height: 440px;
}

.irw-studio .irw-inspector__header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--c-border-default);
}

.irw-studio .irw-inspector__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-inspector__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.irw-studio .irw-inspector__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}

.irw-studio .irw-inspector__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.irw-studio .irw-inspector__kindbadge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-btn-fg);
}

.irw-studio .irw-inspector__empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--c-text-muted);
}

.irw-studio .irw-inspector__empty p {
  margin: 0;
}

.irw-studio .irw-inspector__route {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--c-text-secondary);
  word-break: break-all;
}

.irw-studio .irw-inspector__error {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-danger);
  word-break: break-word;
}

/* ---- 表單控件 --------------------------------------------------------- */

.irw-studio .irw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.irw-studio .irw-field__label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text-secondary);
}

.irw-studio .irw-field__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-muted);
}

.irw-studio .irw-input,
.irw-studio .irw-textarea {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-page);
  color: var(--c-text-primary);
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
}

.irw-studio .irw-textarea {
  resize: vertical;
  min-height: 34px;
}

.irw-studio .irw-textarea--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: pre;
  overflow-x: auto;
}

.irw-studio .irw-input:focus-visible,
.irw-studio .irw-textarea:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 1px;
  border-color: var(--c-accent);
}

.irw-studio .irw-input[readonly] {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

.irw-studio .irw-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--c-text-secondary);
  cursor: pointer;
}

.irw-studio .irw-check input {
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--c-accent);
}

/* ---- 進階欄位（JSON）折疊區 ------------------------------------------- */

.irw-studio .irw-advanced {
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-page);
  padding: 0;
}

.irw-studio .irw-advanced__summary {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
  cursor: pointer;
  border-radius: 8px;
  list-style-position: inside;
}

.irw-studio .irw-advanced__summary:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 1px;
}

.irw-studio .irw-advanced[open] {
  padding-bottom: 10px;
}

.irw-studio .irw-advanced[open] > .irw-advanced__summary {
  border-bottom: 1px solid var(--c-border-default);
  border-radius: 8px 8px 0 0;
  margin-bottom: 8px;
}

.irw-studio .irw-advanced > :not(.irw-advanced__summary) {
  margin-left: 10px;
  margin-right: 10px;
}

.irw-studio .irw-advanced .irw-field__hint {
  display: block;
  margin-bottom: 6px;
}

.irw-studio .irw-advanced .irw-inspector__error {
  margin-top: 6px;
}

.irw-studio .irw-advanced__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ---- 流程 JSON 面板（Stage 2c） --------------------------------------- */

.irw-studio .irw-json-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 14px 16px;
}

.irw-studio .irw-json-panel[hidden] {
  display: none;
}

.irw-studio .irw-json-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.irw-studio .irw-json-panel__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-json-panel__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-muted);
  max-width: 560px;
}

.irw-studio .irw-json-panel__actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.irw-studio .irw-json-panel__editor {
  min-height: 220px;
}

.irw-studio .irw-json-panel__notice {
  margin: 0;
  font-size: 12px;
  color: var(--c-success);
}

/* ---- dry-run 測試抽屜（Stage 2c） ------------------------------------- */

.irw-studio .irw-dryrun {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 14px 16px;
}

.irw-studio .irw-dryrun[hidden] {
  display: none;
}

.irw-studio .irw-dryrun__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-dryrun__hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-muted);
}

.irw-studio .irw-dryrun__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.irw-studio .irw-dryrun__form .irw-textarea {
  flex: 1;
}

.irw-studio .irw-dryrun__form .ui-btn {
  flex: none;
}

.irw-studio .irw-dryrun__empty {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-muted);
}

.irw-studio .irw-dryrun__results {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.irw-studio .irw-dryrun__record {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-page);
  padding: 10px 12px;
}

.irw-studio .irw-dryrun__record--error {
  border-color: var(--c-danger);
}

.irw-studio .irw-dryrun__record-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.irw-studio .irw-dryrun__record-input {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-primary);
  word-break: break-word;
}

.irw-studio .irw-dryrun__record-time {
  flex: none;
  font-size: 11px;
  color: var(--c-text-muted);
}

.irw-studio .irw-dryrun__summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.irw-studio .irw-dryrun__summary-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
}

.irw-studio .irw-dryrun__summary-row dt {
  flex: none;
  width: 64px;
  font-weight: 600;
  color: var(--c-text-secondary);
}

.irw-studio .irw-dryrun__summary-row dd {
  margin: 0;
  color: var(--c-text-primary);
  word-break: break-word;
}

.irw-studio .irw-dryrun__raw {
  margin: 0;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--c-text-secondary);
  background: var(--c-surface-sunken);
  border-radius: 6px;
}

/* ---- 狀態列 ----------------------------------------------------------- */

.irw-studio .irw-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px;
  font-size: 12px;
  color: var(--c-text-muted);
}

.irw-studio .irw-statusbar__selection {
  color: var(--c-text-secondary);
}

/* ---- 窄幅退化 --------------------------------------------------------- */

@media (max-width: 720px) {
  .irw-studio .irw-editor-body {
    flex-direction: column;
  }

  .irw-studio .irw-canvas-shell {
    flex-direction: column;
    height: auto;
  }

  .irw-studio .irw-palette {
    width: 100%;
    max-height: 180px;
  }

  .irw-studio .irw-canvas-pane {
    height: 420px;
  }

  .irw-studio .irw-inspector,
  .irw-studio--compact .irw-inspector {
    width: 100%;
    height: auto;
  }

  .irw-studio .irw-inspector__body {
    max-height: 360px;
  }
}

/* ---- Studio 三分頁容器（Stage 3）------------------------------------- */

.irw-studio-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--c-text-primary);
}

.irw-studio-shell .irw-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border-default);
}

.irw-studio-shell .irw-tabs__tab {
  appearance: none;
  border: none;
  background: none;
  margin-bottom: -1px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text-secondary);
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.irw-studio-shell .irw-tabs__tab:hover {
  color: var(--c-text-primary);
  background: var(--c-surface-hover);
}

.irw-studio-shell .irw-tabs__tab:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: -2px;
}

/* 選中分頁：--c-accent 下底線（規約：accent 只用於 focus ring／選中態／eyebrow）。 */
.irw-studio-shell .irw-tabs__tab--active {
  color: var(--c-text-primary);
  border-bottom-color: var(--c-accent);
}

.irw-studio-shell .irw-tabpanel {
  min-width: 0;
}

/* scope guard 缺參卡的參數展示 */
.irw-studio .irw-scope-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.irw-studio .irw-scope-grid code {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-default);
}

/* ---- 情境基本設定卡（ScenarioMetaCard）------------------------------- */

.irw-studio .irw-panel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.irw-studio .irw-panel-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.irw-studio .irw-panel-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.irw-studio .irw-panel-card__sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-text-muted);
}

.irw-studio .irw-panel-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.irw-studio .irw-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.irw-studio .irw-badge--success {
  color: var(--c-success);
  background: var(--c-success-soft);
}

.irw-studio .irw-badge--warning {
  color: var(--c-warning);
  background: var(--c-warning-soft);
}

.irw-studio .irw-badge--muted {
  color: var(--c-text-muted);
  background: var(--c-surface-sunken);
}

.irw-studio .irw-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.irw-studio .irw-form-grid .irw-field--full {
  grid-column: 1 / -1;
}

.irw-studio .irw-route-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
}

.irw-studio .irw-route-editor__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

/* 表格自帶橫向卷軸，避免撐破容器 */
.irw-studio .irw-table-wrap {
  overflow-x: auto;
}

.irw-studio .irw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.irw-studio .irw-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border-strong);
  white-space: nowrap;
}

.irw-studio .irw-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border-default);
  vertical-align: top;
  color: var(--c-text-primary);
}

.irw-studio .irw-table__intent {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-default);
  word-break: break-all;
}

.irw-studio .irw-table__desc {
  color: var(--c-text-secondary);
  min-width: 160px;
}

.irw-studio .irw-table__time {
  color: var(--c-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.irw-studio .irw-table__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

/* ---- 積木模式（BlocksEditorTab，B2） ---------------------------------- */

/* 外框：佔滿編輯區（B3 掛進 irw-editor-body 後 flex:1 撐滿），高度沿
   irw-canvas-shell 規格（560 / compact 440），格點畫布底 --c-surface-sunken、
   大區塊 radius 12px。 */
.irw-studio .irw-blocks-shell {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 560px;
  min-height: 380px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-sunken);
  overflow: hidden;
}

.irw-studio--compact .irw-blocks-shell {
  height: 440px;
}

.irw-studio .irw-blocks-host {
  position: absolute;
  inset: 0;
}

/* Blockly 注入元素的必要覆寫（收斂在 .irw-blocks-host scope 下）：
   injectionDiv 跟外框圓角、去 focus outline；flyout 底改卡片色系。 */
.irw-studio .irw-blocks-host .injectionDiv {
  border-radius: 12px;
  outline: none;
  background: transparent;
}

.irw-studio .irw-blocks-host .blocklySvg {
  background: transparent;
}

.irw-studio .irw-blocks-host .blocklyFlyoutBackground {
  fill: var(--c-surface-card);
  fill-opacity: 1;
  stroke: var(--c-border-default);
  stroke-width: 1;
}

.irw-studio .irw-blocks-host .blocklyText {
  font-family: inherit;
}

/* 載入中 / 載入失敗覆蓋層（動態 import blockly 期間；Suspense 殼由 B3 包）。 */
.irw-studio .irw-blocks-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: 12px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: 13px;
  text-align: center;
}

.irw-studio .irw-blocks-state__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-primary);
}

.irw-studio .irw-blocks-state--error .irw-blocks-state__title {
  color: var(--c-danger);
}

.irw-studio .irw-blocks-state__detail {
  margin: 0;
  max-width: 420px;
  word-break: break-word;
}
/* 排程爬蟲管理（設計稿「排程爬蟲管理 v2.dc.html」）
   頁面級樣式；共用件一律用 ui-*，顏色一律 token，動效一律 --motion-*。 */

.crawler-main {
  flex: 1;
  min-width: 0;
  padding: 16px 22px 40px;
  overflow: auto;
}

.crawler-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.crawler-head-copy {
  flex: 1;
  min-width: 0;
}
.crawler-head-copy h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.crawler-head-copy p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-text-tertiary);
}

.crawler-error {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--c-danger-soft);
  border-radius: 12px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
  margin-bottom: 14px;
}
.crawler-error p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-text-secondary);
}

.crawler-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.crawler-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}
.crawler-stat.is-bad {
  border-color: var(--c-danger-soft);
}
.crawler-stat strong {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.crawler-stat.is-bad strong {
  color: var(--c-danger);
}
.crawler-stat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text-tertiary);
}
.crawler-stat-unit {
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.crawler-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}
.crawler-stat-dot.is-ok { background: var(--c-success); }
.crawler-stat-dot.is-bad { background: var(--c-danger); }
.crawler-stat-dot.is-off { background: var(--c-border-strong); }

.crawler-warnbar {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--c-warning-soft);
  border-radius: 12px;
  background: var(--c-warning-soft);
  color: var(--c-warning);
  font-size: 12.5px;
}
.crawler-warnbar span {
  flex: 1;
  min-width: 0;
}

.crawler-table {
  margin-top: 14px;
  overflow: hidden;
}

/* 表頭＋資料列的水平捲動層（codex `#144497`）：欄位固定寬總和約 604px，
   桌面含側欄後主內容不足約 963px 時，最右的操作欄會被 .crawler-table 的
   overflow:hidden 裁掉、按不到。改成這一層可水平捲動，列本身撐到 max-content，
   hover 底色才不會只畫到可視區。 */
.crawler-scroll {
  overflow-x: auto;
}
/* 只給讀屏的標籤（codex `#144658`）：表頭那兩個空欄要有名字，但畫面上不該
   多出文字。專案沒有全域 utility，比照 styles.css 的 .home-tenant-filters
   .sr-only 自帶一份。 */
.crawler-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* 用**固定**的最小寬度，不能用 max-content（codex `#144846`）：max-content 讓每一
   列各自照自己的內容算寬度，一條很長又不能斷的網址就會把那一列的後續欄位往右
   推，表頭與其他列跟著對不齊。963px＝各欄最小寬總和（34+190+170+110+165+100+90
   ＋6 個 12px gap ＋左右 16px padding），窄於此就水平捲動，來源欄則在欄內省略。 */
.crawler-scroll .crawler-thead,
.crawler-scroll .crawler-row {
  min-width: 963px;
}
/* 「最近執行」欄位組不同：112(時間)+170(來源 min)+72(頁數)+92(結果)
   ＋3 個 12px gap ＋左右 16px padding ＝ 514px（codex `#144876`——先前寫 460
   小於各欄最小寬總和，窄螢幕時內容會溢出列的背景與邊框）。 */
.crawler-runs .crawler-scroll .crawler-thead,
.crawler-runs .crawler-scroll .crawler-row {
  min-width: 514px;
}

.crawler-toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  flex-wrap: wrap;
}
.crawler-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 99px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.crawler-chip span {
  font-family: var(--mono);
  opacity: 0.6;
}
.crawler-chip:hover:not(:disabled) {
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}
/* logs 沒 ready 時「有問題」算不出來，chip 停用（codex `#144606`）。 */
.crawler-chip:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.crawler-chip.is-on {
  background: var(--c-text-primary);
  border-color: var(--c-text-primary);
  color: var(--c-text-inverse);
}

.crawler-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  width: 212px;
}
.crawler-search svg {
  position: absolute;
  left: 10px;
  color: var(--c-text-muted);
  pointer-events: none;
}
.crawler-search input {
  width: 100%;
  padding: 7px 10px 7px 29px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.crawler-search input:focus {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}
.crawler-kbfilter {
  width: auto;
  max-width: 220px;
}

.crawler-thead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crawler-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--c-border-default);
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.crawler-row:hover {
  background: var(--c-surface-hover);
}
.crawler-row.is-off {
  background: var(--c-surface-sunken);
}
.crawler-row.is-off:hover {
  background: var(--c-surface-hover);
}
.crawler-row .crawler-col-act {
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.crawler-row:hover .crawler-col-act,
.crawler-row:focus-within .crawler-col-act {
  opacity: 1;
}
/* 觸控裝置沒有 hover，操作欄會一直是透明的——但按鈕仍在、仍可點，
   等於使用者盲點一個看不見的刪除鈕（codex `#144498`）。這類裝置固定顯示。 */
@media (hover: none) {
  .crawler-row .crawler-col-act {
    opacity: 1;
  }
}

.crawler-col-switch { width: 34px; flex: none; }
.crawler-col-src {
  flex: 1;
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.crawler-src-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}
.crawler-src-text {
  min-width: 0;
}
.crawler-src-text strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  /* 欄寬固定之後 host 也要能省略，否則長網域一樣會擠壓同列的其他欄。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crawler-row.is-off .crawler-src-text strong {
  color: var(--c-text-muted);
}
.crawler-src-text code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crawler-col-kb {
  width: 170px;
  flex: none;
  min-width: 0;
}
.crawler-kb-badge {
  max-width: 100%;
  overflow: hidden;
}
/* 名稱那一層自己有 class（codex `#144726`）：原本寫 `> :last-child`，但 badge 裡
   只有圖示是元素、名稱是文字節點，選到的其實是 SVG——長名稱只會被外層
   overflow:hidden 硬裁，不會有省略號。 */
.crawler-kb-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crawler-col-kb small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--c-text-muted);
}
.crawler-col-freq {
  width: 110px;
  flex: none;
}
.crawler-col-freq strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
}
.crawler-col-freq small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--c-text-muted);
}
.crawler-col-last {
  width: 165px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.crawler-last-text {
  min-width: 0;
}
.crawler-last-text small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crawler-col-next {
  width: 100px;
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--c-text-secondary);
}
.crawler-row.is-off .crawler-col-next {
  color: var(--c-text-muted);
}
.crawler-col-act {
  width: 90px;
  flex: none;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.crawler-danger:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.crawler-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  flex: none;
}
.crawler-sbar {
  width: 5px;
  border-radius: 2px;
}
.crawler-sbar.is-ok { background: var(--c-success); }
.crawler-sbar.is-warn { background: var(--c-warning); }
.crawler-sbar.is-bad { background: var(--c-danger); }
.crawler-sbar.is-off { background: var(--c-border-strong); }

.crawler-badge--ok { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.crawler-badge--warn { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
.crawler-badge--bad { background: var(--c-danger-soft); color: var(--c-danger); border-color: transparent; }
.crawler-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); border-color: transparent; }
.crawler-badge--muted { background: var(--c-surface-sunken); color: var(--c-text-tertiary); border-color: transparent; }

.crawler-empty {
  padding: 46px 20px;
  border-top: 1px solid var(--c-border-default);
  text-align: center;
}
.crawler-empty strong {
  font-size: 13px;
  color: var(--c-text-secondary);
}
.crawler-empty p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--c-text-muted);
}

.crawler-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
  font-size: 11.5px;
  color: var(--c-text-tertiary);
}
.crawler-credit {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c-text-muted);
}

.crawler-runs {
  margin-top: 14px;
}
/* 整條頭部就是收合開關（2026-08-19 使用者要求）：執行紀錄一次 20 筆，
   永遠展開的話上面的排程清單會被推得很遠。預設收起，要看才展開。
   align-items 從 baseline 改成 center——baseline 會讓左邊的 caret 圖示
   對到文字基線、看起來往下沉。 */
.crawler-runs-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease);
}
.crawler-runs-head:hover {
  background: var(--c-surface-hover);
}
.crawler-runs-caret {
  flex: none;
  color: var(--c-text-muted);
  transition: transform var(--motion-base) var(--motion-ease);
}
.crawler-runs-caret.is-open {
  transform: rotate(90deg);
}
.crawler-runs-head strong {
  font-size: 13px;
  font-weight: 700;
}
.crawler-runs-head span {
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.crawler-rcol-at { width: 112px; flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--c-text-tertiary); }
.crawler-rcol-url { flex: 1; min-width: 170px; }
.crawler-rcol-url code {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.crawler-rcol-n { width: 72px; flex: none; text-align: right; font-family: var(--mono); font-size: 12px; }
.crawler-rcol-n.is-added { color: var(--c-success); }
.crawler-rcol-st { width: 92px; flex: none; }

/* 欄位不再依寬度隱藏（codex `#144659`）：有了 .crawler-scroll 的水平捲動，
   平板／窄桌面把「寫入知識庫」與「上次結果」藏掉只是讓人看不到成功或失敗，
   而那正是這張表存在的理由。 */
@media (max-width: 1100px) {
  .crawler-stats { grid-template-columns: 1fr; }
}

.crawler-last-none {
  font-size: 11.5px;
  color: var(--c-text-muted);
}
/* ═══ 首頁區塊樣式 ═══════════════════════════════════════════════════════
   設計稿 SoT：Claude Design「Agent Studio 首頁.dc.html」的 isHome 半邊。
   稿裡的 class 前綴 hm-* 一律改成 ui-home-*（young 裁決：class 前綴統一 ui-）。

   規則：
     · 零硬編色值 —— 全部走 src/ui/tokens.css 的 --c-* 別名（稿用的短名已存在）
     · 零手刻毫秒 —— 全部走 --motion-*；稿的 .16s/.18s 對到 --motion-base(160ms)
       與 --motion-slow(220ms) 之間，取語意最近的一檔，差異列在交件說明
     · 這裡只放「首頁三區塊」自己的樣式。之後若有樣式被證明是通用的，
       再由元件庫負責人上升到 src/ui/components.css，不要反向直接寫進去。 */

/* ── 共用：卡片與徽章 ───────────────────────────────────────────────── */
.ui-home-card {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
  box-shadow: var(--c-shadow);
}

.ui-home-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.ui-home-badge.is-ready { background: var(--c-ok-soft); color: var(--c-ok); }
.ui-home-badge.is-pending { background: var(--c-warn-soft); color: var(--c-warn); }
.ui-home-badge.is-draft {
  border: 1px solid var(--c-border);
  background: var(--c-sunken);
  color: var(--c-text-3);
}

.ui-home-sectionlabel {
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── 1. Hero ─────────────────────────────────────────────────────────── */
.ui-home-hero {
  padding: 52px 36px 40px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  /* 稿的三段 radial-gradient。這三個值是**漸層停駐點**、不是語意色，
     token 層沒有對應項；硬要拆成 token 反而製造三個沒人會重用的變數。
     這點列為刻意不對齊，見交件說明。 */
  background: radial-gradient(
    120% 90% at 50% 0%,
    #ffffff 0%,
    #f4f9fd 55%,
    #eff3f7 100%
  );
}

.ui-home-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ui-home-hero__title {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ui-home-prompt {
  padding: 14px 15px 11px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-card);
  box-shadow: 0 4px 20px rgb(16 24 40 / 0.06);
  text-align: start;
  transition:
    border-color var(--motion-slow) var(--motion-ease),
    box-shadow var(--motion-slow) var(--motion-ease);
}

/* 稿用 :focus-within —— 焦點在 textarea 上時整張卡亮起，而不是只有輸入框。 */
.ui-home-prompt:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--c-ring), 0 4px 20px rgb(16 24 40 / 0.06);
}

.ui-home-prompt__ta {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
  resize: none;
}

.ui-home-prompt__ta::placeholder { color: var(--c-ph); }

.ui-home-prompt__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ui-home-prompt__hint {
  color: var(--c-muted);
  font-size: 11px;
}

.ui-home-send {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  border: none;
  border-radius: 10px;
  background: var(--c-accent);
  color: #fff;
  cursor: pointer;
  transition:
    background var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}

.ui-home-send:hover:not(:disabled) {
  background: var(--c-accent-deep);
  transform: translateX(1px);
}

.ui-home-send:disabled { cursor: default; opacity: 0.45; }

.ui-home-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.ui-home-chip {
  padding: 6px 13px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-card);
  color: var(--c-text-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  transition:
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

.ui-home-chip:hover {
  border-color: var(--c-border-2);
  background: var(--c-hover);
  color: var(--c-text);
  transform: translateY(-1px);
}

.ui-home-hero__guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--c-text-3);
  font-size: 12.5px;
}

.ui-home-hero__guide strong {
  color: var(--c-text-2);
  font-weight: 600;
}

/* ── 2. 最近的 Agent ─────────────────────────────────────────────────── */
.ui-home-recent__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ui-home-recent__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ui-home-recent__sub {
  margin: 2px 0 0;
  color: var(--c-text-3);
  font-size: 12.5px;
}

.ui-home-recent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 12px;
}

.ui-home-recent__card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-card);
  box-shadow: var(--c-shadow);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

.ui-home-recent__card:hover,
.ui-home-recent__card:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--c-ring);
  outline: none;
  transform: translateY(-2px);
}

.ui-home-recent__top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.ui-home-avatar {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* 稿的四色輪替頭像。這四組是**識別用的裝飾漸層**（讓相鄰卡片一眼分得開），
   不是語意色，故以具名 modifier 收在這裡而不是進 token 層。 */
.ui-home-avatar.is-c0 { background: linear-gradient(140deg, #1b7fb8, #2aa6e8 55%, #7ed3f7); }
.ui-home-avatar.is-c1 { background: linear-gradient(140deg, #5b47c4, #8b7be8); }
.ui-home-avatar.is-c2 { background: linear-gradient(140deg, #0e8a64, #34c79a); }
.ui-home-avatar.is-c3 { background: linear-gradient(140deg, #6b7280, #9aa2ae); }

.ui-home-recent__name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-home-recent__meta {
  margin-top: 2px;
  color: var(--c-muted);
  font-size: 11px;
}

.ui-home-recent__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 貼卡片底部。稿上每張卡的副標都剛好一行，接真實資料後不是——語者名稱
     短的是 default、長的是 zh-TW-HsiaoChenNeural，後者會換行。卡片本身
     被 grid 拉成等高，但少了這行，四張卡的「最後編輯／繼續編輯」不會在
     同一條線上。 */
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--c-border);
}

.ui-home-recent__edited {
  color: var(--c-muted);
  font-family: var(--mono);
  font-size: 10.5px;
}

.ui-home-recent__cta {
  color: var(--c-accent-deep);
  font-size: 11.5px;
  font-weight: 700;
}

/* ── 3. 活動與統計 ───────────────────────────────────────────────────── */
.ui-home-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 16px;
  align-items: start;
}

/* 稿的 @media：窄於 1180px 塌成單欄。 */
@media (max-width: 1180px) {
  .ui-home-2col { grid-template-columns: 1fr; }
}

.ui-home-2col__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-home-tablehead,
.ui-home-tablerow {
  display: grid;
  grid-template-columns: 1.4fr 62px 1fr 76px 1fr;
  align-items: center;
  gap: 12px;
}

.ui-home-tablehead {
  padding: 9px 15px;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ui-home-tablerow {
  padding: 10px 15px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  transition: background var(--motion-fast) var(--motion-ease);
}

.ui-home-tablerow:hover { background: var(--c-hover); }

.ui-home-cardhead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
}

.ui-home-mono { font-family: var(--mono); }

.ui-home-call__id {
  overflow: hidden;
  color: var(--c-text-2);
  font-family: var(--mono);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-home-call__dir { font-size: 11px; font-weight: 700; }
.ui-home-call__dir.is-in { color: var(--c-accent-deep); }
.ui-home-call__dir.is-out { color: var(--c-info); }

.ui-home-call__to {
  justify-self: start;
  border: 1px solid var(--c-border);
  background: var(--c-sunken);
  color: var(--c-text-2);
}

.ui-home-call__dur {
  color: var(--c-text-2);
  font-family: var(--mono);
  text-align: end;
}

.ui-home-call__at {
  color: var(--c-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: end;
}

.ui-home-volume__value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ui-home-volume__row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 11px 0 8px;
}

.ui-home-volume__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--c-muted);
  font-family: var(--mono);
  font-size: 10.5px;
}

/* 稿 hm-draw：sparkline 一次性描邊。duration 收在 --motion-spark。 */
@keyframes ui-home-spark-draw {
  from { stroke-dasharray: 600; stroke-dashoffset: 600; }
  to { stroke-dasharray: 600; stroke-dashoffset: 0; }
}

.ui-home-spark { animation: ui-home-spark-draw var(--motion-spark) both; }

/* 稿 hm-blink：系統就緒的綠點。這個點不在本輪三個元件裡（它屬於首頁組裝層），
   樣式先備在這裡，組裝時直接用。 */
@keyframes ui-home-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.ui-home-live {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-ok);
  animation: ui-home-blink var(--motion-blink) var(--motion-ease-io) infinite;
}

.ui-home-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border-top: 1px solid var(--c-border);
}

.ui-home-stat__label { color: var(--c-text-2); font-size: 12.5px; }

.ui-home-stat__value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.ui-home-stat__value.is-ok { color: var(--c-ok); }
.ui-home-stat__value.is-warn { color: var(--c-warn); }
.ui-home-stat__value.is-plain { color: var(--c-text); }

/* 動作偏好：關掉裝飾性動畫，保留狀態變化。 */
@media (prefers-reduced-motion: reduce) {
  .ui-home-spark,
  .ui-home-live { animation: none; }
  .ui-home-recent__card:hover,
  .ui-home-chip:hover,
  .ui-home-send:hover { transform: none; }
}
/* #15884 引導式精靈新增兩步（選樣板 / 測試對話）的樣式。
 *
 * 放獨立檔而不是塞進 styles.css：那支是共用大檔，同時有其他人在改，
 * 併起來衝突面太大。SetupStepIntent 匯入 WorkflowStudio.css 是同一個先例
 * （Vite 全域 CSS，重複 import 無害）。
 *
 * 只用既有 token（--c-* / --motion-* / --distance-*），不新增任何字彙。
 * 這一批 class 全部帶 stpl- / strun- 前綴，不與既有 .wz-* 撞名。
 */

/* ── 選樣板 ───────────────────────────────────────────── */

.stpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 12px;
}

.stpl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  position: relative;
  min-width: 0;
  padding: 15px 16px 14px;
  text-align: left;
  font: inherit;
  color: var(--c-text-primary);
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.stpl-card:hover:not(:disabled) {
  border-color: var(--c-accent);
  background: var(--c-surface-hover, var(--c-surface-sunken));
}

.stpl-card:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.stpl-card:active:not(:disabled) {
  transform: translateY(1px);
}

.stpl-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.stpl-card.on {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* 選中時左緣的實心指示條——比整片變色安靜，掃視時仍一眼看得出選了哪張。 */
.stpl-card.on::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--c-accent);
}

.stpl-card-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  background: transparent;
  border: 1.5px solid var(--c-border-strong);
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.stpl-card.on .stpl-card-mark {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.stpl-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.stpl-card-desc {
  font-size: 12px;
  color: var(--c-text-tertiary);
  line-height: 1.55;
}

.stpl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.stpl-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-text-secondary);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-default);
}

.stpl-skel {
  height: 118px;
  border-radius: 10px;
}

.stpl-name {
  max-width: 420px;
  margin-top: 10px;
}

.stpl-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.stpl-hint,
.strun-hint {
  font-size: 11.5px;
  color: var(--c-text-muted);
  line-height: 1.5;
}

/* 已建立後的唯讀回顧 */
.stpl-picked {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: 10px;
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-default);
}

.stpl-picked-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  background: var(--c-success, #059669);
}

.stpl-picked-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stpl-picked-name {
  font-size: 14px;
  font-weight: 700;
}

.stpl-picked-meta {
  font-size: 12px;
  color: var(--c-text-tertiary);
  line-height: 1.55;
}

/* ── 測試對話 ─────────────────────────────────────────── */

.strun-check {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  overflow: hidden;
}

.strun-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-border-default);
  animation: strun-row-in var(--motion-base) var(--motion-ease) backwards;
}

.strun-check-row:last-child {
  border-bottom: none;
}

.strun-check-row:nth-child(2) {
  animation-delay: var(--motion-stagger);
}

.strun-check-row:nth-child(3) {
  animation-delay: calc(var(--motion-stagger) * 2);
}

@keyframes strun-row-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-medium, 12px));
  }
}

.strun-check-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
  color: var(--c-text-muted);
  background: var(--c-surface-sunken);
  border: 1px solid var(--c-border-default);
}

.strun-check-row.ok .strun-check-mark {
  color: #fff;
  background: var(--c-success, #059669);
  border-color: var(--c-success, #059669);
}

.strun-check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.strun-check-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-primary);
}

.strun-check-hint {
  font-size: 11.5px;
  color: var(--c-text-tertiary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.strun-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* 動效一律可關 */
@media (prefers-reduced-motion: reduce) {
  .stpl-card,
  .stpl-card-mark {
    transition-duration: 1ms;
  }

  .strun-check-row {
    animation: none;
  }
}
.ai-brain-workspace {
  display: grid;
  gap: 16px;
}

.ai-brain-hero,
.ai-brain-section-shell,
.ai-brain-form-card,
.ai-brain-side-card {
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* v4 卡片系 8px（design:299 等 sec 卡；feat/design-1to1 由 12px 校正） */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.ai-brain-hero {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px;
}

.ai-brain-hero h3,
.ai-brain-section-heading h4,
.ai-brain-form-card h5,
.ai-brain-side-card h5 {
  margin: 0;
  color: var(--agent-text);
}

.ai-brain-hero p,
.ai-brain-side-card p,
.ai-brain-form-card p {
  color: var(--agent-text-muted);
}

.ai-brain-hero-actions,
.ai-brain-inline-actions,
.ai-brain-card-heading,
.ai-brain-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-brain-hero-actions {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
}

.ai-brain-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.ai-brain-context-grid span {
  min-width: 0;
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 卡片系 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 9px 10px;
}

.ai-brain-context-grid span.wide {
  grid-column: 1 / -1;
}

.ai-brain-context-grid small,
.ai-brain-mini-table small,
.ai-brain-session-list small,
.ai-brain-metric-card small {
  display: block;
  color: var(--agent-text-muted);
  font-size: 0.72rem;
}

.ai-brain-context-grid strong {
  display: block;
  overflow: hidden;
  color: var(--agent-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* feat/design-1to1：Proxy 連線徽章即 design:262 的 .ap-badge，
   套 design:35 字面值（mono 11.5px/600、padding 2px 7px、radius 6px）。 */
.ai-brain-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.ai-brain-health-badge.online {
  background: var(--agent-success-bg);
  color: var(--agent-success-text);
}

.ai-brain-health-badge.offline {
  background: var(--agent-warning-bg);
  color: var(--agent-warning-text);
}

.ai-brain-warning,
.ai-brain-state-callout,
.ai-brain-empty-state {
  border-radius: 8px; /* design:454 警示列/551 空狀態 radius 8px（feat/design-1to1 由 12px 校正） */
  padding: 12px 13px;
  font-size: 0.86rem;
}

.ai-brain-warning {
  display: flex;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--c-warning) 32%, transparent);
  background: var(--agent-warning-bg);
  color: var(--agent-warning-text);
}

/* #15449 第 8 刀：模組網格改響應式（落差 #4），欄數依卡片最小寬度自動排列，
   非固定欄數（layout-spec §6 `.dc.html:211`）。 */
.ai-brain-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* 模組卡改縱排（落差 #3）：icon 列（含選中態指示）→ 標題 → 說明，
   對照 `.ap-modcard`（layout-spec §6 `.dc.html:47,213-220`）。
   fix/15449-10：Young 回報卡區出現壓在 STT/Demo 卡片上方的幽靈大字 overlay
   （疑似第 8 刀縱排重構遺留）。實測（standalone harness 掛真元件＋真
   AIBrainWorkspace.css，1400/1024/375px、light theme、OTD 選中/未選中）未能
   重現；逐行核對本檔與 19fab2e диff 也未找到殘留的舊 class、position:absolute
   或異常 font-size。這裡先補上防禦性隔離（position:relative + isolation +
   min-width:0），讓每張卡片有自己的定位/堆疊/收縮邊界，避免任何未來子元素
   （或尚未重現的邊界情況）向外溢出到鄰卡；根因未 100% 確認，已在回報中如實
   註記，建議 Young 附上重現時的瀏覽器/縮放/主題以利下一輪追查。 */
.ai-brain-modcard {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
  cursor: pointer;
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* design:47 .ap-modcard radius 8px（feat/design-1to1 由 9px 校正） */
  background: var(--c-surface-card);
  padding: 12px 13px;
  text-align: left;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.ai-brain-modcard:hover,
.ai-brain-modcard:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.ai-brain-modcard.active {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  box-shadow: var(--c-focus-ring);
}

.ai-brain-modcard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ai-brain-modcard-row svg:first-child {
  color: var(--agent-primary);
  flex: 0 0 auto;
}

.ai-brain-modcard-active-icon {
  color: var(--c-accent);
  flex: 0 0 auto;
}

.ai-brain-modcard strong,
.ai-brain-modcard small {
  display: block;
}

.ai-brain-modcard strong {
  font-size: 12.5px;
}

.ai-brain-modcard small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--agent-text-muted);
  font-size: 11px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ai-brain-section-shell {
  padding: 18px;
}

.ai-brain-section-heading {
  justify-content: space-between;
  margin-bottom: 14px;
}

/* #15449 fix/15449-10：Young 手測回報——runtime service-config 側欄不用等 RWD
   擠壓才換到下方，固定排在表單卡下方（全寬）。原本 1.45fr/0.9fr 兩欄夾住
   AgentConfigFormCard 內部自己的 rail+表單兩欄，等於三欄擠在一起，中欄被壓爛
   （select 只剩「RA…」、label 直排）。改 flex column：表單卡（含其內部 rail）
   吃滿版寬，runtime 側欄改全寬卡片流在下方，不再是「等窄了才下方」的 RWD 斷點行為。 */
.ai-brain-config-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-brain-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 14px;
}

.ai-brain-form-card,
.ai-brain-side-card {
  min-width: 0;
  padding: 16px;
}

.ai-brain-card-heading {
  justify-content: space-between;
  margin-bottom: 12px;
}

/* fix/15449-10：Young 手測回報——表單控件被壓爛（select 只剩「RA…」、
   label「LLM 服務」擠成直排一字一行）。原本 repeat(3, minmax(0,1fr))／
   repeat(2, minmax(0,1fr)) 的 0 下限讓欄寬可以被擠到 0，容器一窄（三欄夾擠
   或視窗變窄）欄位就被壓到比一個中文字還窄。改 auto-fit + 欄寬下限
   （160px／180px）：欄數會依可用寬度自動減少（3→2→1），但單欄永遠不會
   窄於下限，取代原本「欄數固定、欄寬可以趨近 0」的行為。 */
.ai-brain-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.ai-brain-form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ai-brain-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--agent-text-muted);
  font-size: 0.78rem;
  font-weight: 750;
  /* fix/15449-10：欄寬下限已由 auto-fit + minmax 保底，這裡再加 nowrap 當
     第二道防線——即使欄位仍窄於一般預期，label 文字也橫排顯示（必要時溢出），
     不會退化成中文字一字一行直排。 */
  white-space: nowrap;
}

.ai-brain-form-grid label.wide {
  grid-column: 1 / -1;
}

.ai-brain-form-grid input,
.ai-brain-form-grid textarea,
.ai-brain-form-grid select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--agent-border);
  border-radius: 10px; /* design:58 .ap-input/.ap-select/.ap-textarea 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  color: var(--agent-text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* fix/15449-10：select 內容（如 provider/model 名稱）比 input 更容易被截斷到
   只剩「RA…」「Oper…」，補一個實際可讀的下限寬度；欄位本身仍受 auto-fit
   minmax(160px/180px,1fr) 保護，這裡是控件自身的最後一道防線。 */
.ai-brain-form-grid select {
  min-width: 120px;
}

/* #15449 第 5 刀：Keyword/OTD 表單欄位補 focus-ring（沿用前四刀 focus 語言：
   --c-accent 邊框 + --c-focus-ring 陰影）；.agent-config-card 底下的借用場景
   已在第 4 刀另外 scope 過，這裡只補未被那條規則涵蓋的其餘引用點。 */
.ai-brain-form-grid input:focus,
.ai-brain-form-grid textarea:focus,
.ai-brain-form-grid select:focus,
.ai-brain-card-search:focus,
.ai-brain-stacked-label textarea:focus {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.ai-brain-form-grid textarea {
  min-height: 74px;
  resize: vertical;
}

.ai-brain-form-grid .mono,
.ai-brain-json-preview pre,
.ai-brain-health-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* #15449 第 8 刀：底部操作列卡片化＋sticky（落差 #10），對照設計 sticky save bar
   （layout-spec §6 `.dc.html:356-363`）；此 class 亦被 AgentConfigFormCard.tsx
   共用（Config 儲存列），故一併吃到卡片化樣式，未動該檔任何 JSX/邏輯。 */
.ai-brain-inline-actions {
  position: sticky;
  z-index: 1;
  bottom: 0;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* design:406 sticky 儲存列 radius 8px（feat/design-1to1 由 10px 校正） */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

/* #15449 第 7 刀：ai-brain 按鈕家族併入全域 .btn 系統（見 styles.css .btn-*）。
   secondary/ghost/danger 已改用全域 .btn-secondary/.btn-danger/.btn-sm class
   （AIBrainWorkspace.tsx），這裡只保留「未加 .btn-* 修飾的裸 button」保底樣式
   （對齊 .btn-primary 尺寸），避免漏改的呼叫點變成無樣式按鈕。disabled 態
   改吃全域 button:disabled（styles.css），不再各自覆寫 opacity。 */
.ai-brain-inline-actions button:not([class*="btn-"]),
.ai-brain-hero-actions button:not([class*="btn-"]),
.ai-brain-card-heading button:not([class*="btn-"]),
.ai-brain-health-card button:not([class*="btn-"]),
.ai-brain-mini-table button:not([class*="btn-"]),
.ai-brain-session-list button:not([class*="btn-"]) {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px; /* 同 .btn（design:37；feat/design-1to1 由 7px 校正） */
  background: var(--c-btn-bg); /* feat/design-1to1：保底 primary 改吃主按鈕 token */
  color: var(--c-btn-fg);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
}

.ai-brain-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ai-brain-state-callout {
  margin-top: 12px;
}

.ai-brain-state-callout.loading {
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
}

.ai-brain-state-callout.error {
  /* #15449 第 5 刀：Keyword/OTD 的儲存/刪除結果提示改直接吃 --c-danger 系（理由同上） */
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.ai-brain-state-callout.success {
  background: var(--c-success-soft);
  color: var(--c-success);
}

/* config 存成功、但同步到 intent-router workflow 失敗——不是錯誤（那筆存好了），
   也不是全綠，所以獨立一個 warning 級別，比照 error/success 的做法吃 --c-warning 系。 */
.ai-brain-state-callout.warning {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.ai-brain-mini-table,
.ai-brain-session-list,
.ai-brain-contract-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ai-brain-card-search {
  min-width: 190px;
  border: 1px solid var(--agent-border);
  border-radius: 10px; /* design:58 .ap-input 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  color: var(--agent-text);
  padding: 6px 10px;
  font-size: 13px;
}

.ai-brain-history-smoke {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--agent-border);
  padding-top: 14px;
}

.ai-brain-history-smoke button {
  justify-self: start;
  cursor: pointer;
  border-radius: 10px; /* 同 .btn（design:37；feat/design-1to1 由 7px 校正） */
  background: var(--c-btn-bg); /* feat/design-1to1：改吃主按鈕 token */
  color: var(--c-btn-fg);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
}

.ai-brain-mini-table article,
.ai-brain-session-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 列表列卡 8px（design:484；feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 10px;
  transition: background 0.15s ease;
}

.ai-brain-mini-table article:hover,
.ai-brain-session-list article:hover {
  background: var(--c-surface-hover);
}

.ai-brain-mini-table strong,
.ai-brain-session-list strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-brain-mini-table article > span,
.ai-brain-session-list article > span {
  border-radius: 6px;
  background: var(--c-surface-card);
  color: var(--agent-text-muted);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.ai-brain-empty-state {
  border: 1px dashed var(--agent-border);
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
}

.ai-brain-contract-list div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--agent-text-muted);
  font-size: 0.82rem;
}

.ai-brain-contract-list .ok svg {
  color: var(--agent-success-text);
}

.ai-brain-contract-list .pending svg {
  color: var(--agent-warning-text);
}

.ai-brain-guidance-card,
.ai-brain-health-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.ai-brain-readiness-list {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.ai-brain-readiness-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 列表列卡 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 9px 10px;
  transition: background 0.15s ease;
}

.ai-brain-readiness-list div:hover {
  background: var(--c-surface-hover);
}

.ai-brain-readiness-list span {
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.ai-brain-readiness-list span.online,
.ai-brain-readiness-list span.loaded {
  background: var(--agent-success-bg);
  color: var(--agent-success-text);
}

.ai-brain-readiness-list span.empty {
  background: var(--agent-warning-bg);
  color: var(--agent-warning-text);
}

.ai-brain-readiness-list span.offline {
  background: var(--agent-error-bg);
  color: var(--agent-error-text);
}

.ai-brain-readiness-list strong {
  overflow: hidden;
  color: var(--agent-text);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-brain-readiness-list small {
  color: var(--agent-text-muted);
  font-size: 0.72rem;
}

.ai-brain-guidance-card > svg,
.ai-brain-health-card > svg {
  color: var(--agent-primary);
}

.ai-brain-health-card code {
  display: block;
  overflow-wrap: anywhere;
  border-radius: 8px; /* sunken 程式碼區塊統一 8px（feat/design-1to1 由 10px 校正） */
  background: var(--agent-surface-muted);
  padding: 10px;
  color: var(--agent-text-muted);
  font-size: 0.78rem;
}

.ai-brain-json-preview {
  margin-top: 12px;
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 卡片系 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 10px;
}

.ai-brain-nested-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--agent-border);
  padding-top: 14px;
}

.ai-brain-stacked-label {
  display: grid;
  gap: 6px;
  color: var(--agent-text-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.ai-brain-stacked-label textarea {
  width: 100%;
  border: 1px solid var(--agent-border);
  border-radius: 10px; /* design:58 .ap-textarea 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  color: var(--agent-text);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.ai-brain-keyword-chip-list,
.ai-brain-checkbox-list,
.ai-brain-turn-list {
  display: grid;
  gap: 8px;
}

.ai-brain-keyword-chip-list > span,
.ai-brain-checkbox-list label,
.ai-brain-turn-list article {
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 列表列卡 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 10px;
}

.ai-brain-keyword-chip-list > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto) auto;
  gap: 8px;
  align-items: center;
}

.ai-brain-keyword-chip-list strong,
.ai-brain-keyword-chip-list small,
.ai-brain-turn-list strong,
.ai-brain-turn-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-brain-keyword-chip-list small,
.ai-brain-turn-list small,
.ai-brain-checkbox-list small {
  color: var(--agent-text-muted);
  font-size: 0.72rem;
}

.ai-brain-keyword-chip-list button {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  /* #15449 第 5 刀：Keyword 詞條刪除鈕（× 鈕）改直接吃 --c-danger 系 */
  background: var(--c-danger-soft);
  color: var(--c-danger);
  width: 26px;
  height: 26px;
  font-weight: 900;
}

.ai-brain-checkbox-list label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ai-brain-checkbox-list input {
  accent-color: var(--agent-primary);
}

.ai-brain-turn-list article p {
  margin: 4px 0;
  color: var(--agent-text);
  line-height: 1.45;
}

.ai-brain-speaker-list-heading {
  margin-top: 18px;
}

.ai-brain-json-preview summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
}

.ai-brain-json-preview pre {
  overflow-x: auto;
  margin: 10px 0 0;
  white-space: pre-wrap;
  font-size: 0.76rem;
}

.ai-brain-metrics.ai-brain-metric-grid,
.ai-brain-metric-grid.ai-brain-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-brain-metric-card {
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 卡片系 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface-muted);
  padding: 12px;
}

.ai-brain-metric-card strong {
  display: block;
  color: var(--agent-primary);
  font-size: 1.2rem;
}

.ai-brain-form-card audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}

/* #15449 批次 B 第 1 項：Phrases 模組視覺補完（落差 #8），對照設計 4 張分類卡＋
   warning-soft 警示列（layout-spec `.dc.html:426-447`）。宿主自刻卡片（package
   沒有對應 phrases section），沿用本檔既有 ai-brain-* 命名慣例；外層
   `.agent-config-subsection`（styles.css 刀4）維持不動，這裡只補內層「單句卡片」
   與警示列視覺，不動 styles.css。現有 schema 只有 welcome/fallback/transfer 三
   欄（無 closing），故只渲染 3 張卡，非設計硬列的 4 張——資料限制，非疏漏。 */
.ai-brain-phrase-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 8px; /* design:454 警示列 radius 8px（feat/design-1to1 由 9px 校正） */
  background: var(--c-warning-soft);
  padding: 11px 13px;
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.ai-brain-phrase-warning-icon {
  flex: none;
  color: var(--c-warning);
  font-size: 14px;
}

.ai-brain-phrase-list {
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.ai-brain-phrase-card {
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* design:459-471 分類卡 radius 8px（feat/design-1to1 由 11px 校正） */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 14px 15px;
}

.ai-brain-phrase-card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}

.ai-brain-phrase-badge {
  display: inline-flex;
  flex: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.ai-brain-phrase-badge.greeting {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.ai-brain-phrase-badge.fallback {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.ai-brain-phrase-badge.transfer {
  background: var(--c-info-soft);
  color: var(--c-info);
}

.ai-brain-phrase-card textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--agent-border);
  border-radius: 10px; /* design:58 .ap-textarea 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  color: var(--agent-text);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.ai-brain-phrase-card textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

/* #15449 批次 B 第 2 項：OTD 模組視覺補完（落差 #10）——情境改卡片＋標籤列，
   對話列表加狀態色點（layout-spec `.dc.html:450-478`）。scenario 資料無
   description/status/tags 欄位（AIBrainOTDScenario 只有 id/key/name），標籤內容
   改用可由既有資料推導的值（情境 id、對應對話數），不新增/假造欄位。 */
.ai-brain-scenario-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ai-brain-scenario-card {
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* design:511,520 情境卡 radius 8px（feat/design-1to1 由 11px 校正） */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 13px 15px;
}

.ai-brain-scenario-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-brain-scenario-card strong {
  display: block;
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-brain-scenario-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.ai-brain-scenario-tags span {
  border-radius: 8px; /* design:36 .ap-tag radius 8px（feat/design-1to1 由 6px 校正） */
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  padding: 3px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

.ai-brain-convo-list {
  display: grid;
  margin-top: 4px;
}

.ai-brain-convo-list article {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--c-border-default);
  padding: 11px 15px;
}

.ai-brain-convo-list article:last-child {
  border-bottom: 0;
}

.ai-brain-convo-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-text-tertiary);
}

.ai-brain-convo-dot.active {
  background: var(--c-success);
}

.ai-brain-convo-dot.ended {
  background: var(--c-text-tertiary);
}

.ai-brain-convo-dot.attention {
  background: var(--c-warning);
}

.ai-brain-convo-body {
  min-width: 0;
  flex: 1;
}

.ai-brain-convo-body strong {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-brain-convo-body small {
  display: block;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

.ai-brain-convo-time {
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 10.5px;
}

.ai-brain-convo-list article > button {
  flex: none;
}

@media (max-width: 1180px) {
  /* #15449 第 8 刀：.ai-brain-module-grid 固定 3 欄的斷點覆寫已移除——
     改用 auto-fill,minmax(150px,1fr) 依容器寬度自動排欄，見上方定義。
     fix/15449-10：.ai-brain-config-grid 已改 flex column（恆定單欄、runtime
     側欄恆在下方），不再需要這個斷點覆寫，故移除；.ai-brain-two-column
     維持原斷點行為（Sessions/CallHistory/Keyword/OTD/Speaker 仍是有意義的
     並排兩欄，非本次回報範圍）。 */
  .ai-brain-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ai-brain-hero {
    flex-direction: column;
  }

  .ai-brain-hero-actions {
    align-items: stretch;
  }

  .ai-brain-context-grid,
  .ai-brain-form-grid,
  .ai-brain-form-grid.compact,
  .ai-brain-metrics.ai-brain-metric-grid,
  .ai-brain-metric-grid.ai-brain-metrics {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   關鍵字群組（.kw-*）— 卡片式資訊架構，參考 ai-brain KeywordPanel
   Stage 1：搜尋列 + 可展開群組卡片 + 關鍵字表格。卡內三分頁是 Stage 2。
   只用既有 --c-* token；動效一律走全域 --motion-*（第五刀併入），尺寸值提成 --kw-* 具名變數。
   ========================================================================== */

.kw-page {
  --kw-radius: 12px;
  --kw-radius-sm: 8px;
  --kw-gap: 12px;

  display: flex;
  flex-direction: column;
  gap: var(--kw-gap);
}

/* ---------- 工具列 ---------- */

.kw-toolbar {
  display: flex;
  align-items: center;
  gap: var(--kw-gap);
  flex-wrap: wrap;
}

.kw-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--c-surface-card);
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.kw-search:focus-within {
  border-color: var(--c-accent);
}

.kw-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--agent-text-muted);
}

.kw-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-size: 14px;
  color: var(--agent-text);
}

.kw-count-label {
  flex: none;
  font-size: 13px;
  color: var(--agent-text-muted);
  font-variant-numeric: tabular-nums;
}

.kw-compatibility,
.kw-api-notice,
.kw-api-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.kw-compatibility > svg,
.kw-api-notice > svg,
.kw-api-unavailable > svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
}

.kw-compatibility.is-warning,
.kw-api-unavailable {
  border-color: var(--c-warning);
  background: var(--c-warning-soft);
  color: var(--agent-warning-text);
}

.kw-api-unavailable strong {
  display: block;
  color: var(--agent-text);
  font-size: 13px;
}

.kw-api-unavailable p {
  margin: 3px 0 0;
}

/* ---------- 按鈕（8 狀態） ---------- */

/* 按鈕已收編至全域 ui-btn 系統（styles.css）。 */

/* ---------- 建立／編輯表單（行內展開） ---------- */

.kw-form-card {
  display: flex;
  flex-direction: column;
  gap: var(--kw-gap);
  padding: 16px;
  border: 1px solid var(--c-accent);
  border-radius: var(--kw-radius);
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.kw-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kw-form-head h4 {
  margin: 0;
  font-size: 15px;
  color: var(--agent-text);
}

.kw-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kw-gap);
}

.kw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--agent-text-muted);
}

.kw-field-wide {
  grid-column: 1 / -1;
}

.kw-field input,
.kw-field textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--c-surface-card);
  color: var(--agent-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.kw-field input:focus,
.kw-field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.kw-switch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--agent-surface-muted);
}

.kw-switch-row legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--agent-text-muted);
}

.kw-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--agent-text);
  cursor: pointer;
}

.kw-switch input {
  width: 15px;
  height: 15px;
  accent-color: var(--c-accent);
  cursor: pointer;
}

.kw-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kw-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--c-danger);
}

.kw-danger-zone strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: var(--c-danger);
}

.kw-danger-zone p {
  margin: 0;
  font-size: 12px;
  color: var(--agent-text-muted);
}

.kw-delete-confirm {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-width: min(100%, 430px);
}

.kw-delete-confirm .kw-field {
  flex: 1;
}

.kw-toast {
  position: fixed;
  z-index: 30;
  top: 20px;
  right: 20px;
  padding: 9px 14px;
  border: 1px solid var(--c-success);
  border-radius: var(--kw-radius-sm);
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  color: var(--c-success);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- 群組卡片 ---------- */

.kw-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw-card {
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius);
  background: var(--c-surface-card);
  padding: 14px 16px;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}

.kw-card:hover {
  border-color: var(--c-accent-soft);
}

.kw-card.is-expanded {
  border-color: var(--c-accent);
  box-shadow: var(--c-shadow-card);
}

.kw-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 標題整條可點＝展開熱區，比只點小箭頭好按 */
.kw-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.kw-card-title:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.kw-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--agent-text-muted);
  transition: transform var(--motion-base) var(--motion-ease);
}

.kw-card.is-expanded .kw-chevron {
  transform: rotate(180deg);
  color: var(--c-accent);
}

.kw-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--agent-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.kw-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
}

.kw-badge.is-active {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.kw-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 8px 3px 5px;
  border: 1px solid var(--c-border-default);
  border-radius: 999px;
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
  font-size: 12px;
  cursor: pointer;
}

.kw-status-toggle > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--agent-text-muted);
  box-shadow: inset 0 0 0 4px var(--c-surface-card);
}

.kw-status-toggle.is-active {
  border-color: var(--c-success);
  background: var(--c-success-soft);
  color: var(--c-success);
}

.kw-status-toggle.is-active > span {
  background: var(--c-success);
}

.kw-status-toggle:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.kw-status-toggle:disabled {
  opacity: 0.6;
  cursor: wait;
}

.kw-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.kw-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-left: 24px;
  font-size: 12px;
  color: var(--agent-text-muted);
}

.kw-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.kw-chip-neutral {
  background: var(--agent-surface-muted);
  color: var(--agent-text-muted);
}

.kw-id {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 4px 2px 7px;
  border: 1px solid var(--c-border-default);
  border-radius: 6px;
  background: var(--agent-surface-muted);
}

.kw-id code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--agent-text-muted);
  overflow-wrap: anywhere;
}

.kw-desc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 8px;
  border-left: 1px solid var(--c-border-default);
  color: var(--agent-text-muted);
  font-size: 12px;
}

.kw-desc svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.kw-confirm-actions {
  display: flex;
  gap: 8px;
}

/* ---------- 展開區 ---------- */

.kw-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-default);
}

.kw-panel[hidden] {
  display: none;
}

.kw-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.kw-panel-head h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--agent-text-muted);
}

.kw-panel-empty {
  margin: 0;
  padding: 16px 0;
  text-align: center;
  font-size: 13px;
  color: var(--agent-text-muted);
}

.kw-draft-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.kw-draft-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kw-draft-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--c-surface-card);
  color: var(--agent-text);
  font-size: 14px;
}

.kw-draft-row input:focus {
  outline: none;
  border-color: var(--c-accent);
}

/* ---------- 關鍵字表格 ---------- */

.kw-table {
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  overflow: hidden;
}

.kw-table-head,
.kw-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(76px, auto);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.kw-table-head {
  background: var(--agent-surface-muted);
  font-size: 12px;
  color: var(--agent-text-muted);
}

.kw-operation-head {
  text-align: right;
}

/* 1900+ 筆時只渲染可視區，捲動不掉幀 */
.kw-table-body {
  max-height: 320px;
  overflow-y: auto;
}

.kw-table-row {
  border-top: 1px solid var(--c-border-default);
  content-visibility: auto;
  contain-intrinsic-size: auto 41px;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.kw-table-row:hover {
  background: var(--agent-surface-muted);
}

.kw-cell-keyword {
  font-size: 14px;
  color: var(--agent-text);
  overflow-wrap: anywhere;
}

.kw-cell-pinyin {
  font-size: 12px;
  color: var(--agent-text-muted);
  overflow-wrap: anywhere;
}

.kw-column-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--agent-text-muted);
}

.kw-keyword-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kw-search-compact {
  flex: 1 1 220px;
}

.kw-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--agent-text-muted);
  font-size: 12px;
}

.kw-sort svg {
  width: 15px;
  height: 15px;
}

.kw-sort select {
  padding: 7px 28px 7px 8px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--c-surface-card);
  color: var(--agent-text);
}

.kw-result-count {
  color: var(--agent-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.kw-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.kw-setting-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--agent-surface-muted);
}

.kw-setting-value span {
  font-size: 11px;
  color: var(--agent-text-muted);
}

.kw-setting-value strong {
  font-size: 13px;
  color: var(--agent-text);
}

.kw-setting-value strong.is-unknown {
  color: var(--agent-warning-text);
}

.kw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

.kw-pagination span {
  font-size: 12px;
  color: var(--agent-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 空狀態與骨架 ---------- */

.kw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 16px;
  border: 1px dashed var(--c-border-default);
  border-radius: var(--kw-radius);
  color: var(--agent-text-muted);
  font-size: 14px;
}

.kw-empty p {
  margin: 0;
}

.kw-list-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius);
  background: var(--c-surface-card);
  color: var(--agent-text-muted);
  font-size: 14px;
}

.kw-list-loading > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kw-list-loading > div:first-child svg {
  width: 16px;
  height: 16px;
  animation: kw-spin 0.9s linear infinite;
}

.kw-list-loading .kw-skeleton {
  margin-bottom: 0;
}

.kw-load-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-danger);
  border-radius: var(--kw-radius);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.kw-load-error > svg {
  width: 18px;
  height: 18px;
}

.kw-load-error strong {
  font-size: 14px;
}

.kw-load-error p {
  margin: 3px 0 0;
  font-size: 13px;
}

.kw-load-error .ui-btn {
  background: var(--c-surface-card);
}

.kw-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.kw-skeleton span {
  height: 36px;
  border-radius: var(--kw-radius-sm);
  background: var(--agent-surface-muted);
  animation: kw-pulse 1.2s var(--motion-ease) infinite;
}

.kw-skeleton span:nth-child(2) {
  animation-delay: 0.12s;
}

.kw-skeleton span:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes kw-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes kw-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 手機 ---------- */

@media (max-width: 720px) {
  .kw-toolbar {
    align-items: stretch;
  }

  .kw-load-error {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kw-load-error .ui-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .kw-search {
    flex-basis: 100%;
  }

  .kw-form-grid {
    grid-template-columns: 1fr;
  }

  .kw-card-meta {
    padding-left: 0;
  }

  .kw-table-head,
  .kw-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
    gap: 8px;
  }

  /* 觸控沒有 hover，刪除鈕常駐 */
  .kw-row-delete {
    opacity: 1;
  }

  .kw-draft-row {
    flex-wrap: wrap;
  }

  .kw-draft-row input {
    flex-basis: 100%;
  }

  .kw-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-page *,
  .kw-page *::before,
  .kw-page *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── 系統狀態健康儀錶板（#16271）──────────────────────────────────────────
   取代原本的工程診斷卡。原本那張秀的是 UUID、內部 proxy 網址與內部單號，
   對 PM 沒有意義；這裡改成先給結論、再給逐項、最後給下一步。 */
.sys-status {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sys-verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--agent-border);
  background: var(--agent-surface);
}

.sys-verdict-ok {
  border-color: color-mix(in srgb, var(--agent-success-text) 35%, transparent);
  background: var(--agent-success-bg);
}

.sys-verdict-bad {
  border-color: color-mix(in srgb, var(--agent-error-text) 35%, transparent);
  background: var(--agent-error-bg);
}

.sys-verdict-icon {
  display: flex;
  flex: 0 0 auto;
}

.sys-verdict-ok .sys-verdict-icon {
  color: var(--agent-success-text);
}

.sys-verdict-bad .sys-verdict-icon {
  color: var(--agent-error-text);
}

.sys-verdict-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sys-verdict-body h4 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 650;
  color: var(--agent-text);
}

.sys-verdict-body p {
  margin: 0;
  font-size: 13px;
  color: var(--agent-text-muted);
}

.sys-cap-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys-cap {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--agent-border);
  background: var(--agent-surface);
}

.sys-cap-icon {
  display: flex;
  flex: 0 0 auto;
  padding-top: 1px;
  color: var(--agent-text-muted);
}

.sys-cap-ready .sys-cap-icon {
  color: var(--agent-success-text);
}

.sys-cap-warning .sys-cap-icon {
  color: var(--agent-warning-text);
}

.sys-cap-blocked .sys-cap-icon {
  color: var(--agent-error-text);
}

.sys-cap-blocked {
  border-color: color-mix(in srgb, var(--agent-error-text) 30%, transparent);
}

.sys-cap-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sys-cap-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sys-cap-head strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--agent-text);
}

.sys-cap-state {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--agent-text-muted);
}

.sys-cap-ready .sys-cap-state {
  color: var(--agent-success-text);
}

.sys-cap-warning .sys-cap-state {
  color: var(--agent-warning-text);
}

.sys-cap-blocked .sys-cap-state {
  color: var(--agent-error-text);
}

.sys-cap-detail {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--agent-text-muted);
  overflow-wrap: anywhere;
}

.sys-cap-problem {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--agent-text);
}

.sys-cap-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--agent-text-muted);
}

.sys-cap-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--agent-primary);
  cursor: pointer;
  text-decoration: underline;
}

.sys-freshness {
  margin: 0;
  font-size: 12.5px;
  color: var(--agent-text-muted);
}

.sys-freshness-stale {
  color: var(--agent-warning-text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .sys-verdict {
    flex-wrap: wrap;
  }
}

/* ---------- 卡內三分頁（Stage 2）----------
   分頁就在同一張卡片內切換，不再多包容器：.kw-panel > .kw-tabs + 一個 .kw-tabbody。 */

.kw-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--c-border-default);
  overflow-x: auto;
}

.kw-tab {
  flex: none;
  padding: 8px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--agent-text-muted);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}

.kw-tab:hover {
  color: var(--agent-text);
}

.kw-tab:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: -2px;
}

.kw-tab.is-active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}

.kw-tabbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kw-hint {
  margin: 0;
  font-size: 12px;
  color: var(--agent-text-muted);
}

/* 勘誤詞表：正確詞 / 錯誤詞 / 動作（動作欄要放兩顆鈕，比關鍵字表寬） */
.kw-table-rep .kw-table-head,
.kw-table-rep .kw-table-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
}

.kw-cell-errors {
  font-size: 13px;
  color: var(--agent-text-muted);
  overflow-wrap: anywhere;
}

.kw-inline-input {
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--c-accent);
  border-radius: 6px;
  background: var(--c-surface-card);
  color: var(--agent-text);
  font-size: 13px;
}

.kw-inline-input:focus {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 1px;
}

.kw-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ---------- 文字校正快速測試 ---------- */

.kw-correct-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: var(--kw-radius-sm);
  background: var(--agent-surface-muted);
}

.kw-correct-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.kw-correct-row > span {
  font-size: 12px;
  color: var(--agent-text-muted);
}

.kw-correct-row p {
  margin: 0;
  font-size: 14px;
  color: var(--agent-text);
  overflow-wrap: anywhere;
}

.kw-correct-out {
  font-weight: 600;
  color: var(--c-accent);
}

.kw-correct-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kw-correct-details li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-default);
  font-size: 12px;
}

.kw-correct-details code {
  color: var(--c-danger);
  font-size: 12px;
}

.kw-correct-details strong {
  color: var(--c-accent);
}

@media (max-width: 720px) {
  .kw-danger-zone,
  .kw-delete-confirm {
    align-items: stretch;
    flex-direction: column;
  }

  .kw-delete-confirm {
    width: 100%;
  }

  .kw-table-rep .kw-table-head,
  .kw-table-rep .kw-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  }

  .kw-correct-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* 勘誤詞數量抓失敗時的可點重試 chip（外觀沿用 neutral chip，只加可點的提示） */
.kw-chip-retry {
  border: 1px solid var(--c-danger);
  color: var(--c-danger);
  cursor: pointer;
  font: inherit;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.kw-chip-retry:hover {
  background: var(--c-danger-soft);
}

.kw-chip-retry:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}
/* agent 編輯頁 1:1 還原設計稿的版面層（Agent-編輯-v2.dc.html）。
 *
 * 放獨立檔而不是塞進 styles.css / src/ui/components.css：
 * 那兩支同時有別人在改，併起來衝突面太大（SetupStepIntent 匯入 WorkflowStudio.css
 * 是同一個先例）。這裡只放「版面」，元件一律用既有 ui-*，不重刻。
 *
 * 一律吃 token，零硬編色、零手刻毫秒。
 */

:root {
  /* 稿的 hero 漸層第三停點 #7ED3F7（比 --c-accent 亮、比 --c-accent-soft 濃）。
     token 層目前沒有這一階；先在這裡具名，之後應該搬進 src/ui/tokens.css
     與 --c-accent / --c-accent-strong 並列成完整 accent 階。 */
  --c-accent-lift: #7ed3f7;
  --ae-hero-gradient: linear-gradient(
    140deg,
    var(--c-accent-strong),
    var(--c-accent) 55%,
    var(--c-accent-lift)
  );
}

/* ── Hero ───────────────────────────────────────────────── */

.ae-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 0;
}

.ae-hero-mark {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ae-hero-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

.ae-hero-body {
  min-width: 0;
  flex: 1;
}

.ae-hero-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 6px -6px;
  padding: 2px 6px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--c-text-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.ae-hero-back:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

.ae-hero-back:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.ae-hero-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ae-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 0;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--c-text-3);
}

.ae-hero-dot {
  color: var(--c-border-strong);
}

/* 右側統計：只放真的有資料源的，缺的不留佔位（見交件報告） */
.ae-hero-stats {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 6px;
}

.ae-hero-stat {
  text-align: right;
}

.ae-hero-stat-n {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}

.ae-hero-stat-k {
  font-size: 10px;
  color: var(--c-muted);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* ── 雙欄 ───────────────────────────────────────────────── */

.ae-main2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 20px;
  align-items: start;
  /* 底部留白給浮起的 savebar，內容才不會被蓋住 */
  padding-bottom: 96px;
}

.ae-col {
  min-width: 0;
}

.ae-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ae-rail-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}

.ae-rail-hint {
  font-size: 11.5px;
  color: var(--c-text-3);
  line-height: 1.55;
  margin-top: 2px;
}

.ae-rail-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--c-border);
}

.ae-rail-kv:first-of-type {
  border-top: none;
}

.ae-rail-k {
  font-size: 11.5px;
  color: var(--c-text-3);
}

.ae-rail-v {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  color: var(--c-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ae-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

/* ── 右欄的可編輯欄位（稿右欄「語音」「語言」）──────────────
 * 控制項本體一律用既有的 ui-field / ui-pop / ui-select / ui-label；
 * 這裡只補稿裡寫成 inline style 的那幾個小零件（頭像圓章、分組標題、選中勾）。
 */

.ae-rail-note {
  margin-top: 6px;
  color: var(--c-text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.ae-rail-note.is-warn {
  color: var(--c-warning);
}

/* .ui-select 本身不設寬度（它也用在標題列那種靠內容撐的位置）；右欄要滿版。 */
.ae-rail-select {
  width: 100%;
}

/* ui-pop 是絕對定位，錨點要在欄位這一層而不是整個 rail，否則會浮到欄位頂端。 */
.ae-rail-pop-anchor {
  position: relative;
}

.ae-voice-initial,
.ae-voice-opt-initial {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}

/* 觸發鈕上的頭像是「選中態」，用 accent；選單列裡的是候選，用中性底。 */
.ae-voice-initial {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.ae-voice-opt-initial {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

.ae-voice-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ae-voice-chevron {
  flex: none;
  color: var(--c-text-muted);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.ae-voice-chevron.is-open {
  transform: rotate(180deg);
}

/* 策展／更多聲音／目前設定的分組標題。清單有數十筆，沒有分組會變一長條。 */
.ae-voice-group {
  padding: 8px 12px 4px;
  color: var(--c-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ae-voice-opt-text {
  flex: 1;
  min-width: 0;
}

.ae-voice-opt-name {
  display: block;
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ae-voice-opt-desc {
  display: block;
  color: var(--c-text-muted);
  font-size: 10.5px;
}

.ae-voice-opt-check {
  flex: none;
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 800;
}

/* 稿的斷點：1180px 以下雙欄塌成單欄 */
@media (max-width: 1180px) {
  .ae-main2 {
    grid-template-columns: 1fr;
  }

  .ae-rail {
    position: static;
  }
}

/* ── Savebar ────────────────────────────────────────────── */

.ae-savebar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: flex-end;
  margin: 0 -22px -22px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--c-card) 86%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--motion-savebar),
    opacity var(--motion-slow) var(--motion-ease);
}

.ae-savebar.is-dirty {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.ae-savebar-msg {
  margin-right: auto;
  font-size: 11.5px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .ae-savebar {
    transition-duration: 1ms;
  }

  .ae-hero-back {
    transition-duration: 1ms;
  }
}

/* ── 內容欄 + dock 的並排外殼 ───────────────────────── */

/* .agent-workbench 本身就是 flex column + gap:16px，這裡把主軸翻成 row：
   直向的 gap 要還給 .ae-shell-main，橫向不留縫（dock 收合時才不會留 16px 空白）。 */
/* 提權到 .agent-workbench.ae-shell：src/styles.css 的 import 順序在本檔之後，
   同權重的 .agent-workbench{flex-direction:column} 會贏（components.css:15-17 也記過同一個坑）。 */
.agent-workbench.ae-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-height: 0;
}

.ae-shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ae-dock-toggle {
  flex: none;
  align-self: flex-start;
}

/* ── Preview dock（設計稿 .ae-dock）────────────────────────
 * 純 UI 外殼，不接通話邏輯。寬度過場而非卸載——稿就是 width 0↔372px。
 */

.ae-dock {
  flex: none;
  overflow: hidden;
  width: 0;
  background: var(--c-card);
  display: flex;
  flex-direction: column;
  transition: width var(--motion-dock);
}

.ae-dock.is-open {
  width: 372px;
}

/* 固定內寬：外層寬度收合時內容不重排，過場才不會抖 */
/* 邊框放內層：外層 width:0 時才真的收成 0，不會在版面右緣留一條孤線 */
.ae-dock-inner {
  width: 372px;
  border-left: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* 捲動容器是 .agent-admin-main，頁面會長；不黏住的話撥號鍵會被推到頁尾。
     128px = hero 上緣在視窗裡的位置（實測 126px）＋ 收尾留白，
     讓底部的撥號列剛好停在視窗內而不是被裁掉。 */
  position: sticky;
  top: 0;
  height: calc(100vh - 128px);
}

.ae-dock-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-border);
}

.ae-dock-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}

.ae-dock-seg {
  margin-left: auto;
}

.ae-dock-tag {
  flex: none;
}

.ae-dock-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--c-page);
}

.ae-bars {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 76px;
}

.ae-bar {
  width: 7px;
  border-radius: 4px;
  background: var(--c-border-2);
  transform-origin: center;
  transition: background var(--motion-slow) var(--motion-ease);
}

.ae-bars.is-live .ae-bar {
  background: var(--c-accent);
  animation: ae-eq var(--motion-eq) ease-in-out infinite;
}

@keyframes ae-eq {
  0%,
  100% {
    transform: scaleY(0.28);
  }
  50% {
    transform: scaleY(1);
  }
}

.ae-dock-meta {
  text-align: center;
}

.ae-dock-agent {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.ae-dock-status {
  font-size: 11.5px;
  color: var(--c-muted);
  font-family: var(--mono);
  margin-top: 4px;
}

.ae-dock-actions {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px;
  border-top: 1px solid var(--c-border);
}

.ae-mini {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.ae-mini:hover {
  background: var(--c-hover);
  color: var(--c-text);
}

.ae-mini:focus-visible,
.ae-call:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.ae-call-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ae-call {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-inverse, #fff);
  background: var(--c-call-live);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-call-live) 35%, transparent);
  transition:
    transform var(--motion-base) var(--motion-ease),
    background var(--motion-slow) var(--motion-ease),
    box-shadow var(--motion-slow) var(--motion-ease);
}

.ae-call:hover {
  transform: scale(1.05);
}

/* 通話中：轉紅並跑擴散環 */
.ae-call.is-live {
  background: var(--c-danger);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-danger) 35%, transparent);
}

.ae-call.is-live::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c-danger) 50%, transparent);
  animation: ae-pulse var(--motion-pulse) ease-out infinite;
  pointer-events: none;
}

@keyframes ae-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* 稿的斷點：1180px 以下 dock 即使 open 也收成 0 */
@media (max-width: 1180px) {
  .ae-dock.is-open {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ae-dock,
  .ae-call,
  .ae-mini,
  .ae-bar {
    transition-duration: 1ms;
  }

  .ae-bars.is-live .ae-bar,
  .ae-call.is-live::before {
    animation: none;
  }
}

/* ── 對話語句區塊（Agent 分頁左欄）────────────────────────────────────── */
.ae-speech {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
}
.ae-speech-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ae-speech-field .ui-hint {
  margin-top: 2px;
}

/* 1180px 以下 dock 一定是寬度 0（見上方 @media），這顆切換鈕按了不會有任何
   結果——aria-pressed 還會翻成 true，等於騙使用者。同一斷點直接收起來。
   codex `#143865`。 */
@media (max-width: 1180px) {
  /* 雙 class 提特異性：.ui-btn 的 display 也是 0,1,0 且後載入，單一 class 選不贏。 */
  .ae-dock-toggle.ae-dock-toggle {
    display: none;
  }
}
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --acp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --acp-spacing: 0.25rem;
    --acp-text-xs: 0.75rem;
    --acp-text-xs--line-height: calc(1 / 0.75);
    --acp-text-sm: 0.875rem;
    --acp-text-sm--line-height: calc(1.25 / 0.875);
    --acp-font-weight-normal: 400;
    --acp-font-weight-medium: 500;
    --acp-radius-lg: 0.5rem;
    --acp-radius-xl: 0.75rem;
    --acp-default-transition-duration: 150ms;
    --acp-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --acp-color-surface-card: var(--c-surface-card);
    --acp-color-surface-sunken: var(--c-surface-sunken);
    --acp-color-text-primary: var(--c-text-primary);
    --acp-color-text-secondary: var(--c-text-secondary);
    --acp-color-text-tertiary: var(--c-text-tertiary);
    --acp-color-text-muted: var(--c-text-muted);
    --acp-color-text-placeholder: var(--c-text-placeholder);
    --acp-color-border-default: var(--c-border-default);
    --acp-color-accent: var(--c-accent);
    --acp-color-accent-strong: var(--c-accent-strong);
    --acp-color-accent-soft: var(--c-accent-soft);
    --acp-color-danger: var(--c-danger);
    --acp-color-warning: var(--c-warning);
    --acp-color-toggle-thumb: var(--c-toggle-thumb);
  }
}
@layer utilities {
  .acp\:absolute {
    position: absolute;
  }
  .acp\:relative {
    position: relative;
  }
  .acp\:top-0\.5 {
    top: calc(var(--acp-spacing) * 0.5);
  }
  .acp\:left-0\.5 {
    left: calc(var(--acp-spacing) * 0.5);
  }
  .acp\:z-20 {
    z-index: 20;
  }
  .acp\:-mx-6 {
    margin-inline: calc(var(--acp-spacing) * -6);
  }
  .acp\:mt-0\.5 {
    margin-top: calc(var(--acp-spacing) * 0.5);
  }
  .acp\:mt-1 {
    margin-top: var(--acp-spacing);
  }
  .acp\:mt-2 {
    margin-top: calc(var(--acp-spacing) * 2);
  }
  .acp\:mb-1 {
    margin-bottom: var(--acp-spacing);
  }
  .acp\:mb-2 {
    margin-bottom: calc(var(--acp-spacing) * 2);
  }
  .acp\:block {
    display: block;
  }
  .acp\:contents {
    display: contents;
  }
  .acp\:flex {
    display: flex;
  }
  .acp\:grid {
    display: grid;
  }
  .acp\:inline-flex {
    display: inline-flex;
  }
  .acp\:h-3 {
    height: calc(var(--acp-spacing) * 3);
  }
  .acp\:h-3\.5 {
    height: calc(var(--acp-spacing) * 3.5);
  }
  .acp\:h-4 {
    height: calc(var(--acp-spacing) * 4);
  }
  .acp\:h-5 {
    height: calc(var(--acp-spacing) * 5);
  }
  .acp\:h-6 {
    height: calc(var(--acp-spacing) * 6);
  }
  .acp\:max-h-48 {
    max-height: calc(var(--acp-spacing) * 48);
  }
  .acp\:max-h-56 {
    max-height: calc(var(--acp-spacing) * 56);
  }
  .acp\:min-h-\[42px\] {
    min-height: 42px;
  }
  .acp\:min-h-\[44px\] {
    min-height: 44px;
  }
  .acp\:w-3 {
    width: calc(var(--acp-spacing) * 3);
  }
  .acp\:w-3\.5 {
    width: calc(var(--acp-spacing) * 3.5);
  }
  .acp\:w-4 {
    width: calc(var(--acp-spacing) * 4);
  }
  .acp\:w-5 {
    width: calc(var(--acp-spacing) * 5);
  }
  .acp\:w-11 {
    width: calc(var(--acp-spacing) * 11);
  }
  .acp\:w-16 {
    width: calc(var(--acp-spacing) * 16);
  }
  .acp\:w-24 {
    width: calc(var(--acp-spacing) * 24);
  }
  .acp\:w-32 {
    width: calc(var(--acp-spacing) * 32);
  }
  .acp\:w-48 {
    width: calc(var(--acp-spacing) * 48);
  }
  .acp\:w-72 {
    width: calc(var(--acp-spacing) * 72);
  }
  .acp\:w-full {
    width: 100%;
  }
  .acp\:max-w-\[140px\] {
    max-width: 140px;
  }
  .acp\:min-w-0 {
    min-width: 0;
  }
  .acp\:flex-1 {
    flex: 1;
  }
  .acp\:shrink-0 {
    flex-shrink: 0;
  }
  .acp\:translate-x-5 {
    --tw-translate-x: calc(var(--acp-spacing) * 5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .acp\:-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .acp\:cursor-not-allowed {
    cursor: not-allowed;
  }
  .acp\:cursor-pointer {
    cursor: pointer;
  }
  .acp\:resize-none {
    resize: none;
  }
  .acp\:list-none {
    list-style-type: none;
  }
  .acp\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .acp\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .acp\:flex-wrap {
    flex-wrap: wrap;
  }
  .acp\:items-center {
    align-items: center;
  }
  .acp\:justify-between {
    justify-content: space-between;
  }
  .acp\:gap-1 {
    gap: var(--acp-spacing);
  }
  .acp\:gap-1\.5 {
    gap: calc(var(--acp-spacing) * 1.5);
  }
  .acp\:gap-2 {
    gap: calc(var(--acp-spacing) * 2);
  }
  .acp\:gap-3 {
    gap: calc(var(--acp-spacing) * 3);
  }
  .acp\:gap-4 {
    gap: calc(var(--acp-spacing) * 4);
  }
  .acp\:space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--acp-spacing) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--acp-spacing) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .acp\:space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--acp-spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--acp-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .acp\:space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--acp-spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--acp-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .acp\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .acp\:overflow-hidden {
    overflow: hidden;
  }
  .acp\:overflow-y-auto {
    overflow-y: auto;
  }
  .acp\:rounded {
    border-radius: 0.25rem;
  }
  .acp\:rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .acp\:rounded-lg {
    border-radius: var(--acp-radius-lg);
  }
  .acp\:rounded-xl {
    border-radius: var(--acp-radius-xl);
  }
  .acp\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .acp\:border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .acp\:border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .acp\:border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .acp\:border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .acp\:border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .acp\:border-accent {
    border-color: var(--acp-color-accent);
  }
  .acp\:border-accent\/30 {
    border-color: var(--acp-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--acp-color-accent) 30%, transparent);
    }
  }
  .acp\:border-border-default {
    border-color: var(--acp-color-border-default);
  }
  .acp\:bg-accent {
    background-color: var(--acp-color-accent);
  }
  .acp\:bg-accent-soft {
    background-color: var(--acp-color-accent-soft);
  }
  .acp\:bg-accent\/15 {
    background-color: var(--acp-color-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--acp-color-accent) 15%, transparent);
    }
  }
  .acp\:bg-surface-card {
    background-color: var(--acp-color-surface-card);
  }
  .acp\:bg-surface-sunken {
    background-color: var(--acp-color-surface-sunken);
  }
  .acp\:bg-toggle-thumb {
    background-color: var(--acp-color-toggle-thumb);
  }
  .acp\:bg-transparent {
    background-color: transparent;
  }
  .acp\:p-1\.5 {
    padding: calc(var(--acp-spacing) * 1.5);
  }
  .acp\:p-4 {
    padding: calc(var(--acp-spacing) * 4);
  }
  .acp\:px-0\.5 {
    padding-inline: calc(var(--acp-spacing) * 0.5);
  }
  .acp\:px-1\.5 {
    padding-inline: calc(var(--acp-spacing) * 1.5);
  }
  .acp\:px-2 {
    padding-inline: calc(var(--acp-spacing) * 2);
  }
  .acp\:px-3 {
    padding-inline: calc(var(--acp-spacing) * 3);
  }
  .acp\:px-4 {
    padding-inline: calc(var(--acp-spacing) * 4);
  }
  .acp\:px-6 {
    padding-inline: calc(var(--acp-spacing) * 6);
  }
  .acp\:py-0\.5 {
    padding-block: calc(var(--acp-spacing) * 0.5);
  }
  .acp\:py-1 {
    padding-block: var(--acp-spacing);
  }
  .acp\:py-1\.5 {
    padding-block: calc(var(--acp-spacing) * 1.5);
  }
  .acp\:py-2 {
    padding-block: calc(var(--acp-spacing) * 2);
  }
  .acp\:py-2\.5 {
    padding-block: calc(var(--acp-spacing) * 2.5);
  }
  .acp\:py-3 {
    padding-block: calc(var(--acp-spacing) * 3);
  }
  .acp\:py-4 {
    padding-block: calc(var(--acp-spacing) * 4);
  }
  .acp\:pt-3 {
    padding-top: calc(var(--acp-spacing) * 3);
  }
  .acp\:pr-1 {
    padding-right: var(--acp-spacing);
  }
  .acp\:pl-2 {
    padding-left: calc(var(--acp-spacing) * 2);
  }
  .acp\:text-left {
    text-align: left;
  }
  .acp\:text-right {
    text-align: right;
  }
  .acp\:font-mono {
    font-family: var(--acp-font-mono);
  }
  .acp\:text-sm {
    font-size: var(--acp-text-sm);
    line-height: var(--tw-leading, var(--acp-text-sm--line-height));
  }
  .acp\:text-xs {
    font-size: var(--acp-text-xs);
    line-height: var(--tw-leading, var(--acp-text-xs--line-height));
  }
  .acp\:text-\[10px\] {
    font-size: 10px;
  }
  .acp\:text-\[11px\] {
    font-size: 11px;
  }
  .acp\:text-\[12px\] {
    font-size: 12px;
  }
  .acp\:font-medium {
    --tw-font-weight: var(--acp-font-weight-medium);
    font-weight: var(--acp-font-weight-medium);
  }
  .acp\:font-normal {
    --tw-font-weight: var(--acp-font-weight-normal);
    font-weight: var(--acp-font-weight-normal);
  }
  .acp\:text-accent {
    color: var(--acp-color-accent);
  }
  .acp\:text-text-muted {
    color: var(--acp-color-text-muted);
  }
  .acp\:text-text-placeholder {
    color: var(--acp-color-text-placeholder);
  }
  .acp\:text-text-primary {
    color: var(--acp-color-text-primary);
  }
  .acp\:text-text-secondary {
    color: var(--acp-color-text-secondary);
  }
  .acp\:text-text-tertiary {
    color: var(--acp-color-text-tertiary);
  }
  .acp\:text-warning {
    color: var(--acp-color-warning);
  }
  .acp\:accent-accent {
    accent-color: var(--acp-color-accent);
  }
  .acp\:opacity-60 {
    opacity: 60%;
  }
  .acp\:shadow-card {
    --tw-shadow: var(--c-shadow-card);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .acp\:shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .acp\:transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--acp-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--acp-default-transition-duration));
  }
  .acp\:transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--acp-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--acp-default-transition-duration));
  }
  .acp\:outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .acp\:select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .acp\:group-open\:rotate-0 {
    &:is(:where(.acp\:group):is([open], :popover-open, :open) *) {
      rotate: 0deg;
    }
  }
  .acp\:placeholder\:text-text-placeholder {
    &::placeholder {
      color: var(--acp-color-text-placeholder);
    }
  }
  .acp\:hover\:border-accent {
    &:hover {
      @media (hover: hover) {
        border-color: var(--acp-color-accent);
      }
    }
  }
  .acp\:hover\:bg-surface-sunken {
    &:hover {
      @media (hover: hover) {
        background-color: var(--acp-color-surface-sunken);
      }
    }
  }
  .acp\:hover\:text-accent {
    &:hover {
      @media (hover: hover) {
        color: var(--acp-color-accent);
      }
    }
  }
  .acp\:hover\:text-accent-strong {
    &:hover {
      @media (hover: hover) {
        color: var(--acp-color-accent-strong);
      }
    }
  }
  .acp\:hover\:text-danger {
    &:hover {
      @media (hover: hover) {
        color: var(--acp-color-danger);
      }
    }
  }
  .acp\:hover\:text-text-secondary {
    &:hover {
      @media (hover: hover) {
        color: var(--acp-color-text-secondary);
      }
    }
  }
  .acp\:focus\:border-accent {
    &:focus {
      border-color: var(--acp-color-accent);
    }
  }
  .acp\:disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .acp\:disabled\:opacity-60 {
    &:disabled {
      opacity: 60%;
    }
  }
  .acp\:\[\&\:\:-webkit-details-marker\]\:hidden {
    &::-webkit-details-marker {
      display: none;
    }
  }
}
:root {
  --c-surface-card: #FFFFFF;
  --c-surface-sunken: #F0F1F4;
  --c-text-primary: #14171C;
  --c-text-secondary: #3A4149;
  --c-text-tertiary: #6B7280;
  --c-text-muted: #8A93A3;
  --c-text-placeholder: #A5ACB8;
  --c-border-default: #E2E4E9;
  --c-accent: #A78BFA;
  --c-accent-strong: #8B5CF6;
  --c-accent-soft: rgb(167 139 250 / 0.12);
  --c-danger: #F87171;
  --c-warning: #FBBF24;
  --c-toggle-thumb: #FFFFFF;
  --c-shadow-card: 0 1px 3px rgb(0 0 0 / 0.06), 0 4px 12px -4px rgb(0 0 0 / 0.08);
}
.acp-dark {
  --c-surface-card: #12161D;
  --c-surface-sunken: #171C25;
  --c-text-primary: #EDEFF2;
  --c-text-secondary: #C4CAD4;
  --c-text-tertiary: #8A93A3;
  --c-text-muted: #5C6472;
  --c-text-placeholder: #4A5261;
  --c-border-default: #232A35;
  --c-accent-soft: rgb(167 139 250 / 0.15);
  --c-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -8px rgb(0 0 0 / 0.5);
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}
/* ASR 測試面板的「錄音」那一段（麥克風即時聲紋、碼表、提示）。
 *
 * 放獨立檔而不是塞進 styles.css：那支同時有別人在改，本輪實測被整檔覆蓋兩次
 * （我補的規則各被 ddaf08c、505cc96 掃掉一次）。同樣的理由見
 * src/remote/agentEditLayout.css 的檔頭。
 *
 * 既有的 .asr-panel / .asr-mic / .asr-status（含 .is-recording、.is-live）仍在
 * styles.css，這裡只補「聲紋條」這一塊，不重複定義那些。
 *
 * 一律吃 token，零硬編色、零手刻毫秒。
 */

/* 即時聲紋。canvas 讀自己 computed 的 color 當筆色，所以換色只要改這裡，
   MicWaveform.tsx 不必動；錄音中換成 danger，與麥克風鈕同一個語彙。
   ⚠️ width/height 一定要在 CSS 給：canvas 沒有 CSS 尺寸時會退回 300×150 的
   intrinsic 值，畫出來的波形會被壓在左上角一小塊。 */
.asr-wave {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 0;
  color: var(--c-accent);
}

.asr-wave.is-recording {
  color: var(--c-danger);
}

.asr-rec {
  padding: 12px 14px 10px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

.asr-rec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.asr-rec-time {
  color: var(--c-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.asr-rec-hint {
  color: var(--c-text-tertiary);
  font-size: 11px;
}

/* 錄音是狀態不是動效：reduced-motion 下聲紋照畫（它反映真實音量），
   只把麥克風鈕的擴散環關掉——那個才是純裝飾。 */
@media (prefers-reduced-motion: reduce) {
  .asr-mic.is-recording {
    box-shadow: none;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   Run 試打 v2（設計稿「Run 試打 v2.dc.html」）
   ══════════════════════════════════════════════════════════════════════════
   版面：全螢幕 overlay → header ／（非 HTTPS 警示條）／ 左對話 ＋ 右 352px rail。

   對話區不是重寫的，是既有的 ChatShell（stream / ASR / TTS / 存檔都在裡面）。
   本檔後半段把它重新著色與排版成稿的樣子：ChatShell 的調色盤是掛在
   .intent-router-admin-module 上的 --ink-* / --accent 一組區域變數，所以只要在
   Run 面板這層把那組變數重新指到設計系統 token，整片配色就會換過去——不必
   逐條蓋 ChatShell.css，也不會污染 intent-router 自己的頁面。

   硬規則同 ui/components.css：顏色一律 var(--c-*)、動效一律 var(--motion-*)。
   ══════════════════════════════════════════════════════════════════════════ */

.rt2-root {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: var(--c-surface-page);
  color: var(--c-text-primary);
  font-size: 13px;
  line-height: 1.5;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.rt2-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.rt2-run-badge {
  flex: none;
  letter-spacing: 0.06em;
}

.rt2-head-text {
  min-width: 0;
  flex: 1;
}

.rt2-head-name {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rt2-head-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.rt2-mono {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
}

.rt2-save-hint {
  color: var(--c-warning);
  font-size: 11px;
  font-weight: 600;
}

/* ── 非 HTTPS 警示條 ─────────────────────────────────────────────────────
   判斷本身沿用 useMicRecorder 的 micBlockedByInsecureContext()（原本
   InputBar 與 VoiceProbeControls 各判各的，已收成一份）。 */
.rt2-mic-notice {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--c-warning);
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.rt2-mic-notice-text {
  min-width: 0;
  flex: 1;
  font-size: 12px;
}

/* ── 主體：對話 ＋ rail ──────────────────────────────────────────────────── */
.rt2-body {
  display: flex;
  min-height: 0;
  flex: 1;
}

.rt2-chat {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.rt2-chat .wz-testchat-body,
.rt2-chat .intent-router-admin-module,
.rt2-chat .main {
  min-height: 0;
  flex: 1;
}

/* ── rail ───────────────────────────────────────────────────────────────── */
.rt2-rail {
  display: flex;
  width: 352px;
  min-height: 0;
  flex: none;
  flex-direction: column;
  border-left: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.rt2-rail-tabs {
  display: flex;
  flex: none;
  gap: 18px;
  padding: 0 14px;
  border-bottom: 1px solid var(--c-border-default);
}

.rt2-rail-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

/* 左緣 accent 條標示「這是這次試打實際生效的設定」，與 .rc-info 同一套語彙 */
.rt2-rail-intro {
  margin: 12px 14px 10px;
  padding: 8px 11px;
  border-left: 3px solid var(--c-accent);
  border-radius: 2px 8px 8px 2px;
  background: var(--c-surface-sunken);
}

.rt2-rail-intro-title {
  font-size: 12.5px;
  font-weight: 700;
}

.rt2-rail-intro-note {
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.rt2-rail-empty {
  margin: 0;
  padding: 12px 14px;
  color: var(--c-text-muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.rt2-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid var(--c-border-default);
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

.rt2-group-title {
  color: var(--c-text-tertiary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.rt2-group-note {
  margin-left: auto;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
}

.rt2-kv {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 13px;
}

.rt2-kv-k {
  width: 82px;
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.rt2-kv-v {
  min-width: 0;
  flex: 1;
  color: var(--c-text-primary);
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
}

.rt2-prompt {
  padding: 12px 14px;
  border-top: 1px solid var(--c-border-default);
}

.rt2-prompt-title {
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 700;
}

.rt2-prompt-body {
  max-height: 150px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: 11.5px;
  line-height: 1.75;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.rt2-rail-foot {
  padding: 0 14px 18px;
}

.rt2-wide-btn {
  width: 100%;
  justify-content: center;
}

/* ── JSON 分頁 ──────────────────────────────────────────────────────────── */
.rt2-json-pane {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.rt2-json-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border-default);
}

.rt2-json-name {
  font-size: 11.5px;
  font-weight: 700;
}

.rt2-json-lines {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
}

.rt2-json-head .ui-btn {
  margin-left: auto;
}

/* 深底：沿用 sidebar 那組深色 token，不另立第二份深色值 */
.rt2-json-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--c-sidebar-bg);
}

.rt2-json-code {
  margin: 0;
  padding: 12px 14px;
  color: var(--c-sidebar-lit);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  white-space: pre;
}

/* ── 語音工具分頁在 352px rail 裡的窄版排版 ───────────────────────────────
   styles.css 已經有這組「窄容器就換行」的規則（codex #137216），但它掛在
   `@media (max-width: 980px)` 上——那是**視窗**寬度。rail 只有 352px 而視窗
   是 1440px，media query 不成立，固定 52px 的麥克風鈕加上不換行的「選擇音檔」
   會把中間說明欄壓成一字一行。這裡用容器 scope 套同一組規則。
   （正解是 container query，但那要動既有 .asr-panel 的結構，不在本次範圍。） */
.rt2-rail .asr-panel-head {
  flex-wrap: wrap;
}

.rt2-rail .asr-panel-body {
  flex: 1 1 240px;
}

.rt2-rail .asr-panel-alt {
  flex: 1 0 100%;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

/* ── 這通的用量 ─────────────────────────────────────────────────────────── */
.rt2-usage {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 0 2px;
}

.rt2-usage-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rt2-usage-k {
  min-width: 0;
  flex: 1;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.rt2-usage-v {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   ChatShell 重塑（只在 .rt2-chat 底下生效）
   ══════════════════════════════════════════════════════════════════════════ */

/* ① 調色盤改指設計系統 token。ChatShell.css 通篇吃這組變數，改這裡等於整片換色，
      而且不影響 intent-router workspace 自己的頁面。 */
.rt2-chat .intent-router-admin-module {
  --ink-1: var(--c-surface-page);
  --ink-2: var(--c-surface-card);
  --ink-3: var(--c-surface-sunken);
  --ink-4: var(--c-border-default);
  --ink-5: var(--c-border-strong);
  --ink-6: var(--c-text-muted);
  --ink-7: var(--c-text-tertiary);
  --ink-8: var(--c-text-secondary);
  --ink-9: var(--c-text-secondary);
  --ink-10: var(--c-text-primary);
  --accent: var(--c-accent);
  --accent-d: var(--c-accent-strong);
  /* --mono 不重指：intent-router 自己那份與設計系統的值等價，而
     `--mono: var(--mono)` 是自我引用，會整條失效。 */
  --sans: var(--font);

  border: none;
  border-radius: 0;
  background: var(--c-surface-page);
}

.rt2-chat .wz-testchat-body {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 0;
}

/* ② 版位：稿把「自動朗讀」開關放在輸入列下方，而 ChatShell 的 DOM 順序是
      call-status → mode-row → messages → input-bar。用 grid-row 重排，
      不動元件結構（mode-row 收掉歷史分頁後只剩朗讀開關）。 */
.rt2-chat .main {
  grid-template-rows: auto 1fr auto auto;
  background: var(--c-surface-page);
}

.rt2-chat .messages {
  grid-row: 2;
  padding: 16px 18px 8px;
  gap: 14px;
}

.rt2-chat .input-bar {
  grid-row: 3;
}

.rt2-chat .mode-row {
  grid-row: 4;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--c-border-default);
  border-bottom: none;
  background: var(--c-surface-card);
}

/* 只剩一顆朗讀開關時，靠右對齊（稿的「自動朗讀回覆」在右下） */
.rt2-chat .mode-row .mode-tab {
  display: none;
}

.rt2-chat .mode-row .tts-toggle {
  margin-left: auto;
}

/* ③ 狀態列壓成一條窄列：稿把 conv_id／輪數放在 header 第二行，但「開新對話」
      的 handler 只有 ChatShell 有，硬搬到 header 會變成連不上線的按鈕。 */
.rt2-chat .call-status {
  grid-row: 1;
  gap: 10px;
  padding: 8px 18px;
  background: var(--c-surface-card);
}

.rt2-chat .call-glyph {
  width: 28px;
  height: 28px;
}

.rt2-chat .call-title {
  font-size: 13px;
}

/* ④ 空狀態：稿的 starter chips */
.rt2-chat .rt2-empty {
  max-width: 560px;
  margin: 64px auto 0;
  text-align: center;
}

.rt2-chat .rt2-empty-title {
  margin: 0;
  color: var(--c-text-primary);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.rt2-chat .rt2-empty-note {
  margin: 5px 0 0;
  color: var(--c-text-tertiary);
  font-size: 12.5px;
  line-height: 1.7;
}

.rt2-starters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.rt2-chip {
  padding: 5px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 99px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.rt2-chip:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

/* ⑤ 訊息：稿的氣泡與下方 tags 列 */
.rt2-chat .bubble {
  border-radius: 13px;
  font-size: 13px;
  line-height: 1.7;
  text-wrap: pretty;
}

.rt2-chat .turn.user .bubble {
  border-top-right-radius: 13px;
  background: var(--c-accent);
  box-shadow: none;
  color: var(--c-text-inverse);
}

.rt2-chat .turn.assistant .bubble {
  border-top-left-radius: 13px;
}

.rt2-chat .turn.assistant.v2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.rt2-chat .turn.assistant.v2 .turn-meta {
  margin: 0;
}

.rt2-chat .turn.assistant.v2 .turn-foot-row {
  margin-top: 0;
  padding: 0 3px;
}

/* 朗讀鈕在 v2 併進 tags 列，做成一顆有字的小鈕（稿的「▶ 朗讀」） */
.rt2-chat .tts-btn.inline {
  display: inline-flex;
  width: auto;
  height: auto;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
}

.rt2-chat .tts-btn.inline:hover {
  border-color: var(--c-border-strong);
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.tts-btn-label {
  font-size: 11.5px;
  font-weight: 600;
}

/* ⑥ thinking 等化器（稿的 5 根 bar）。循環週期用 --motion-eq，不手刻毫秒。 */
.rt2-thinking {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px dashed var(--c-border-strong);
  border-radius: 13px;
}

.rt2-eq {
  display: flex;
  height: 15px;
  align-items: center;
  gap: 3px;
}

.rt2-eq-bar {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background: var(--c-accent);
  transform-origin: center;
  animation: rt2-eq var(--motion-eq) ease-in-out infinite;
}

.rt2-thinking-text {
  color: var(--c-text-tertiary);
  font-size: 12px;
}

@keyframes rt2-eq {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

/* ⑦ 輸入列 */
.rt2-chat .input-bar {
  padding: 11px 18px 10px;
  background: var(--c-surface-card);
}

.rt2-chat .input-wrap {
  max-width: 820px;
  border-radius: 11px;
  background: var(--c-surface-card);
}

.rt2-chat .input-hint {
  max-width: 820px;
}

/* 窄視窗只縮 rail 寬度，不隱藏。
   原本 860px 以下 `display: none`，但 header 的「隱藏設定／顯示設定」是由
   railOpen state 控制的——CSS 把 rail 藏掉後那顆鈕就按了沒反應，而且設定摘要／
   JSON／語音工具在窄螢幕完全沒有替代入口（codex `#144506`）。與其補一套抽屜，
   不如讓 rail 一直可用、要收由使用者按那顆鈕，少一條路。 */
@media (max-width: 1180px) {
  .rt2-rail {
    width: 320px;
  }
}

@media (max-width: 900px) {
  .rt2-rail {
    width: 280px;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   Agent Studio 設計系統 — Token 單一真相層
   ══════════════════════════════════════════════════════════════════════════

   來源（claude.ai/design 專案「Agent Studio 視覺設計」）：
     · Design Tokens.dc.html … 長名命名系統與 light/dark 成對值 → 命名的權威
     · Agent 編輯 v2.dc.html  … 實際頁面色值               → 色值的權威
   稿內短名（--c-page / --c-text-2 / --c-ok …）是該稿 .ae-root scope 的局部
   別名，不是系統 token；本檔最後提供別名層，讓稿的 CSS 能 1:1 搬入。

   ── 為什麼是 html:root 而不是 :root ────────────────────────────────────
   @tbd/agent-config-panel 的 style.css 同樣在 :root 定義 --c-*（accent 是紫
   #A78BFA），而它在「元件層」被 import（agent-config/AgentConfigFormCard.tsx:20、
   remote/SetupStepVoiceKeyword.tsx:1），排序落在 entry 的 styles.css 之後
   → 同特異性下它會贏，等於埋著「某些頁面 accent 變紫」的雷。
   html:root 特異性 (0,0,1,1) > :root (0,0,1,0)，不依賴載入順序，一勞永逸。

   ── 2026-08-14 色溫變更（young 裁決：1:1 照設計稿）────────────────────
   舊系統刻意走「帶藍調灰」（styles.css:3303 註解：「純黑配白底對比生硬，帶
   藍調的深色…」、「邊框帶藍調灰，與文字同一色溫」）。設計稿走中性灰。
   全站 1688 個 class 都吃這批 token，故觀感會整體由偏冷轉中性。
   每行都附舊值，要回退直接改回即可。
   ══════════════════════════════════════════════════════════════════════════ */

html:root {
  /* ── 表面 Surface ──────────────────────────────────────────────────── */
  --c-surface-page:   #f6f7f9;   /* 舊 #eef1f4 */
  --c-surface-card:   #ffffff;   /* 無變化 */
  --c-surface-sunken: #f1f3f5;   /* 舊 #e9edf2 */
  --c-surface-hover:  #f4f6f8;   /* 舊 #edf1f6 */

  /* ── 邊框 Border ───────────────────────────────────────────────────── */
  --c-border-default: #e4e7eb;   /* 舊 #d8dee7 */
  --c-border-strong:  #cfd4db;   /* 舊 #c2cad6 */

  /* ── 文字 Text ─────────────────────────────────────────────────────── */
  --c-text-primary:     #16181d; /* 舊 #16233d（深海軍藍 → 近黑） */
  --c-text-secondary:   #4b5361; /* 舊 #46536b */
  --c-text-tertiary:    #6b7280; /* 舊 #8a94a6（明顯加深） */
  --c-text-muted:       #8b92a0; /* 稿新增至系統層 */
  --c-text-placeholder: #a6acb8;
  --c-text-inverse:     #ffffff;

  /* ── Accent（亮青藍）───────────────────────────────────────────────
     strong/soft 的值 young 於 2026-08-14 裁決採頁面稿。與舊值差異在肉眼
     可辨邊緣（舊 #1b87c4 / #e6f4fd），色相方向一致，皆為同色相深淺階。 */
  --c-accent:        #2aa6e8;
  --c-accent-strong: #1b7fb8;    /* 舊 #1b87c4 */
  --c-accent-soft:   #e4f3fc;    /* 舊 #e6f4fd */
  --c-focus-ring:    0 0 0 3px rgba(42, 166, 232, 0.24);  /* 舊 alpha .3 */

  /* ── 狀態語意（獨立於 accent，一律淡底深字）──────────────────────── */
  --c-success:      #059669;
  --c-success-soft: #dcf3e7;
  --c-warning:      #b45309;
  --c-warning-soft: #fcefd1;
  --c-danger:       #dc2626;
  --c-danger-soft:  #fce1e0;
  --c-info:         #6d4ae0;     /* 靛紫。accent 進青藍色域後與舊 cyan #0891b2
                                    撞色，故改靛紫。已驗證全庫無 #0891b2 硬編。 */
  --c-info-soft:    #e9e4fb;
  --c-amber:        #f0b429;     /* 稿新增：dirty／未儲存狀態的警示底色 */
  --c-amber-hover:  #dfa41e;     /* 同上，hover 態 */
  --c-amber-fg:     #3a2a05;     /* 琥珀底上的前景色。深棕而非黑：對比 8.9:1 過 AA，
                                    且比純黑柔和。稿用同值。 */

  /* ── 元件 Component ────────────────────────────────────────────────── */
  --c-toggle-thumb: #ffffff;
  --c-shadow-card:  0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);

  /* ── 主按鈕（2026-08-14 young 裁決：改回 accent 本色）────────────────
     ⚠️ 已知無障礙偏離，刻意保留，供日後回頭調整時有據可循：
        accent #2aa6e8 配白字 = 2.72:1（WCAG AA 內文門檻 4.5:1、大字 3:1，皆不過）
        舊值   #186087 配白字 = 6.86:1（過 AA）
     hover 態用 accent-strong #1b7fb8 = 4.02:1，仍未達 4.5 但明顯改善。
     設計稿 .ae-btn.pri 的字重是 700／12.5px，屬內文級。
     要回退成無障礙優先：--c-btn-bg 改 #186087、hover 改 #134b68。 */
  --c-btn-bg:        var(--c-accent);
  --c-btn-bg-hover:  var(--c-accent-strong);
  --c-btn-border:    var(--c-accent);
  --c-btn-fg:        #ffffff;
  --c-btn-fg-hover:  #ffffff;

  /* ── Sidebar 深色系 ────────────────────────────────────────────────
     左側導航是全站唯一的深色區塊，色階自成一組，不共用 surface/text。
     ⚠️ 這裡是 sidebar 色的唯一真相。styles.css 的 legacy --agent-sidebar*
     （8 個，原本硬編別份設計稿的值）已改為引用本組，短名 --sb-* 亦然。
     值採「Agent 編輯 v2」稿；與 legacy 舊值的差異逐行標註。 */
  --c-sidebar-bg:    #0e1013;  /* legacy 舊值 #16181d，稿更深 */
  --c-sidebar-line:  #1e2126;  /* legacy 舊值 #23262d */
  --c-sidebar-dim:   #9aa0ab;  /* 未選中項文字（與 legacy 相同） */
  --c-sidebar-lit:   #f2f4f6;  /* 選中／標題文字（與 legacy 相同） */
  --c-sidebar-on:    #1a1d22;  /* 選中項底色（legacy 無此項） */

  /* ASR 深色聲紋區（設計稿「Agent 編輯 ASR」的 .ae-dark 一族）。
     ⚠️ 稿的深色區**不是** sidebar 那個黑（sidebar #0e1013、這裡 #14161a），
     一度誤指過去，實際比對稿的 CSS 才發現差一階。數值逐項取自稿。 */
  --c-asr-dark:      #14161a;  /* .ae-dark background */
  --c-asr-dark-fg:   #edeff2;  /* .ae-dark color */
  --c-asr-mic:       #2f343b;  /* .ae-mic 待機 */
  --c-asr-mic-rec:   #f0473a;  /* .ae-mic.rec —— 比 --c-danger 更橘，照稿 */
  --c-asr-mini:      #1a1e23;  /* .ae-mini 底 */
  --c-asr-mini-line: #2b3038;  /* .ae-mini 邊 */
  --c-asr-mini-fg:   #b4b9c2;  /* .ae-mini 圖示 */
  --c-asr-mini-hov:  #22272e;  /* .ae-mini hover 底 */
  --c-asr-wave-dim:  #3a4048;  /* 尚未播放到的波形條 */
  --c-sidebar-grp:   #5a6069;  /* 分組標題，legacy 舊值 #5e636d */
  --c-sidebar-hover: rgb(255 255 255 / 0.055);  /* legacy 是 0.05 */
  /* 底部專案切換器（稿 aside 尾端那張卡）。稿裡寫死 #15181C / #23272E，
     收進 token 才不會又變成散裝色值。 */
  --c-sidebar-card:      #15181c;
  --c-sidebar-card-line: #23272e;

  /* ── Motion（2026-08-14 young 裁決：擴充而非近收）──────────────────
     舊規則是「只三檔＋一條曲線，手刻毫秒數視為技債」。設計稿的進場／抽屜／
     長動畫確實需要不同曲線，故改為「擴充具名 token」——原則不變（仍禁止在
     元件裡手刻毫秒），但承認不同語意需要不同曲線。
     曲線語意：
       ease      … 既有的互動回饋（color/shadow/opacity），最克制
       ease-out  … 進場／浮現，末段減速明顯（cubic-bezier(.16,1,.3,1)）
       ease-io   … 尺寸展開收合，首尾都緩（cubic-bezier(.4,0,.2,1)） */
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 220ms;
  --motion-ease:     cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-io:  cubic-bezier(0.4, 0, 0.2, 1);

  /* 具名情境 token —— 元件一律引用這些，不要寫死秒數 */
  --motion-pop:     180ms var(--motion-ease-out);  /* popover 浮出 */
  --motion-tab:     260ms var(--motion-ease-io);   /* tab 底線 scaleX */
  --motion-enter:   320ms var(--motion-ease-out);  /* panel 進場 rise */
  --motion-savebar: 340ms var(--motion-ease-out);  /* 儲存列升起 */
  /* 首頁稿的兩個具名動畫（Agent Studio 首頁.dc.html）：
     spark  … sparkline 一次性描邊（稿 hm-draw 1.1s cubic-bezier(.4,0,.2,1) both）
     blink  … 系統就緒的綠點無限閃爍（稿 hm-blink 1.8s ease-in-out infinite）
     只收 duration；曲線沿用上面既有的三條，不另立。 */
  --motion-spark:   1100ms var(--motion-ease-io);
  --motion-blink:   1800ms;
  --motion-drawer:  360ms var(--motion-ease-io);   /* 抽屜 max-height */
  /* 撥號鈕的「可撥打」綠。語意上不屬於 success（那是狀態回饋），
     是通話控制專用色，所以另立名字。設計稿 .ae-call 的 #12B76A。 */
  --c-call-live: #12b76a;

  --motion-dock:    380ms var(--motion-ease-io);   /* 右側 dock 寬度 */
  --motion-stagger: 40ms;                          /* 逐項進場間隔 */
  --distance-medium: 12px;                          /* 進場位移 */

  /* 長循環動畫（非轉場，故不套上面的曲線） */
  --motion-eq:    1050ms;  /* 波形等化器循環 */
  --motion-pulse: 1600ms;  /* 撥號按鈕擴散環 */

  /* ── 字體 ──────────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC",
          "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ══════════════════════════════════════════════════════════════════════════
   設計稿短名別名層
   ──────────────────────────────────────────────────────────────────────────
   讓 .dc.html 設計稿的 CSS 能原封搬入即可運作，值仍由上面的長名供給，
   不形成第二份真相。

   🚫 新寫的 code 一律用長名。短名只是搬遷期的橋，頁面遷完就刪這一段。
   ══════════════════════════════════════════════════════════════════════════ */
html:root {
  --c-page:        var(--c-surface-page);
  --c-card:        var(--c-surface-card);
  --c-sunken:      var(--c-surface-sunken);
  --c-hover:       var(--c-surface-hover);
  --c-border:      var(--c-border-default);
  --c-border-2:    var(--c-border-strong);
  --c-text:        var(--c-text-primary);
  --c-text-2:      var(--c-text-secondary);
  --c-text-3:      var(--c-text-tertiary);
  --c-muted:       var(--c-text-muted);
  --c-ph:          var(--c-text-placeholder);
  --c-accent-deep: var(--c-accent-strong);
  --c-ok:          var(--c-success);
  --c-ok-soft:     var(--c-success-soft);
  --c-warn:        var(--c-warning);
  --c-warn-soft:   var(--c-warning-soft);
  --c-shadow:      var(--c-shadow-card);
  --c-ring:        var(--c-focus-ring);
  /* ring 的純色分量（要自己組 box-shadow 時用；--c-ring 是完整 shadow）。 */
  --c-ring-color: rgba(42, 166, 232, 0.18);

  /* sidebar 短名（稿內用 --sb / --sb-line / --sb-dim / --sb-lit） */
  --sb:      var(--c-sidebar-bg);
  --sb-line: var(--c-sidebar-line);
  --sb-dim:  var(--c-sidebar-dim);
  --sb-lit:  var(--c-sidebar-lit);
  --sb-on:   var(--c-sidebar-on);
  --sb-grp:  var(--c-sidebar-grp);
  --sb-card:      var(--c-sidebar-card);
  --sb-card-line: var(--c-sidebar-card-line);
}
/* ══════════════════════════════════════════════════════════════════════════
   Agent Studio 元件庫 — 表單／容器／導覽
   ══════════════════════════════════════════════════════════════════════════
   規格來源：docs/design-refs/Agent-編輯-v2.dc.html（young 指定 1:1 的那份）
   前綴 ui-、狀態一律 .is-*（young 2026-08-14 裁決，其餘六套前綴退場）

   三條硬規則：
     1. 顏色一律 var(--c-*)，不硬編。深色模式第一版不做，但因為全走 token，
        之後補一組 dark 覆寫即可上線。
     2. 動效一律 var(--motion-*)，不手刻毫秒（沿用 styles.css 既有規則）。
     3. 圓角統一 9px（六份稿有 4/5/6/7/9/10/11/12px 共八種，裁決採此稿）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 按鈕：不在此定義 ─────────────────────────────────────────────────
   .ui-btn 與其 13 個變體已存在於 src/styles.css:130-250，且全庫 196 處使用中
   （--secondary 82 / --sm 48 / --primary 40 / --icon-ghost 15 …）。
   本檔曾重複定義 .ui-btn，因 import 順序在 styles.css 之前而被完全覆蓋（實測
   computed border-radius 取到 styles.css 的 8px 而非本檔的 9px），等於無效碼，
   故整段移除，避免第二份真相。

   兩件待辦，各自獨立成單：
   ① 變體 13 → 5 的收斂（young 的原則：全站按鈕樣式不超過 5 種）。
      需改動 196 處使用點，風險高，必須逐一驗證，不併進設計稿還原這條線。
   ② border-radius 現為 8px（styles.css:137 註解「2026-08-10 使用者裁示：角度收小」），
      設計稿是 9px。維持 8px —— 使用者裁示的權重高於稿，且差 1px 肉眼難辨。
   ────────────────────────────────────────────────────────────────────── */

/* ── 卡片 ─────────────────────────────────────────────────────────────── */
.ui-card {
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

/* ── 表單 ─────────────────────────────────────────────────────────────── */
.ui-label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ui-hint {
  color: var(--c-text-muted);
  font-size: 11px;
  line-height: 1.55;
}
/* .ui-select 不在此列：既有 styles.css 已定義（含 --sm 變體） */
.ui-input,
.ui-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--c-text-placeholder);
}
.ui-input:focus,
.ui-textarea:focus {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}
.ui-textarea {
  resize: none;
  line-height: 1.6;
}

/* ── 徽章 ──────────────────────────────────────────────────────────────
   稿裡 badge 全靠 inline style（Agent Studio 稿內 19 處），故改為 variant。 */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  border: 1px solid var(--c-border-default);
}
.ui-badge--success { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.ui-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
.ui-badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger);  border-color: transparent; }
.ui-badge--info    { background: var(--c-info-soft);    color: var(--c-info);    border-color: transparent; }
.ui-badge--accent  { background: var(--c-accent-soft);  color: var(--c-accent-strong); border-color: transparent; }

/* ── 頁籤（底線式，young 裁決）──────────────────────────────────────── */
.ui-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 3px 13px;
  border: none;
  background: transparent;
  color: var(--c-text-tertiary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-base) var(--motion-ease);
}
.ui-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--motion-tab);
}
.ui-tab:hover { color: var(--c-text-primary); }
.ui-tab.is-on { color: var(--c-accent); font-weight: 700; }
.ui-tab.is-on::after { transform: scaleX(1); }

/* ── 設定列（可點整列）───────────────────────────────────────────────── */
.ui-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border-top: 1px solid var(--c-border-default);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.ui-row:first-child { border-top: none; }
.ui-row:hover { background: var(--c-surface-hover); }
.ui-row__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}
/* 列尾 affordance：圖示即預告行為（✏️ 編輯 / › 進入 / ⌄ 展開），
   規則採自 Bland，見 docs/motion-reference.md 建議 B 類 */
.ui-row__affordance {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    transform var(--motion-tab);
}
.ui-row:hover .ui-row__affordance {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}
.ui-row__affordance.is-spun { transform: rotate(180deg); }

/* ── 抽屜 ─────────────────────────────────────────────────────────────── */
.ui-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--motion-drawer),
    opacity var(--motion-base) var(--motion-ease);
}
.ui-drawer.is-open {
  max-height: 340px;
  opacity: 1;
}

/* ── 開關 ─────────────────────────────────────────────────────────────── */
.ui-toggle {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 11px;
  background: var(--c-border-strong);
  transition: background-color var(--motion-base) var(--motion-ease);
}
.ui-toggle.is-on { background: var(--c-accent); }
.ui-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-toggle-thumb);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition: transform var(--motion-base) var(--motion-ease);
}
/* 位移用 transform 不用 left：兩份稿實作不同（C11），統一採 transform，
   它走合成執行緒、不觸發 layout。 */
.ui-toggle.is-on::after { transform: translateX(14px); }

/* ── 分段控制 ─────────────────────────────────────────────────────────── */
.ui-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--c-surface-sunken);
}
.ui-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-tertiary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}
.ui-seg__btn.is-on {
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-weight: 700;
  box-shadow: var(--c-shadow-card);
}

/* ── 下拉觸發器 + 浮層 ────────────────────────────────────────────────── */
.ui-field {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}
.ui-field:hover { border-color: var(--c-border-strong); }
.ui-field.is-open {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.ui-pop {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: 280px;
  overflow: hidden auto;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: 0 18px 44px rgb(16 24 40 / 0.18);
  transform-origin: top center;
  animation: ui-pop-in var(--motion-pop);
}
.ui-pop__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}
.ui-pop__row:hover { background: var(--c-surface-hover); }
.ui-pop__row.is-on {
  background: var(--c-accent-soft);
  border-left-color: var(--c-accent);
}

/* ── 滑桿 ─────────────────────────────────────────────────────────────── */
.ui-slider {
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: var(--c-border-default);
  outline: none;
}
.ui-slider::-webkit-slider-thumb {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-surface-card);
  box-shadow: 0 1px 3px rgb(16 24 40 / 0.2);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.ui-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* ── 面板進場 ─────────────────────────────────────────────────────────
   cc4 實測 bland/speechify 兩站都不做換頁動畫，但我們是 MFE、有載入延遲，
   內容淡入仍要保留，否則會像卡頓（見 docs/motion-reference.md C 類第 4 項）。 */
.ui-panel { animation: ui-rise var(--motion-enter) both; }

@keyframes ui-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ui-pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ── 捲軸 ─────────────────────────────────────────────────────────────── */
.ui-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.ui-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--c-border-strong);
  background-clip: padding-box;
}

/* ── 側欄「即將推出」項 ────────────────────────────────────────────────
   設計稿有、但還沒有對應頁面的入口（語音庫、分析）。做出來而不是省略，
   是為了讓側欄的資訊架構與設計稿一致——使用者看得到規劃中的位置，
   也不會點進死連結。有頁面後拿掉 .is-soon 並接上 onNavigate 即可。 */
.ui-sidebar .ui-navgroup button.is-soon {
  opacity: 0.42;
  cursor: default;
}
.ui-sidebar .ui-navgroup button.is-soon:hover {
  background: transparent;
  color: var(--c-sidebar-dim);
}
.ui-navitem__soon {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgb(255 255 255 / 0.07);
  color: var(--c-sidebar-grp);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
    }
  }
}

@layer theme {
  :root, :host {
    --am-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --am-color-white: #fff;
    --am-spacing: .25rem;
    --am-text-xs: .625rem;
    --am-text-xs--line-height: calc(1 / .75);
    --am-text-sm: .6875rem;
    --am-text-sm--line-height: calc(1.25 / .875);
    --am-text-lg: .8125rem;
    --am-text-lg--line-height: calc(1.75 / 1.125);
    --am-text-xl: .875rem;
    --am-text-xl--line-height: calc(1.75 / 1.25);
    --am-font-weight-semibold: 600;
    --am-font-weight-bold: 700;
    --am-font-weight-extrabold: 800;
    --am-leading-relaxed: 1.625;
    --am-radius-xs: .25rem;
    --am-radius-sm: .375rem;
    --am-radius-md: .5rem;
    --am-radius-lg: .75rem;
    --am-animate-spin: spin 1s linear infinite;
    --am-color-surface-card: var(--c-surface-card);
    --am-color-surface-sunken: var(--c-surface-sunken);
    --am-color-text-primary: var(--c-text-primary);
    --am-color-text-secondary: var(--c-text-secondary);
    --am-color-text-tertiary: var(--c-text-tertiary);
    --am-color-text-muted: var(--c-text-muted);
    --am-color-border-default: var(--c-border-default);
    --am-color-accent: var(--c-accent);
    --am-color-accent-strong: var(--c-accent-strong);
    --am-color-accent-soft: var(--c-accent-soft);
    --am-color-danger: var(--c-danger);
    --am-color-warning: var(--c-warning);
    --am-color-surface-hover: var(--c-surface-hover);
    --am-color-border-strong: var(--c-border-strong);
    --am-color-text-inverse: var(--c-text-inverse);
    --am-color-success: var(--c-success);
    --am-color-success-soft: var(--c-success-soft);
    --am-color-warning-soft: var(--c-warning-soft);
    --am-color-danger-soft: var(--c-danger-soft);
    --am-color-info: var(--c-info);
    --am-color-info-soft: var(--c-info-soft);
    --am-radius-full: 9999px;
    --am-text-2xs: .5625rem;
    --am-text-md: .75rem;
  }
}

@layer base, components;

@layer utilities {
  .am\:sticky {
    position: sticky;
  }

  .am\:top-0 {
    top: 0;
  }

  .am\:m-0 {
    margin: 0;
  }

  .am\:mx-auto {
    margin-inline: auto;
  }

  .am\:mt-0\.5 {
    margin-top: calc(var(--am-spacing) * .5);
  }

  .am\:mt-1 {
    margin-top: var(--am-spacing);
  }

  .am\:mt-2 {
    margin-top: calc(var(--am-spacing) * 2);
  }

  .am\:mt-3 {
    margin-top: calc(var(--am-spacing) * 3);
  }

  .am\:mt-4 {
    margin-top: calc(var(--am-spacing) * 4);
  }

  .am\:mt-6 {
    margin-top: calc(var(--am-spacing) * 6);
  }

  .am\:mb-0 {
    margin-bottom: 0;
  }

  .am\:mb-2\.5 {
    margin-bottom: calc(var(--am-spacing) * 2.5);
  }

  .am\:flex {
    display: flex;
  }

  .am\:grid {
    display: grid;
  }

  .am\:hidden {
    display: none;
  }

  .am\:inline-flex {
    display: inline-flex;
  }

  .am\:h-11 {
    height: calc(var(--am-spacing) * 11);
  }

  .am\:h-14 {
    height: calc(var(--am-spacing) * 14);
  }

  .am\:min-h-11 {
    min-height: calc(var(--am-spacing) * 11);
  }

  .am\:min-h-\[100svh\] {
    min-height: 100svh;
  }

  .am\:w-14 {
    width: calc(var(--am-spacing) * 14);
  }

  .am\:w-41 {
    width: calc(var(--am-spacing) * 41);
  }

  .am\:w-\[min\(100\%\,520px\)\] {
    width: min(100%, 520px);
  }

  .am\:w-fit {
    width: fit-content;
  }

  .am\:w-full {
    width: 100%;
  }

  .am\:max-w-\[520px\] {
    max-width: 520px;
  }

  .am\:max-w-\[1040px\] {
    max-width: 1040px;
  }

  .am\:min-w-0 {
    min-width: 0;
  }

  .am\:min-w-14 {
    min-width: calc(var(--am-spacing) * 14);
  }

  .am\:flex-1 {
    flex: 1;
  }

  .am\:flex-none {
    flex: none;
  }

  .am\:shrink-0 {
    flex-shrink: 0;
  }

  .am\:animate-spin {
    animation: var(--am-animate-spin);
  }

  .am\:cursor-pointer {
    cursor: pointer;
  }

  .am\:list-none {
    list-style-type: none;
  }

  .am\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .am\:flex-col {
    flex-direction: column;
  }

  .am\:flex-wrap {
    flex-wrap: wrap;
  }

  .am\:place-items-center {
    place-items: center;
  }

  .am\:items-center {
    align-items: center;
  }

  .am\:items-start {
    align-items: flex-start;
  }

  .am\:justify-between {
    justify-content: space-between;
  }

  .am\:justify-center {
    justify-content: center;
  }

  .am\:gap-0\.5 {
    gap: calc(var(--am-spacing) * .5);
  }

  .am\:gap-1 {
    gap: var(--am-spacing);
  }

  .am\:gap-1\.5 {
    gap: calc(var(--am-spacing) * 1.5);
  }

  .am\:gap-2 {
    gap: calc(var(--am-spacing) * 2);
  }

  .am\:gap-3 {
    gap: calc(var(--am-spacing) * 3);
  }

  .am\:gap-3\.5 {
    gap: calc(var(--am-spacing) * 3.5);
  }

  .am\:gap-4 {
    gap: calc(var(--am-spacing) * 4);
  }

  .am\:gap-4\.5 {
    gap: calc(var(--am-spacing) * 4.5);
  }

  .am\:gap-x-3 {
    column-gap: calc(var(--am-spacing) * 3);
  }

  .am\:gap-x-4 {
    column-gap: calc(var(--am-spacing) * 4);
  }

  .am\:gap-y-1\.5 {
    row-gap: calc(var(--am-spacing) * 1.5);
  }

  .am\:self-start {
    align-self: flex-start;
  }

  .am\:overflow-hidden {
    overflow: hidden;
  }

  .am\:rounded-full {
    border-radius: var(--am-radius-full);
  }

  .am\:rounded-lg {
    border-radius: var(--am-radius-lg);
  }

  .am\:rounded-md {
    border-radius: var(--am-radius-md);
  }

  .am\:rounded-sm {
    border-radius: var(--am-radius-sm);
  }

  .am\:rounded-xs {
    border-radius: var(--am-radius-xs);
  }

  .am\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .am\:border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .am\:border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .am\:border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .am\:border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .am\:border-\(--agent-border\) {
    border-color: var(--agent-border);
  }

  .am\:border-\(--agent-primary\)\/24 {
    border-color: var(--agent-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .am\:border-\(--agent-primary\)\/24 {
      border-color: color-mix(in oklab, var(--agent-primary) 24%, transparent);
    }
  }

  .am\:border-border-default {
    border-color: var(--am-color-border-default);
  }

  .am\:border-border-strong {
    border-color: var(--am-color-border-strong);
  }

  .am\:border-danger {
    border-color: var(--am-color-danger);
  }

  .am\:border-warning {
    border-color: var(--am-color-warning);
  }

  .am\:border-l-accent {
    border-left-color: var(--am-color-accent);
  }

  .am\:border-l-transparent {
    border-left-color: #0000;
  }

  .am\:bg-\(--agent-error-bg\) {
    background-color: var(--agent-error-bg);
  }

  .am\:bg-\(--agent-primary-light\) {
    background-color: var(--agent-primary-light);
  }

  .am\:bg-\(--agent-sidebar\) {
    background-color: var(--agent-sidebar);
  }

  .am\:bg-\(--agent-surface\) {
    background-color: var(--agent-surface);
  }

  .am\:bg-\(--agent-surface-muted\) {
    background-color: var(--agent-surface-muted);
  }

  .am\:bg-\(--c-btn-bg\) {
    background-color: var(--c-btn-bg);
  }

  .am\:bg-accent {
    background-color: var(--am-color-accent);
  }

  .am\:bg-accent-soft {
    background-color: var(--am-color-accent-soft);
  }

  .am\:bg-danger {
    background-color: var(--am-color-danger);
  }

  .am\:bg-danger-soft {
    background-color: var(--am-color-danger-soft);
  }

  .am\:bg-info-soft {
    background-color: var(--am-color-info-soft);
  }

  .am\:bg-success-soft {
    background-color: var(--am-color-success-soft);
  }

  .am\:bg-surface-card {
    background-color: var(--am-color-surface-card);
  }

  .am\:bg-surface-sunken {
    background-color: var(--am-color-surface-sunken);
  }

  .am\:bg-transparent {
    background-color: #0000;
  }

  .am\:bg-warning-soft {
    background-color: var(--am-color-warning-soft);
  }

  .am\:bg-white\/96 {
    background-color: var(--am-color-white);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .am\:bg-white\/96 {
      background-color: color-mix(in oklab, var(--am-color-white) 96%, transparent);
    }
  }

  .am\:p-0 {
    padding: 0;
  }

  .am\:p-2\.5 {
    padding: calc(var(--am-spacing) * 2.5);
  }

  .am\:p-3\.5 {
    padding: calc(var(--am-spacing) * 3.5);
  }

  .am\:p-4 {
    padding: calc(var(--am-spacing) * 4);
  }

  .am\:p-5 {
    padding: calc(var(--am-spacing) * 5);
  }

  .am\:p-8 {
    padding: calc(var(--am-spacing) * 8);
  }

  .am\:px-1\.5 {
    padding-inline: calc(var(--am-spacing) * 1.5);
  }

  .am\:px-2 {
    padding-inline: calc(var(--am-spacing) * 2);
  }

  .am\:px-2\.5 {
    padding-inline: calc(var(--am-spacing) * 2.5);
  }

  .am\:px-3 {
    padding-inline: calc(var(--am-spacing) * 3);
  }

  .am\:px-3\.5 {
    padding-inline: calc(var(--am-spacing) * 3.5);
  }

  .am\:px-4 {
    padding-inline: calc(var(--am-spacing) * 4);
  }

  .am\:px-5 {
    padding-inline: calc(var(--am-spacing) * 5);
  }

  .am\:px-\[5px\] {
    padding-inline: 5px;
  }

  .am\:py-0\.5 {
    padding-block: calc(var(--am-spacing) * .5);
  }

  .am\:py-1\.5 {
    padding-block: calc(var(--am-spacing) * 1.5);
  }

  .am\:py-2 {
    padding-block: calc(var(--am-spacing) * 2);
  }

  .am\:py-2\.5 {
    padding-block: calc(var(--am-spacing) * 2.5);
  }

  .am\:py-2\.25 {
    padding-block: calc(var(--am-spacing) * 2.25);
  }

  .am\:py-3 {
    padding-block: calc(var(--am-spacing) * 3);
  }

  .am\:py-12 {
    padding-block: calc(var(--am-spacing) * 12);
  }

  .am\:py-px {
    padding-block: 1px;
  }

  .am\:pt-3 {
    padding-top: calc(var(--am-spacing) * 3);
  }

  .am\:pb-1\.5 {
    padding-bottom: calc(var(--am-spacing) * 1.5);
  }

  .am\:text-center {
    text-align: center;
  }

  .am\:text-left {
    text-align: left;
  }

  .am\:font-mono {
    font-family: var(--am-font-mono);
  }

  .am\:text-lg {
    font-size: var(--am-text-lg);
    line-height: var(--tw-leading, var(--am-text-lg--line-height));
  }

  .am\:text-sm {
    font-size: var(--am-text-sm);
    line-height: var(--tw-leading, var(--am-text-sm--line-height));
  }

  .am\:text-xl {
    font-size: var(--am-text-xl);
    line-height: var(--tw-leading, var(--am-text-xl--line-height));
  }

  .am\:text-xs {
    font-size: var(--am-text-xs);
    line-height: var(--tw-leading, var(--am-text-xs--line-height));
  }

  .am\:text-2xs {
    font-size: var(--am-text-2xs);
  }

  .am\:text-\[clamp\(1\.8rem\,5vw\,2\.5rem\)\] {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .am\:text-md {
    font-size: var(--am-text-md);
  }

  .am\:leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }

  .am\:leading-\[1\.65\] {
    --tw-leading: 1.65;
    line-height: 1.65;
  }

  .am\:leading-relaxed {
    --tw-leading: var(--am-leading-relaxed);
    line-height: var(--am-leading-relaxed);
  }

  .am\:font-bold {
    --tw-font-weight: var(--am-font-weight-bold);
    font-weight: var(--am-font-weight-bold);
  }

  .am\:font-extrabold {
    --tw-font-weight: var(--am-font-weight-extrabold);
    font-weight: var(--am-font-weight-extrabold);
  }

  .am\:font-semibold {
    --tw-font-weight: var(--am-font-weight-semibold);
    font-weight: var(--am-font-weight-semibold);
  }

  .am\:tracking-\[-0\.04em\] {
    --tw-tracking: -.04em;
    letter-spacing: -.04em;
  }

  .am\:tracking-\[\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .am\:break-all {
    word-break: break-all;
  }

  .am\:text-\(--agent-error-text\) {
    color: var(--agent-error-text);
  }

  .am\:text-\(--agent-primary\) {
    color: var(--agent-primary);
  }

  .am\:text-\(--agent-text\) {
    color: var(--agent-text);
  }

  .am\:text-\(--agent-text-muted\) {
    color: var(--agent-text-muted);
  }

  .am\:text-\(--c-btn-fg\) {
    color: var(--c-btn-fg);
  }

  .am\:text-accent {
    color: var(--am-color-accent);
  }

  .am\:text-border-strong {
    color: var(--am-color-border-strong);
  }

  .am\:text-danger {
    color: var(--am-color-danger);
  }

  .am\:text-info {
    color: var(--am-color-info);
  }

  .am\:text-success {
    color: var(--am-color-success);
  }

  .am\:text-text-inverse {
    color: var(--am-color-text-inverse);
  }

  .am\:text-text-muted {
    color: var(--am-color-text-muted);
  }

  .am\:text-text-primary {
    color: var(--am-color-text-primary);
  }

  .am\:text-text-secondary {
    color: var(--am-color-text-secondary);
  }

  .am\:text-text-tertiary {
    color: var(--am-color-text-tertiary);
  }

  .am\:text-warning {
    color: var(--am-color-warning);
  }

  .am\:text-white {
    color: var(--am-color-white);
  }

  .am\:uppercase {
    text-transform: uppercase;
  }

  .am\:tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .am\:no-underline {
    text-decoration-line: none;
  }

  .am\:underline {
    text-decoration-line: underline;
  }

  .am\:decoration-border-strong {
    -webkit-text-decoration-color: var(--am-color-border-strong);
    -webkit-text-decoration-color: var(--am-color-border-strong);
    text-decoration-color: var(--am-color-border-strong);
  }

  .am\:underline-offset-4 {
    text-underline-offset: 4px;
  }

  .am\:shadow-\[0_24px_72px_rgb\(15_23_42\/0\.14\)\] {
    --tw-shadow: 0 24px 72px var(--tw-shadow-color, #0f172a24);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .am\:shadow-card {
    --tw-shadow: var(--c-shadow-card);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .am\:select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .am\:last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  @media (hover: hover) {
    .am\:hover\:bg-\(--c-btn-bg-hover\):hover {
      background-color: var(--c-btn-bg-hover);
    }

    .am\:hover\:bg-accent-strong:hover {
      background-color: var(--am-color-accent-strong);
    }

    .am\:hover\:bg-surface-hover:hover {
      background-color: var(--am-color-surface-hover);
    }

    .am\:hover\:bg-surface-sunken:hover {
      background-color: var(--am-color-surface-sunken);
    }

    .am\:hover\:text-text-primary:hover {
      color: var(--am-color-text-primary);
    }

    .am\:hover\:text-text-secondary:hover {
      color: var(--am-color-text-secondary);
    }
  }

  .am\:focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .am\:focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .am\:focus-visible\:outline-accent:focus-visible {
    outline-color: var(--am-color-accent);
  }

  .am\:disabled\:cursor-wait:disabled {
    cursor: wait;
  }

  .am\:disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .am\:disabled\:opacity-\[0\.68\]:disabled {
    opacity: .68;
  }

  @media (min-width: 760px) {
    .am\:min-\[760px\]\:px-5 {
      padding-inline: calc(var(--am-spacing) * 5);
    }
  }

  @media (min-width: 900px) {
    .am\:min-\[900px\]\:flex {
      display: flex;
    }

    .am\:min-\[900px\]\:grid-cols-\[auto_minmax\(0\,1fr\)\] {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .am\:min-\[900px\]\:flex-row {
      flex-direction: row;
    }

    .am\:min-\[900px\]\:items-center {
      align-items: center;
    }

    .am\:min-\[900px\]\:text-right {
      text-align: right;
    }
  }

  @media (min-width: 960px) {
    .am\:min-\[960px\]\:flex-row {
      flex-direction: row;
    }

    .am\:min-\[960px\]\:items-start {
      align-items: flex-start;
    }

    .am\:min-\[960px\]\:justify-between {
      justify-content: space-between;
    }
  }
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ── Motion 補充 token（第五刀把 #17799 的 transitions.dev 字彙併入 --motion-*，
   全站只剩一套動效字彙；主 token 在下方 --motion-fast/base/slow/ease）── */
:root {
  --motion-stagger: 40ms; /* 逐項進場的間隔 */
  --distance-medium: 12px; /* 進場位移 */
}

/* #15449 換色第 1 刀：legacy --agent-* 全 19 個變數重映射到新色盤（值表出處
   design/15449/Design Tokens.dc.html）。完整 before/after 對照見任務回報，
   本檔僅留必要註記；--agent-sidebar* 三個不屬本次 accent 換色範圍（非紅系、
   值表無對應項），維持原值，留給殼層重皮那一刀（analysis.md D 節 #2）處理。 */
:root {
  --agent-page: var(--c-surface-page);  /* was #eef1f4 */ /* 對齊 --c-surface-page */
  --agent-surface: var(--c-surface-card);  /* was #ffffff */ /* 對齊 --c-surface-card（無變化） */
  --agent-surface-muted: var(--c-surface-sunken);  /* was #f1f3f5 */ /* 對齊 --c-surface-sunken */
  --agent-border: var(--c-border-default);  /* was #e4e7eb */ /* 對齊 --c-border-default */
  --agent-text: var(--c-text-primary);  /* was #16233d */ /* 對齊 --c-text-primary */
  --agent-text-muted: var(--c-text-secondary);  /* was #4b5361 */ /* 對齊 --c-text-secondary */
  --agent-text-soft: var(--c-text-tertiary);  /* was #6b7280 */ /* 對齊 --c-text-tertiary */
  --agent-primary: var(--c-accent);  /* was #2aa6e8 */ /* 品牌紅 → 亮青藍，對齊 --c-accent */
  --agent-primary-hover: var(--c-accent-strong);  /* was #1b87c4 */ /* 對齊 --c-accent-strong（同色相加深，見 :root 色階收斂註記） */
  /* #15449 第 2 刀技債清理：--agent-primary-light 過去被 danger 與中性徽章共用，
     語意衝突。danger 語意 3 處（.context-chip.danger/.module-card.danger-card/
     .repair-callout）與中性徽章 2 處（.version-stack span/.module-row）已全部
     改直接吃 var(--c-danger-soft)/var(--c-danger) 或 var(--c-accent-soft)/
     var(--c-surface-sunken)（各自就近選字，見下方對應規則），本變數已無任何
     styles.css 內的消費點；改指向 --c-accent-soft 只為 App.tsx 登入頁那個沿用
     同一變數名的 <code> 高亮（am:bg-(--agent-primary-light)，語意本來就是中性
     程式碼片段，不是 danger，改指向後同時修正了那處誤用）。 */
  --agent-primary-light: var(--c-accent-soft);
  /* 第 2 刀殼層重皮：sidebar 三色對齊設計 aside 實際值
     （design/15449/Agent Studio.dc.html:77,44-46,81-82,87） */
  --agent-sidebar: var(--c-sidebar-bg);  /* was #16181d */ /* aside 背景（.dc.html:77） */
  --agent-sidebar-border: var(--c-sidebar-line);  /* was #23262d */ /* aside border-right（.dc.html:77） */
  --agent-sidebar-text: var(--c-sidebar-dim);  /* was #9aa0ab */ /* .ap-navitem 預設文字/圖示色（.dc.html:44） */
  --agent-sidebar-text-hover: var(--c-sidebar-lit);  /* was #e8eaed */ /* .ap-navitem:hover 文字色（.dc.html:45） */
  --agent-sidebar-text-strong: var(--c-sidebar-lit);  /* was #f2f4f6 */ /* 品牌標題文字（.dc.html:81） */
  --agent-sidebar-text-muted: var(--c-sidebar-grp);  /* was #6b7178 */ /* 品牌副標/footer 說明文字（.dc.html:82） */
  --agent-sidebar-group-label: var(--c-sidebar-grp);  /* was #5e636d */ /* 分組標籤（.dc.html:87） */
  --agent-sidebar-hover-bg: var(--c-sidebar-hover);  /* was rgb(255 255 255 / 0.05) */ /* .ap-navitem:hover 底色（.dc.html:45） */
  --agent-sidebar-active-text: #ffffff; /* .ap-navitem.active 白字（design:46；feat/design-1to1 由深字 #06222f 校正） */
  --agent-success-bg: #dcf3e7; /* 對齊 --c-success-soft */
  --agent-success-text: #059669; /* 對齊 --c-success */
  --agent-warning-bg: #fcefd1; /* 對齊 --c-warning-soft */
  --agent-warning-text: #b45309; /* 對齊 --c-warning */
  --agent-error-bg: #fce1e0; /* 對齊 --c-danger-soft */
  --agent-error-text: #dc2626; /* 對齊 --c-danger */
  color: var(--agent-text);
  background: var(--agent-page);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--agent-page);
}

button,
select,
input {
  font: inherit;
}

button {
  border: 0;
}

/* ============================================================
   #15449 第 7 刀：全域按鈕系統。
   取代原本分散在 .header-actions/.table-action/.ai-brain-inline-actions/
   .primary-button 等處各自硬編的尺寸定義，收斂成三層級規格
   （design/15449/layout-spec.md §1，出處 .dc.html:37-42）：
   primary 8px 15px/13px/700，secondary 7px 13px/12.5px/600，
   danger（ghost-danger）同 secondary 尺寸＋danger 語意色。
   radius 一律 10px（design:37-41 三型按鈕字面值，feat/design-1to1 由 7px 校正）；
   hover 只換色不改尺寸；disabled 態設計未定義，
   沿用既有 opacity .55 + not-allowed（見下方 button:disabled）。
   ============================================================ */
/* ═══════════════════════════════════════════════════════════════════
   ui-btn 元件系統（前端大改第三刀）——全站按鈕唯一來源。
   元件：src/ui/Button.tsx。規則：樣式值只走 token，零手刻色值/毫秒。
   視覺 1:1 移植自 .btn 家族；唯一新增：press 縮 0.98、focus ring、spinner。
   ═══════════════════════════════════════════════════════════════════ */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px; /* 2026-08-10 使用者裁示：角度收小 */
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.45;
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
.ui-btn:active:not(:disabled) { transform: scale(0.98); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--c-focus-ring); }
.ui-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.ui-btn svg { flex: none; }

/* 通用「開啟中／選中」狀態（原 .irw-btn--active / .conv-filter-btn.on 收編）：
   工具列切換鈕（JSON、測試）、篩選 pill 的 on 態都用它。 */
.ui-btn.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-surface-sunken);
}

.ui-btn--primary {
  border-color: var(--c-btn-border);
  background: var(--c-btn-bg);
  padding: 11px 20px;
  color: var(--c-btn-fg);
  font-size: 13.5px;
  font-weight: 700;
}
.ui-btn--primary:hover:not(:disabled),
.ui-btn--primary:active:not(:disabled) {
  border-color: var(--c-btn-bg-hover);
  background: var(--c-btn-bg-hover);
  color: var(--c-btn-fg-hover);
}

.ui-btn--secondary {
  border-color: var(--agent-border);
  background: var(--agent-surface);
  padding: 9px 16px;
  color: var(--agent-text);
  font-size: 13px;
  font-weight: 600;
}
.ui-btn--secondary:hover:not(:disabled) { background: var(--agent-surface-muted); }
.ui-btn--secondary:active:not(:disabled) {
  background: var(--agent-surface-muted);
  border-color: var(--c-border-strong);
}

.ui-btn--ghost {
  background: transparent;
  padding: 9px 16px;
  color: var(--c-text-secondary);
  font-size: 13px;
  font-weight: 600;
}
.ui-btn--ghost:hover:not(:disabled) { background: var(--c-surface-hover); color: var(--c-text-primary); }

.ui-btn--danger {
  border-color: var(--agent-border);
  background: transparent;
  padding: 9px 16px;
  color: var(--c-danger);
  font-size: 13px;
  font-weight: 600;
}
.ui-btn--danger:hover:not(:disabled),
.ui-btn--danger:active:not(:disabled) {
  border-color: var(--c-danger-soft);
  background: var(--c-danger-soft);
}

.ui-btn--sm { padding: 6px 12px; font-size: 12px; }

/* 大號：與 --primary 同份量。secondary/soft 要跟 primary 併排成對時用，
   兩顆高度才一致（2026-08-10 使用者裁示：設定精靈 vs Run 試打） */
.ui-btn--lg { padding: 11px 20px; font-size: 13.5px; }

/* 淡灰 tonal（無框灰底）：主動作旁的次要入口，比 --secondary 更安靜 */
.ui-btn--soft {
  border-color: transparent;
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
  font-weight: 600;
}
.ui-btn--soft:hover:not(:disabled) { background: var(--c-border-default); }

/* 文字鈕內的 icon 統一 15px（原 .kw-btn svg 15px 收編；lucide 預設 24 太大） */
.ui-btn--primary svg,
.ui-btn--secondary svg,
.ui-btn--ghost svg,
.ui-btn--danger svg,
.ui-btn--danger-solid svg {
  width: 15px;
  height: 15px;
}

/* 實底紅（原 .dlg-btn-danger / .kw-btn-danger 收編）：彈窗的破壞性主動作。
   跟 --danger（透明底紅字，工具列用）分工：真的要按下去確認刪除時才用實底。 */
.ui-btn--danger-solid {
  border-color: var(--c-danger);
  background: var(--c-danger);
  padding: 11px 20px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.ui-btn--danger-solid:hover:not(:disabled),
.ui-btn--danger-solid:active:not(:disabled) { filter: brightness(0.92); }

/* 膠囊形（原 .start-conv-btn / .conv-filter-btn 的 999px 圓角收編） */
.ui-btn--pill { border-radius: 999px; }

/* 純圖示方形鈕（原 .home-iconbtn / .topbar-home-btn 收編）。 */
.ui-btn--icon {
  width: 30px;
  height: 30px;
  padding: 0;
  border-color: var(--c-border-default);
  background: transparent;
  color: var(--c-text-tertiary);
}
.ui-btn--icon:hover:not(:disabled) { background: var(--c-surface-hover); color: var(--c-text-primary); }
.ui-btn--icon.is-on { color: var(--c-accent); border-color: var(--c-accent); }
.ui-btn--icon svg { width: 16px; height: 16px; }

/* 無框安靜版（原 .kw-icon-btn / .kw-copy-btn / .choice-del 收編）：清單列上的行內小 icon 鈕 */
.ui-btn--icon-ghost { border-color: transparent; }

/* 小號 icon 鈕（原 .kw-icon-btn-sm / .copy-id-btn 22-24px 收編） */
.ui-btn--icon.ui-btn--icon-sm { width: 24px; height: 24px; border-radius: 8px; }
.ui-btn--icon.ui-btn--icon-sm svg { width: 14px; height: 14px; }

/* 破壞性 icon 鈕：平時中性，hover/focus 才轉紅——不讓紅色在清單上一直叫
   （原 .kw-icon-btn-danger / .choice-del:hover 收編） */
.ui-btn--icon.is-danger:hover:not(:disabled),
.ui-btn--icon.is-danger:focus-visible {
  background: var(--c-danger-soft);
  border-color: transparent;
  color: var(--c-danger);
}

/* 複製成功的短暫回饋（原 .copy-id-btn--flashed 收編） */
.ui-btn--icon.is-flash { color: var(--kind-green, #16a34a); border-color: transparent; }

/* 實底 accent 圓形 icon 鈕（原 .send-btn 收編）：聊天輸入列的送出 */
.ui-btn--icon-primary {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border-color: var(--c-btn-bg);
  background: var(--c-btn-bg);
  color: var(--c-btn-fg);
}
.ui-btn--icon-primary:hover:not(:disabled) { background: var(--c-btn-bg-hover); border-color: var(--c-btn-bg-hover); color: var(--c-btn-fg); }

/* 深色 hero（Build 頁聊天框）內的 icon 鈕：hero 是獨立深色島，用原
   .home-iconbtn 的深色值做情境覆寫（島內硬編值，島外一律走 token）。 */
.home-chatbox .ui-btn--icon {
  border-color: #2c313a;
  background: #1b1f25;
  color: #9aa0ab;
}
.home-chatbox .ui-btn--icon:hover:not(:disabled) { background: #232830; color: #d5d9e0; }
.home-chatbox .ui-btn--icon.is-on { color: var(--c-accent); border-color: var(--c-accent); }

/* 外框鈕（透明底＋邊框；原 .topbar-home-btn 收編） */
.ui-btn--outline {
  border-color: var(--c-border-default);
  background: transparent;
  color: var(--c-text-tertiary);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
}
.ui-btn--outline:hover:not(:disabled) { background: var(--c-surface-hover); color: var(--c-text-primary); }

/* segmented 成員鈕（原 .wz-segbtn 收編；容器仍是 .wz-seg） */
.ui-btn--seg {
  flex: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-tertiary);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
}
.ui-btn--seg[aria-pressed="true"], .ui-btn--seg.is-active, .ui-btn--seg.on {
  background: var(--agent-surface);
  color: var(--c-text-primary);
  box-shadow: var(--c-shadow-card);
}

.ui-btn__spinner {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ui-btn-spin 700ms linear infinite;
}
@keyframes ui-btn-spin { to { transform: rotate(360deg); } }

/* ═══════════ 切換動效與骨架屏（第四刀） ═══════════
   原則：只動 opacity / transform，200ms 級收場；動畫結束後不留 transform
   （fill 只用 backwards），避免對 fixed 定位的抽屜／彈窗形成 containing block。 */

/* 內容進場：三個掛點共用——
   .tab-pane（AgentSettings 分頁內容，key 換就重播：切頁籤、切 Agent）
   .settings-panel（WorkspaceRoute 主面板，key=專案 id：切專案重播）
   .irw-tabpanel（Intent Router 內頁籤，keep-alive hidden 切換；由 display
   變化觸發動畫重播，不用 key、不丟編輯狀態） */
@keyframes pane-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tab-pane,
.settings-panel,
.irw-tabpanel:not([hidden]) {
  animation: pane-in var(--motion-slow) var(--motion-ease) backwards;
}

/* 名冊清單進場 stagger：--stagger-i 由 JSX 逐項寫入，延遲封頂 12 項
   （後面的項目一起出現，捲動到的內容不用等） */
.agent-roster-item {
  animation: pane-in var(--motion-slow) var(--motion-ease) backwards;
  animation-delay: calc(min(var(--stagger-i, 0), 12) * var(--motion-stagger));
}

/* ═══ 第五刀：下拉選單／彈出面板／彈窗 收編 ═══ */

/* 全站唯一的原生 select 皮（收編 .field-select／.wz-input(select)／
   .irw-input(select)／.home-tenant-picker select／.form-grid select 等）。
   appearance:none 換掉各家 OS 的原生箭頭，chevron 用 data-uri 內嵌
   （lucide chevron-down，描邊色＝--c-text-secondary 的字面 #46536b：
   background-image 吃不到 currentColor，改色時記得同步）。 */
.ui-select {
  appearance: none;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background:
    var(--c-surface-card)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346536b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 9px center / 14px;
  padding: 7px 30px 7px 12px;
  color: var(--c-text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.ui-select:hover:not(:disabled) {
  border-color: var(--c-border-strong);
}

.ui-select:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

.ui-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ui-select--sm {
  padding: 4px 26px 4px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  background-position: right 7px center;
}

/* 彈出面板（下拉選單、popover）的統一外殼＋進場：
   原 .version-row-menu-popover / .home-tpl-menu-popover / .conv-search-menu /
   .dataset-pop / .scn-pop 各自寫的 border/bg/radius/shadow 收到這裡；
   各 class 只留定位與尺寸。進場從觸發點往下長（origin top）。 */
@keyframes ui-menu-in {
  from {
    opacity: 0;
    transform: translateY(-2px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ui-menu {
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  box-shadow: 0 12px 32px rgb(22 24 29 / 0.14);
  transform-origin: top;
  animation: ui-menu-in var(--motion-base) var(--motion-ease) backwards;
}

/* 彈窗／抽屜進場（疊加在既有 modal 結構上，不動排版）：
   置中彈窗 pop（縮放＋淡入）、遮罩 fade、側滑抽屜 slide。 */
@keyframes ui-modal-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ui-overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* 骨架屏原語：色塊用 --c-surface-sunken 脈動；形狀由使用處給寬高 */
@keyframes ui-skel-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.ui-skel {
  background: var(--c-surface-sunken);
  border-radius: 6px;
  animation: ui-skel-pulse 1.2s var(--motion-ease) infinite;
}

.ui-skel--circle {
  border-radius: 50%;
}

/* 名冊骨架列：形狀對齊真實列，內部全換脈動色塊。
   .agent-roster-avatar 自帶底色與字色，這裡蓋掉讓 .ui-skel 的脈動顯得出來。 */
.agent-roster-row.is-skel {
  pointer-events: none;
}

.agent-roster-row.is-skel .agent-roster-avatar {
  background: var(--c-surface-sunken);
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .tab-pane,
  .settings-panel,
  .irw-tabpanel:not([hidden]),
  .agent-roster-item,
  .ui-skel,
  .ui-menu,
  .create-modal,
  .create-modal-overlay {
    animation: none;
  }

  .voice-picker-pop {
    animation: none;
  }

  .agent-tabbar__indicator {
    transition: none;
  }

  .ui-btn {
    transition: none;
  }

  .ui-btn:active:not(:disabled) {
    transform: none;
  }
}



/* feat/design-1to1：主按鈕底色由 accent（#2AA6E8）改為設計 deep 按鈕 token
   --c-btn-bg（#186087，design:37-38 .ap-btn-primary 字面），hover 用
   --c-btn-bg-hover（#134B68），不再借用 --agent-primary/-hover。 */









/* 小型按鈕（表格/卡片內操作，如「+ 群組」「綁定」），繼承 .btn-primary/
   .btn-secondary 的配色，只縮尺寸（layout-spec §1 小型按鈕列，.dc.html:147,395,407） */

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

.agent-product-shell {
  display: flex;
  min-height: 100svh;
  background: var(--agent-page);
  color: var(--agent-text);
}

.agent-product-sidebar {
  display: flex;
  width: 214px; /* 對齊設計 aside 固定寬（.dc.html:77） */
  min-height: 100svh;
  flex: 0 0 214px;
  flex-direction: column;
  overflow: hidden;
  background: var(--agent-sidebar);
  color: var(--agent-sidebar-text);
  transition: width var(--motion-slow) var(--motion-ease), flex-basis var(--motion-slow) var(--motion-ease);
}

.agent-product-sidebar.is-collapsed {
  width: 56px;
  flex-basis: 56px;
  overflow: visible;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--agent-sidebar-border);
  padding: 16px;
}

.sidebar-toggle {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin-left: auto;
  cursor: pointer;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--agent-sidebar-text);
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  border-color: var(--agent-sidebar-border);
  background: var(--agent-sidebar-hover-bg);
  color: var(--agent-sidebar-text-hover);
  outline: none;
}

.agent-product-sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding: 12px 8px;
}

.agent-product-sidebar.is-collapsed .sidebar-brand .brand-mark,
.agent-product-sidebar.is-collapsed .sidebar-brand > div,
.agent-product-sidebar.is-collapsed .sidebar-group-label,
.agent-product-sidebar.is-collapsed .sidebar-footer,
.agent-product-sidebar.is-collapsed .sidebar-nav button span {
  display: none;
}

.agent-product-sidebar.is-collapsed .sidebar-toggle {
  margin-left: 0;
}

.agent-product-sidebar.is-collapsed .sidebar-nav {
  overflow: visible;
  padding-inline: 8px;
}

.agent-product-sidebar.is-collapsed .sidebar-group + .sidebar-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--agent-sidebar-border);
}

.agent-product-sidebar.is-collapsed .sidebar-nav button {
  position: relative;
  justify-content: center;
  padding: 9px;
}

.agent-product-sidebar.is-collapsed
  .sidebar-nav
  button[data-sidebar-tooltip]::after {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: calc(100% + 10px);
  padding: 6px 9px;
  border: 1px solid var(--agent-sidebar-border);
  border-radius: 7px;
  background: var(--agent-sidebar);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.28);
  color: var(--agent-sidebar-text-strong);
  content: attr(data-sidebar-tooltip);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
  white-space: nowrap;
}

.agent-product-sidebar.is-collapsed
  .sidebar-nav
  button[data-sidebar-tooltip]:hover::after,
.agent-product-sidebar.is-collapsed
  .sidebar-nav
  button[data-sidebar-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.brand-mark {
  display: grid;
  width: 28px; /* 對齊設計品牌方塊尺寸（.dc.html:79） */
  height: 28px;
  place-items: center;
  border-radius: 12px; /* design:108 品牌方塊 radius 12px（feat/design-1to1 由 8px 校正） */
  background: var(--agent-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-mark svg {
  width: 18px;
  height: 18px;
}

.sidebar-brand strong,
.sidebar-brand small,
.sidebar-footer strong,
.sidebar-footer small {
  display: block;
}

.sidebar-brand strong {
  color: var(--agent-sidebar-text-strong);
  font-size: 0.95rem;
  line-height: 1.2;
}

.sidebar-version {
  display: block;
  margin-top: 1px;
  color: var(--agent-sidebar-text-muted);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1.1;
}

.sidebar-brand small,
.sidebar-footer small,
.sidebar-footer span {
  color: var(--agent-sidebar-text-muted);
  font-size: 0.76rem;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
}

.sidebar-group + .sidebar-group {
  margin-top: 14px;
}

.sidebar-group-label {
  margin: 12px 8px 8px;
  color: var(--agent-sidebar-group-label);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-group-label:first-child {
  margin-top: 4px;
}

.lifecycle-label {
  margin-top: 18px;
}

.sidebar-nav button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  border-radius: 10px; /* design:44 .ap-navitem radius 10px（feat/design-1to1 由 6px 校正） */
  background: transparent;
  padding: 9px 10px;
  text-align: left;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

.sidebar-nav button svg {
  flex: 0 0 auto;
  color: var(--agent-sidebar-text);
}

/* 主流程步驟編號徽章（結帳式進度感）：圓圈數字，active 步驟填色。 */
.sidebar-nav button .step-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--agent-sidebar-group-label, #5e636d);
  color: var(--agent-sidebar-group-label, #5e636d);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.sidebar-nav button.active .step-badge {
  background: var(--agent-primary, #2f6df6);
  border-color: var(--agent-primary, #2f6df6);
  color: #fff;
}

.sidebar-nav button span {
  color: var(--agent-sidebar-text);
  font-size: 0.8125rem; /* 13px，對齊設計 .ap-navitem（.dc.html:44）＋ text-lg 階 */
  font-weight: 500; /* 對齊設計 .ap-navitem 預設字重（.dc.html:44） */
  line-height: 1.25;
}

.sidebar-nav button small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--agent-sidebar-text-muted);
  font-size: 0.68rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* hover／active 分離對齊設計：hover 是低調的白色透明疊色＋提亮文字；
   active 是「微亮深底 #1A1D22 ＋白字 700 ＋左緣 2px accent 條」
   （design:46 .ap-navitem.active 字面值——feat/design-1to1 由舊版
   「實色 accent 底＋深字」校正，accent 只保留在左緣指示條）。 */
.sidebar-nav button:hover {
  background: var(--agent-sidebar-hover-bg);
}

.sidebar-nav button.active {
  background: #1a1d22;
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.sidebar-nav button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.sidebar-nav button:disabled:hover {
  background: transparent;
}

.sidebar-nav button:hover span,
.sidebar-nav button:hover small,
.sidebar-nav button:hover svg {
  color: var(--agent-sidebar-text-hover);
}

.sidebar-nav button.active span,
.sidebar-nav button.active small,
.sidebar-nav button.active svg {
  color: var(--agent-sidebar-active-text);
}

.sidebar-nav button.active span {
  font-weight: 700; /* 對齊設計 .ap-navitem.active 字重（.dc.html:46） */
}

.agent-admin-frame {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.agent-admin-topbar {
  display: flex;
  min-height: 56px;
  flex-wrap: wrap;
  /* #15449 第 7 刀：align-items 改 flex-start + gap 20px 對齊設計
     （左側 eyebrow/標題/副標多行堆疊時，兩側頂端對齊，見 .dc.html:99） */
  align-items: flex-start;
  gap: 20px;
  justify-content: space-between;
  /* 白底與底線退場（2026-08-10 裁示：頁首不要白色背景，融進頁底） */
  padding: 14px 24px 6px;
}

.topbar-left {
  display: flex;
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
}

.topbar-left strong {
  /* #15449 navbar 合併：header 即頁面標題，對齊設計 19px/700（.dc.html:102） */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.topbar-kicker,
.eyebrow {
  color: var(--agent-text-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 5px;
  color: var(--agent-primary);
}

.topbar-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.topbar-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--agent-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.context-chip {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--c-border-default);
  border-radius: 10px; /* design:53 .ap-chip radius 10px（feat/design-1to1 由 6px 校正） */
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 700;
}

.context-chip.danger {
  border-color: #ffcdd2; /* 沿用既有淺紅邊框值，非本刀範圍 */
  background: var(--c-danger-soft); /* 技債清理：danger 語意改直接吃 --c-danger-soft */
  color: var(--c-danger);
}

.agent-admin-main {
  min-width: 0;
  flex: 1;
  overflow: auto;
  /* 檐溝收到 12px（2026-08-10 使用者裁示，仿 voiceflow 內容貼近側欄） */
  padding: 0 12px 20px;
}

.admin-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

/* 知識庫頁內容欄。min-width:0 是必要的：remote 的名冊掛在下面，
   沒有它 flex/grid 祖先會被子內容撐寬而長出橫向捲軸。 */
.kb-page {
  min-width: 0;
}

.kb-page-heading {
  margin: 20px 0 14px;
}

/* 名冊外框：與上方「Agent 綁定」卡片同一套卡片語彙，讓兩塊在視覺上分得開，
   不再是「綁定 → 名冊」一路平鋪往下捲。 */
.kb-roster-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.kb-roster-head {
  border-bottom: 1px solid var(--c-border-default);
  padding: 12px 16px;
}

.kb-roster-head h2 {
  margin: 0 0 2px;
  color: var(--c-text-primary);
  font-size: 14px;
  font-weight: 700;
}

/* remote（ai-brain RagWorkspace）掛載處。remote 內部是 h-full + overflow-hidden
   的兩欄版面，h-full 要有「確定高度」的父層才算得出來——所以這裡一定要給高度，
   不能只給 flex。舊值是 calc(100vh - 220px)，那個 220 是「沒有 topbar」時湊出來的
   常數，補回 topbar 後必然算錯；改成夾在合理區間的 svh，與頁面其他元素無耦合。 */
.kb-remote-mount {
  height: clamp(420px, 66svh, 820px);
  overflow: hidden;
}

.kb-remote-mount.is-hidden {
  height: 0;
}

/* 知識庫頁的「這個 Agent 綁定的知識庫」區塊（在名冊之上）。 */
.kb-binding {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.kb-binding-empty {
  color: var(--c-text-secondary);
}

.kb-binding-empty p:last-child {
  margin: 4px 0 0;
  font-size: 12.5px;
}

.kb-binding-hint {
  margin: 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

/* 收合狀態的已綁清單：一排 chip，不佔版面。 */
.kb-binding-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* 「實際生效的是 workflow 節點」提示。用警示色而非錯誤色——這不是故障，
   是設定不會生效的告知。 */
.kb-binding-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--c-warning, #d98324);
  border-radius: 6px;
  background: var(--c-warning-soft, rgb(217 131 36 / 8%));
  font-size: 12.5px;
  line-height: 1.6;
}

.kb-binding-notice .kb-binding-summary {
  margin: 6px 0;
}

.kb-binding-tag {
  max-width: 100%;
  overflow: hidden;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong, var(--c-accent));
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Agent 設定頁「知識庫」頁籤（#17796）────────────────────────────────
   已附加 / 可附加兩區，下面接共用的「加入內容」與「文檔清單」兩張卡。
   兩區刻意不做成卡中卡：頁籤本身已經是一張卡的內容，再包一層只會讓層級變糊。 */
/* 知識庫分頁：雙欄（設計稿「知識庫綁定 v2」）
   稿是 grid 312px / minmax(0,1fr)——左邊「已附加」常駐當索引，右邊放被選中那個
   知識庫的內容（可附加清單、加入內容、文檔清單）。原本四塊直向堆疊，
   使用者得一直上下捲才能對照「我選了哪個」與「它的文檔」。

   刻意只用 CSS 不動 JSX：.kb-tab 的直接子元素正好就是那四個 section，
   用 grid-column 指派即可，不必包 wrapper（那個檔 1500+ 行，動結構風險高）。
   1100px 以下塌回單欄，同稿的 @media。 */
.kb-tab {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* 欄位指派一律用 aria-label / class，**不要用 :nth-child**。
   原本是 :nth-child(1..4)，但 d572ca0 寫的時候 .kb-tab 的直接子元素正好是四個
   section，之後 5356226 在最前面插了 .kb-tab-head，序號整批差一格：:nth-child(1)
   落在 head（不是 .kb-section，選不到），「已附加」變成 :nth-child(2) 跟著跑去
   右欄，左欄整片空白——稿的雙欄等於沒生效。這一層之後還會再加東西（當前知識庫卡
   就是一例），所以改成跟位置無關的選擇器，加減子元素都不會再壞。 */

/* 「已附加的知識庫」→ 左欄常駐索引，捲動時固定 */
.kb-tab > [aria-label="已附加的知識庫"] {
  position: sticky;
  top: 0;
  grid-column: 1;
  /* 第 1 列是 .kb-tab-head（grid-column:1/-1）。span 的數字取得比右欄實際塊數大，
     左欄格子才有足夠高度讓 sticky 有作用範圍；多出來的是空列，不佔高度。 */
  grid-row: 2 / span 6;
}

/* 右欄：可附加清單、當前知識庫卡，以及「新增來源」「文檔清單」兩張 .wz-card
   （精靈那邊共用的卡，不是 .kb-section）。少了 .wz-card 這條，「新增來源」會被
   auto-flow 丟進左欄那格 312px 裡，兩個拖放區會擠成 144px。
   :not() 明確排除左欄那張——兩條規則特異性相同，光靠先後順序決勝負太脆弱。 */
.kb-tab > .kb-section:not([aria-label="已附加的知識庫"]),
.kb-tab > .kb-cur,
.kb-tab > .wz-card {
  grid-column: 2;
}

@media (max-width: 1100px) {
  .kb-tab {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .kb-tab > [aria-label="已附加的知識庫"] {
    position: static;
  }
}

.kb-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.kb-section-title {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.kb-section-desc {
  margin: -4px 0 2px;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 搜尋框推到標題列右端；窄畫面時整條落到下一行、佔滿寬度。 */
.kb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  min-width: min(240px, 100%);
}

.kb-search:focus-within {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.kb-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--c-text-primary);
  font-size: 12.5px;
  outline: none;
}

.kb-search input::placeholder {
  color: var(--c-text-tertiary);
}

.kb-search-spin {
  animation: kb-spin 0.9s linear infinite;
  flex: none;
}

@keyframes kb-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-search-spin {
    animation: none;
  }
}

.kb-search-clear {
  display: flex;
  flex: none;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--c-text-tertiary);
  cursor: pointer;
}

.kb-search-clear:hover {
  background: var(--c-surface-card);
  color: var(--c-text-primary);
}

/* 已附加清單 */

/* 「檢視中」的那筆＝下方兩張卡正在操作的對象，必須一眼看得出來。
   用邊框＋底色表示，不用側邊色條——那條在這個介面裡沒有承載任何額外訊息。 */








.kb-attached-remove:hover:not(:disabled) {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* 可附加清單：一列一筆，右側 Attach。 */

/* 附加／移除的結果就顯示在那一列下面。放區塊層的話，「附加」鈕在下面的清單裡
   （一頁 20 筆），提示卻出現在畫面最上方——捲下去按的人看不到（#17797）。 */
.kb-row-notice {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-secondary, var(--c-text-muted));
}

.kb-row-notice.is-failed {
  color: var(--c-danger);
}







.kb-available[aria-busy="true"] {
  opacity: 0.6;
}

.kb-available-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

.kb-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kb-pager button {
  display: flex;
  padding: 4px;
  border: 1px solid var(--c-border-default);
  border-radius: 6px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  cursor: pointer;
}

.kb-pager button:hover:not(:disabled) {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

.kb-pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kb-pager-at {
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 空狀態：圖示＋一句說明＋下一步該做什麼，不是一行小字。 */
.kb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1px dashed var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-sunken);
  text-align: center;
}

.kb-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
  border-radius: 12px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
}

.kb-empty-title {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 13.5px;
  font-weight: 650;
}

.kb-empty-hint {
  max-width: 44ch;
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

.kb-empty {
  margin: 0;
  padding: 16px 0;
  color: var(--c-text-tertiary);
  font-size: 12.5px;
}

/* 窄畫面。卡片版型本來就是縱向堆疊（grid 自動收成一欄），舊的「操作鈕落到下一行
   ＋ 縮排 44px 對齊 icon」規則隨橫向列一起退場——那個 44px 是舊 icon 的寬度。 */
@media (max-width: 900px) {
  .kb-search {
    margin-left: 0;
    width: 100%;
  }
}

/* 已勾選的一眼看得出來，不用逐格找勾勾。 */

.admin-page-heading h1 {
  margin-bottom: 4px;
  font-size: 1.55rem;
  letter-spacing: 0;
}

.context-line,
.hero-copy,
.settings-header p,
.template-card small,
.placeholder-panel p,
.lifecycle-column p,
.recovery-card p,
.tab-body p {
  color: var(--agent-text-muted);
}

.context-line {
  margin-bottom: 0;
  font-size: 0.82rem;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.template-card {
  cursor: pointer;
}

/* #15449 第 7 刀：.header-actions/.table-action 原本各自硬編一套「唯一尺寸」
   按鈕樣式（且沒有 secondary 比 primary 小一階的層級），現改為單純的容器/
   別名 class——實際尺寸交給 .btn-primary/.btn-secondary/.btn-danger（見上方
   全域按鈕系統），className 已同步改到各 tsx 呼叫點。未加 .btn-* 修飾的
   裸 button（例如尚未遷移的第三方或忘記加 class 的情況）仍保底吃 primary
   尺寸，避免無樣式的按鈕。 */
.header-actions button:not([class*="btn-"]),
.table-action:not([class*="btn-"]) {
  border-radius: 10px; /* 同 .btn（design:37；feat/design-1to1 由 7px 校正） */
  background: var(--c-btn-bg); /* feat/design-1to1：保底 primary 一併吃按鈕 token */
  color: var(--c-btn-fg);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
}

.header-actions button:not([class*="btn-"]):hover,
.table-action:not([class*="btn-"]):hover {
  background: var(--c-btn-bg-hover);
}

/* #15449 第 11 刀：廢除左右分欄（原 minmax 540/520 兩欄 grid），改為設計
   workbench 的縱向結構——detail 直接全寬（design:238 起 isWorkbench 版面）。 */
.agent-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-workbench > * {
  min-width: 0;
}

/* feat/design-1to1：內容區卡片全面對齊設計 8px（design:256,299,316,338,357,371,
   392,406,432,459-471,495,511,520,542,584,613,659,673 —— v4 設計主內容卡一律
   radius 8px；12px 只保留給殼層大區塊，如 .project-recovery-card 全幅卡）。
   before: 0.75rem（12px，#15449 批次 A 第 3 項的舊 12px 階已被 v4 設計取代）。 */
.placeholder-panel,
.lifecycle-column,
.version-table,
.validation-summary,
.recovery-card,
.validation-table,
.project-recovery-card {
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  background: var(--agent-surface);
  box-shadow: var(--c-shadow-card);
}

/* Agent 詳情頁改頁籤式之後，卡片外觀只保留在最內層的內容卡（.wz-card）。
   `.settings-panel` 與 `.tab-body` 原本也吃上面那條規則，加上內層的 .wz-card
   會疊出三重邊框與陰影——外框套外框套卡片，視覺上像浮了三層。
   頁籤列本身已經標明所在位置，外層不需要再用容器把它框一次。 */
.settings-panel,
.tab-body {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 全幅招呼/救援卡屬「大區塊」階（對齊 design:184 home 大區塊 12px） */
.project-recovery-card {
  border-radius: 12px;
}

.settings-panel {
  overflow: hidden;
}

/* 名冊頁例外（codex `#136794`）：末列的 ⋯ 選單是絕對定位、不會撐高父層，
   祖先只要還在裁切就按不到。只有名冊這頁解除，其他分頁維持原本的裁切。 */
.settings-panel--roster {
  overflow: visible;
}

.settings-header,
.validation-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-header h2,
.placeholder-panel h3 {
  margin-bottom: 0;
  font-size: 1rem;
}

.settings-panel {
  padding: 4px 8px 12px;
}

.settings-header {
  padding-bottom: 14px;
}

.version-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.version-stack span,
.module-row,
.placeholder-warning,
.blocking-callout,
.success-callout,
.scope-pill,
.status,
.severity {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
}

/* feat/design-1to1 badge 家族：design:35 .ap-badge 字面值——radius 6px、
   padding 2px 7px、mono 11.5px/600、letter-spacing .02em、line-height 1.5
   （before: 4px 8px／0.72rem 800 非 mono）。 */
.version-stack span,
.module-row,
.scope-pill,
.status,
.severity {
  gap: 5px;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* feat/design-1to1 callout 家族（非 badge）：design:454 警示列——radius 8px、
   padding 11px 13px、12.5px 內文。 */
.placeholder-warning,
.blocking-callout,
.success-callout {
  gap: 9px;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* 技債清理：這兩個原本共用 --agent-primary-light（danger 語意色），但都是中性
   資訊徽章，非錯誤狀態——version-stack（版本/驗證狀態摘要）改用 accent-soft
   呼應設計的「重點但非狀態」徽章；module-row（樣板模組清單）改用 surface-sunken
   對齊設計 .ap-tag 的中性標籤配色（.dc.html:36,140）。 */
.version-stack span {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.module-row {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

.status,
.severity {
  text-transform: uppercase;
}

.status-active,
.status-ready_to_publish,
.status-published,
.status-passed,
.success-callout {
  /* #15449 第 6 刀：TeleAgent 的 StateCallout 共用這條規則，隨手把 alias 換成
     直連 token（--agent-success-bg/-text 本來就等值定義為 --c-success-soft/
     --c-success，見 styles.css:35-36），視覺零變動。 */
  background: var(--c-success-soft);
  color: var(--c-success);
}

/* #15449 批次 A 第 2 項：舊藍/灰硬編色 token 化。草稿系狀態對齊設計「草稿=
   中性灰 surface-sunken/text-tertiary」（design/15449/Agent Studio.dc.html:177）。
   before: background:#e3f2fd; color:#1565c0; */
.status-draft,
.status-validating,
.status-pending,
.status-running,
.status-not-run {
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}

.status-needs-validation,
.status-publish_failed,
.status-failed,
.placeholder-warning,
.blocking-callout {
  /* 同上：blocking-callout 是 TeleAgentPanel 的 StateCallout 錯誤態，改直連
     --c-danger-soft/--c-danger（--agent-error-bg/-text 本來就等值，見
     styles.css:39-40），視覺零變動。 */
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* before: background:#eeeeee; color:#616161; 同上，中性狀態對齊 surface/text token。 */
.status-archived,
.status-skipped {
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}

.tab-body {
  min-height: 260px;
  background: var(--agent-surface-muted);
  /* 內距由 .settings-panel 一層統一給（4/16/16），這裡不再疊一份 */
  padding: 0;
}

.tab-body h3,
.validation-summary h4,
.recovery-card h4,
.lifecycle-column h4 {
  margin-bottom: 7px;
  font-size: 0.98rem;
}

.checklist {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #333;
  font-size: 0.84rem;
}

.checklist li + li {
  margin-top: 6px;
}

.validation-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 建立 Agent 彈窗內容：照 claude.ai/design「Agent Studio 視覺設計/建立 Agent.dc.html」
   兩步驟版面——步驟標頭（編號徽章＋標題＋提示）、樣板卡（scope 徽章＋單選圓圈＋
   模組 chip、選中左側 accent 條）、參數卡（頭部完成度徽章／欄位含 code 名與缺漏
   提示／收合式 request payload／底部 POST action bar）。圓角不取設計字面 4px，
   沿用本 repo 卡 8px／控件 7px，與 v4 卡片圓角語言一致。 */
.template-flow {
  display: flex;
  flex-direction: column;
  gap: 22px; /* 彈窗檔 body 區塊 gap 22px */
}

.template-step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.template-step-head h3 {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.template-step-head + .template-grid {
  margin-top: 12px;
}

.step-badge {
  display: inline-flex;
  flex: none;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 6px; /* badge 家族 6px（design:35；feat/design-1to1 由 5px 校正） */
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
}

.step-hint {
  margin: 0;
  color: var(--c-text-muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.step-title-meta {
  color: var(--agent-text-muted);
  font-size: 0.8rem;
  font-weight: 400;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.template-card {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  background: var(--agent-surface);
  box-shadow: var(--c-shadow-card);
  padding: 16px 17px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.template-card:hover {
  border-color: var(--c-border-strong);
}

.template-card.active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.template-card.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--c-accent);
}

.template-card strong {
  font-size: 0.94rem;
  letter-spacing: -0.01em;
}

.template-card small {
  font-size: 0.78rem;
  line-height: 1.55;
}

.template-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.template-radio {
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  color: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.template-card.active .template-radio {
  border: 1px solid var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

/* feat/design-1to1：對齊 design:36 .ap-tag 字面值——radius 8px、padding 2px 7px、
   11px/500、非 mono（before: 5px／2px 8px／mono 0.72rem）。 */
.template-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
}

/* before: background:#e3f2fd; color:#1565c0; 基礎範圍標籤無強語意，對齊中性
   surface/text token；.scope-project 保留獨立紫色語意，改對齊設計唯一的紫色
   token --c-info(-soft)（before: background:#f3e5f5; color:#6a1b9a），維持與
   .scope-organization（未列入本批，暫留原色）三色可辨識。 */
.scope-pill {
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  text-transform: uppercase;
}

.scope-project {
  background: var(--c-info-soft);
  color: var(--c-info);
}

.scope-organization {
  background: #e0f2f1;
  color: #00695c;
}

.placeholder-panel {
  border: 1px solid var(--agent-border);
  border-radius: 8px;
  background: var(--agent-surface);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
}

.placeholder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--agent-border);
}

.placeholder-head .step-hint {
  margin-top: 3px;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--c-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
}

.field-label .req {
  color: var(--c-danger);
  font-weight: 700;
}

.field-label small {
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.field-help {
  color: var(--c-text-muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.field-help.warn {
  color: var(--c-warning);
  font-weight: 500;
}

/* 建立彈窗的 Agent 名稱＋描述欄（Redmine #16061 P2-1／P2-2）：全寬直排。 */
.create-basics {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 0;
}

.create-basics label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.create-basics input,
.create-basics textarea {
  border: 1px solid var(--agent-border);
  border-radius: 10px;
  background: var(--agent-surface);
  color: var(--agent-text);
  padding: 8px 11px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.create-basics input {
  height: 34px;
  padding: 0 11px;
}

.create-basics textarea {
  min-height: 52px;
  line-height: 1.5;
  resize: vertical;
}

.create-basics input::placeholder,
.create-basics textarea::placeholder {
  color: var(--c-text-placeholder);
}

.create-basics input:focus,
.create-basics textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.payload-block {
  padding: 0 18px 8px;
}

.payload-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 9px 0;
  cursor: pointer;
  color: var(--c-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.payload-toggle .chev {
  display: inline-block;
  transition: transform var(--motion-slow) var(--motion-ease);
}

.payload-toggle .chev.open {
  transform: rotate(90deg);
}

.payload-rule {
  flex: 1;
  height: 1px;
  background: var(--agent-border);
}

.payload-hint {
  color: var(--c-text-muted);
  font-weight: 500;
}

.payload-preview {
  overflow: auto;
  margin: 0 0 6px;
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* sunken 程式碼區塊統一 8px（同 .service-summary pre；feat/design-1to1） */
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  padding: 13px 15px;
  font-size: 0.78rem;
  line-height: 1.65;
}

.placeholder-panel .form-callout {
  margin: 0 18px 12px;
}

.template-actionbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--agent-border);
  background: var(--c-surface-sunken);
}

.method-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px; /* badge 家族 6px（design:35；feat/design-1to1 由 5px 校正） */
  background: var(--c-info-soft);
  color: var(--c-info);
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.endpoint-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
}

.actionbar-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.inline-actions {
  flex-direction: row;
  justify-content: flex-start;
}

.version-lifecycle {
  min-width: 0;
}

.settings-panel-versions,
.tab-body-versions {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tab-body-versions {
  padding: 0;
}

.version-lifecycle-heading {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24px;
  margin-bottom: 18px;
}

.version-lifecycle-heading > div {
  min-width: 0;
  margin-right: auto;
}

.version-lifecycle-heading h2,
.version-lifecycle-heading p {
  margin: 0;
}

.version-lifecycle-heading h2 {
  font-size: 1.28rem;
  line-height: 1.35;
}

.version-lifecycle-heading p {
  margin-top: 6px;
  color: var(--c-text-tertiary);
  font-size: 0.82rem;
}

.version-lifecycle-heading .ui-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.version-environment-table {
  overflow: visible;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.version-environment-row {
  display: grid;
  min-width: 790px;
  grid-template-columns:
    minmax(210px, 1.7fr)
    minmax(110px, 0.8fr)
    minmax(125px, 0.9fr)
    minmax(130px, 1fr)
    minmax(130px, 1fr)
    82px;
  align-items: center;
}

.version-environment-row > * {
  min-width: 0;
  padding: 15px 18px;
}

.version-environment-head {
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
}

.version-environment-row:not(.version-environment-head) {
  color: var(--c-text-primary);
  font-size: 0.82rem;
}

.version-environment-name,
.version-row-badges,
.version-traffic,
.version-environment-actions {
  display: flex;
  align-items: center;
}

.version-environment-name {
  gap: 10px;
}

.version-environment-name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-row-badges,
.version-traffic {
  gap: 7px;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.version-badge-draft {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

.version-badge-live {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.version-environment-alias {
  border-radius: 4px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  padding: 2px 5px;
  font-size: 0.74rem;
}

.version-environment-actions {
  position: relative;
  justify-content: flex-end;
  gap: 2px;
}

.version-table-icon-button {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-tertiary);
  cursor: pointer;
}

.version-table-icon-button:hover,
.version-table-icon-button:focus-visible {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}

/* .version-row-menu 家族：版本列選單已改版移除，死 CSS 清掉（第五刀）。 */

.version-action-feedback {
  margin-top: 12px;
}

.version-action-feedback:empty {
  display: none;
}

.version-action-feedback-error {
  border-left: 3px solid var(--c-danger);
  border-radius: 7px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
  padding: 10px 12px;
  font-size: 0.78rem;
}

.version-action-feedback-error ul {
  margin: 5px 0 0;
  padding-left: 18px;
}

.version-drawer-layer {
  position: fixed;
  z-index: 1100;
  inset: 0;
}

.version-drawer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgb(22 24 29 / 0.32);
  cursor: default;
}

.version-drawer {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: min(430px, 92vw);
  height: 100%;
  flex-direction: column;
  border-left: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
  box-shadow: -20px 0 48px rgb(22 24 29 / 0.16);
  animation: version-drawer-enter 180ms ease-out;
}

@keyframes version-drawer-enter {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}

.version-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--c-border-default);
}

.version-drawer-header h2 {
  margin: 0;
}

.version-drawer-header h2 {
  font-size: 1rem;
}

.version-drawer-header div > p:last-child {
  margin-top: 7px;
  color: var(--c-text-tertiary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.version-icon-button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  cursor: pointer;
}

.version-icon-button:hover,
.version-icon-button:focus-visible {
  border-color: var(--c-border-strong);
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}

.version-drawer-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.version-drawer-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.version-drawer-row {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
  background: transparent;
  color: var(--c-text-primary);
  text-align: left;
  cursor: pointer;
}

.version-drawer-row:hover,
.version-drawer-row:focus-visible {
  background: var(--c-surface-sunken);
}

.version-creator-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.version-drawer-row-copy {
  min-width: 0;
}

.version-drawer-row-copy strong,
.version-drawer-row-copy > span {
  display: block;
}

.version-drawer-row-copy > span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--c-text-tertiary);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-live-percent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: var(--c-success-soft);
  color: var(--c-success);
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.version-drawer-state {
  padding: 36px 22px;
  color: var(--c-text-tertiary);
  text-align: center;
}

.version-history-screen {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-surface-page);
}

.version-history-screen-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.version-history-screen-header p,
.version-history-screen-header h1 {
  margin: 0;
}

.version-history-screen-header h1 {
  margin-top: 2px;
  font-size: 1.08rem;
}

.version-history-close {
  margin-left: auto;
}

.version-history-screen-body {
  width: min(1180px, calc(100% - 48px));
  min-height: 0;
  flex: 1;
  margin: 0 auto;
  padding: 26px 0 120px;
  overflow-y: auto;
}

.version-compare-mode {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  border: 1px solid var(--c-border-default);
  border-radius: 999px;
  background: var(--c-surface-card);
}

.version-compare-mode-option {
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-text-secondary);
  background: transparent;
  cursor: pointer;
}

.version-compare-mode-option:hover:not(:disabled):not(.on) {
  color: var(--c-text-primary);
}

.version-compare-mode-option.on {
  color: var(--c-accent-strong, var(--c-accent));
  background: var(--c-accent-soft);
}

.version-compare-mode-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.version-compare-headings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 900px;
  margin-bottom: 18px;
}

.version-compare-headings > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.version-compare-headings span {
  color: var(--c-text-tertiary);
  font-size: 0.76rem;
}

.version-compare-headings strong {
  font-size: 0.92rem;
}

.version-compare-headings em {
  margin-left: auto;
  border-radius: 999px;
  background: var(--c-success-soft);
  color: var(--c-success);
  padding: 3px 8px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

.version-identical-callout {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--c-info) 25%, var(--c-border-default));
  border-radius: 10px;
  background: var(--c-info-soft);
  color: var(--c-info);
  padding: 14px 16px;
}

.version-identical-callout > svg {
  flex: none;
  margin-top: 1px;
}

.version-identical-callout strong,
.version-identical-callout span {
  display: block;
}

.version-identical-callout strong {
  color: var(--c-text-primary);
  font-size: 0.88rem;
}

.version-identical-callout span {
  margin-top: 4px;
  color: var(--c-text-secondary);
  font-size: 0.76rem;
}

.full-config-diff {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
}

.full-config-diff > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border-default);
}

.full-config-diff > header h2,
.full-config-diff > header p {
  margin: 0;
}

.full-config-diff > header h2 {
  font-size: 0.92rem;
}

.full-config-diff > header p {
  margin-top: 5px;
  color: var(--c-text-tertiary);
  font-size: 0.75rem;
}

.full-config-diff-navigation {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.full-config-diff-navigation span {
  margin-right: 3px;
  color: var(--c-text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
}

.full-config-diff-navigation button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--c-border-default);
  border-radius: 7px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
}

.full-config-diff-navigation button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.full-config-diff-grid {
  min-width: 900px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

.full-config-diff-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.full-config-diff-row + .full-config-diff-row {
  border-top: 1px solid color-mix(in srgb, var(--c-border-default) 45%, transparent);
}

.full-config-diff-row-active {
  position: relative;
  z-index: 1;
  outline: 2px solid color-mix(in srgb, var(--c-info) 55%, transparent);
  outline-offset: -2px;
}

.full-config-line {
  display: grid;
  grid-template-columns: 42px 20px minmax(max-content, 1fr);
  min-height: 28px;
  line-height: 28px;
}

.full-config-line + .full-config-line {
  border-left: 1px solid var(--c-border-default);
}

.full-config-line-number {
  padding-right: 9px;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  text-align: right;
  user-select: none;
}

.full-config-line-marker {
  text-align: center;
  user-select: none;
}

.full-config-line code {
  padding: 0 12px 0 2px;
  color: inherit;
  font: inherit;
  white-space: pre;
}

.full-config-line-removed {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.full-config-line-added {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.full-config-line-removed .full-config-line-number,
.full-config-line-added .full-config-line-number {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.version-history-screen-actions {
  position: fixed;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 74px;
  padding: 14px max(24px, calc((100vw - 1180px) / 2));
  border-top: 1px solid var(--c-border-default);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(8px);
}

.version-history-screen-actions > span {
  margin-right: auto;
  color: var(--c-text-secondary);
  font-size: 0.78rem;
}

.lifecycle-column,
.validation-summary,
.recovery-card {
  padding: 14px;
}

.active-runtime {
  background: #fffafa;
}

.endpoint-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.endpoint-stack code {
  width: fit-content;
  border-radius: 6px;
  background: var(--agent-sidebar);
  color: #e2e8f0;
  padding: 5px 7px;
  font-size: 0.73rem;
}

/* 版本頁 API 路徑摺疊區（Redmine #16061 P2-4）：PM 預設看不到裸路徑，工程可展開。 */
.endpoint-details {
  margin: 12px 0;
}

.endpoint-details > summary {
  cursor: pointer;
  width: fit-content;
  color: var(--c-muted, #64748b);
  font-size: 0.72rem;
  list-style: revert;
}

.endpoint-details[open] > summary {
  margin-bottom: 2px;
}

.endpoint-details .endpoint-stack {
  margin: 6px 0 0;
}

.version-table,
.validation-table {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
}

.version-row,
.validation-row {
  display: grid;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--agent-border);
  padding: 10px 12px;
  font-size: 0.82rem;
}

.version-row {
  grid-template-columns: 1fr 0.7fr 1.25fr 0.75fr;
}

.validation-row {
  grid-template-columns: 0.9fr 0.52fr 0.52fr 1.65fr;
}

.version-row:first-child,
.validation-row:first-child {
  border-top: 0;
}

.version-row-head,
.validation-row-head {
  background: var(--agent-surface-muted);
  color: #424242;
  font-weight: 800;
}

.version-row small,
.validation-row small {
  display: block;
  color: var(--agent-text-soft);
}

.severity-blocking {
  background: var(--agent-error-bg);
  color: var(--agent-error-text);
}

.severity-warning {
  background: var(--agent-warning-bg);
  color: var(--agent-warning-text);
}

/* before: background:#e3f2fd; color:#1565c0; 名稱即語意，直連 --c-info(-soft)。 */
.severity-info {
  background: var(--c-info-soft);
  color: var(--c-info);
}

.module-card {
  border: 1px solid var(--agent-border);
  border-radius: 8px; /* v4 卡片系 8px（feat/design-1to1 由 12px 校正） */
  background: var(--agent-surface);
  padding: 18px;
}

.module-card h3 {
  margin: 4px 0 8px;
}

.module-card p {
  margin: 0 0 12px;
  color: var(--agent-muted);
}

.module-card.danger-card {
  border-color: #ffcdd2; /* 沿用既有淺紅邊框值，非本刀範圍 */
  background: var(--c-danger-soft); /* 技債清理：danger 語意改直接吃 --c-danger-soft */
}

.module-card.warning-card {
  border-color: #ffe0b2; /* 沿用既有淺橙邊框值，非本刀範圍（比照 .danger-card 處理原則） */
  /* before: background:#fff8e1; 技債清理：warning 語意改直連 --c-warning-soft */
  background: var(--c-warning-soft);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.repair-callout,
.route-callout {
  width: auto;
  margin: 10px 0 14px;
}

.repair-callout {
  border: 1px solid #ffcdd2; /* 沿用既有淺紅邊框值，非本刀範圍 */
  border-radius: 8px;
  background: var(--c-danger-soft); /* 技債清理：danger 語意改直接吃 --c-danger-soft */
  color: var(--c-danger);
  padding: 10px 12px;
  font-size: 0.84rem;
}

.recovery-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
}

.project-recovery-card {
  max-width: 780px;
  padding: 24px;
}

@media (max-width: 900px) {
  .version-environment-table {
    overflow-x: auto;
  }

  .agent-admin-topbar {
    align-items: flex-start;
    padding: 10px 14px;
  }

  .topbar-controls {
    justify-content: flex-start;
  }

  .agent-admin-main {
    padding: 0 14px 18px;
  }

  .admin-page-heading,
  .settings-header,
  .validation-summary {
    flex-direction: column;
  }

  .header-actions,
  .version-stack {
    justify-content: flex-start;
  }

  .version-lifecycle,
  .version-row,
  .validation-row {
    grid-template-columns: 1fr;
  }

  .version-history-screen-body {
    width: min(calc(100% - 24px), 1180px);
  }
}

/* 與 teleagent-admin 的 use-mobile.ts 相同：768px 以下進入窄版。
   rail 固定保留 56px；展開時覆蓋內容，不再把水平導覽折成多行。 */
@media (max-width: 767px) {
  .agent-product-shell.has-studio-sidebar {
    position: relative;
    padding-left: 56px;
  }

  .has-studio-sidebar > .agent-product-sidebar {
    position: absolute;
    z-index: 40;
    inset: 0 auto 0 0;
    width: 240px;
    min-height: 100%;
    max-height: none;
    box-shadow: 12px 0 28px rgb(0 0 0 / 0.22);
  }

  .has-studio-sidebar > .agent-product-sidebar.is-collapsed {
    width: 56px;
    box-shadow: none;
  }
}

/* module route（routes.tsx）的側欄沒有收合鈕，套不到上面的 rail 版型。
   若不保留原本的窄版水平導覽，214px 側欄會在窄螢幕持續擠壓內容
   （320px 視窗主區只剩約 106px，幾乎無法操作）。 */
@media (max-width: 767px) {
  .agent-product-shell:not(.has-studio-sidebar) {
    flex-direction: column;
  }

  .agent-product-shell:not(.has-studio-sidebar) > .agent-product-sidebar {
    width: 100%;
    min-height: auto;
    max-height: 42svh;
    flex-basis: auto;
  }

  .agent-product-shell:not(.has-studio-sidebar) .sidebar-brand,
  .agent-product-shell:not(.has-studio-sidebar) .sidebar-footer {
    padding: 10px 14px;
  }

  .agent-product-shell:not(.has-studio-sidebar) .sidebar-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 12px;
  }

  .agent-product-shell:not(.has-studio-sidebar) .sidebar-group-label,
  .agent-product-shell:not(.has-studio-sidebar) .sidebar-footer,
  .agent-product-shell:not(.has-studio-sidebar) .sidebar-nav button small {
    display: none;
  }

  .agent-product-shell:not(.has-studio-sidebar) .sidebar-nav button {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 10px;
  }
}

/* 表格列內操作按鈕統一比照 layout-spec §1 小型按鈕（6px 12px），不論
   .btn-primary/.btn-secondary/.btn-danger 哪個語意色都套用同一尺寸。 */
.table-action {
  padding: 6px 12px;
  font-size: 12px;
}

.tab-heading-row,
.service-summary,
.audit-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tab-heading-row h3,
.service-summary h4,
.empty-state h4 {
  margin-bottom: 6px;
}

.service-panel,
.form-panel,
.sync-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.service-summary,
.metric-card,
.empty-state {
  /* feat/design-1to1：v4 設計卡片系一律 8px（design:459-471,551 空狀態亦 8px；
     舊 12px 階為 v3 analysis.md 產物，已被 v4 取代）。 */
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 12px;
}

.empty-state p,
.service-summary pre {
  margin-bottom: 0;
  color: var(--c-text-secondary);
}

.service-summary pre,
.audit-row small {
  max-width: 100%;
  overflow: auto;
  color: var(--c-text-tertiary);
  font-size: 0.76rem;
}

.service-summary pre {
  max-width: 320px;
  max-height: 120px;
  border-radius: 8px;
  background: var(--c-surface-sunken);
  padding: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.form-grid label,
.stacked-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--c-text-secondary);
  font-size: 0.8rem;
  font-weight: 800;
}

.form-grid .full-width {
  grid-column: 1 / -1;
}

.form-grid input,
.form-grid textarea,
.stacked-label textarea {
  width: 100%;
  border: 1px solid var(--c-border-default);
  border-radius: 10px; /* design:58 .ap-input/.ap-select/.ap-textarea 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.form-grid textarea,
.stacked-label textarea {
  min-height: 92px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
}

.form-callout {
  margin: 4px 0;
}

/* RAG 知識庫「上傳文件」面板本次上傳清單（Redmine #15885 C-1）。 */
.upload-documents-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.upload-documents-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
  padding: 6px 10px;
  font-size: 0.8rem;
}

.upload-documents-list-name {
  overflow: hidden;
  color: var(--c-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.metric-card span,
.metric-card strong {
  display: block;
}

.metric-card span {
  color: var(--c-text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metric-card strong {
  margin-top: 4px;
  font-size: 1.1rem;
}

.empty-state {
  margin: 12px;
}

.settings-panel > .empty-state,
.tab-body > .empty-state,
.service-panel > .empty-state {
  margin: 0;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-row {
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  padding: 10px;
}

.audit-row.active {
  border-color: var(--c-accent);
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.audit-row strong,
.audit-row span,
.audit-row small {
  min-width: 0;
}

.repair-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.repair-callout.compact {
  margin: 8px 0;
  padding: 8px 10px;
}

.module-route-card {
  width: min(840px, 100%);
}

@media (max-width: 900px) {
  .form-grid,
  .tab-heading-row,
  .service-summary,
  .audit-row {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .service-summary pre {
    max-width: 100%;
  }
}

.telephony-settings {
  display: grid;
  gap: 14px;
  margin: 12px 0;
}

.telephony-settings-heading,
.setting-row,
.locale-strip {
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

/* feat/design-1to1：v4 卡片系一律 8px，heading/locale-strip 只保留 shadow 差異
   （before: 12px，#15449 第 6 刀舊 12px 階已被 v4 取代）。 */
.telephony-settings-heading,
.locale-strip {
  border-radius: 8px;
  box-shadow: var(--c-shadow-card);
}

.telephony-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.telephony-settings-heading h4,
.telephony-settings-heading p {
  margin-bottom: 0;
}

.setting-table {
  display: grid;
  gap: 8px;
}

.setting-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) 1.3fr;
  gap: 12px;
  padding: 10px 12px;
}

.setting-row span,
.message-key-grid span,
.metric-label {
  color: var(--c-text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
}

.setting-row strong {
  overflow-wrap: anywhere;
  color: var(--c-text-primary);
  font-size: 0.86rem;
}

.locale-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  /* #15449 第 6 刀：語系涵蓋量是正向指標，改用既有 success 語意 token 取代
     舊硬編碼淺綠（#ecfdf5 → --c-success-soft），對齊 badge 家族「soft 底＋
     實色字」語言，不新增硬編碼。 */
  background: var(--c-success-soft);
  padding: 12px;
}

.metric {
  display: block;
  color: var(--c-success);
  font-size: 1.7rem;
  font-weight: 850;
  line-height: 1;
}

.metric-label {
  display: block;
  margin-top: 4px;
  color: var(--c-success);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.pill {
  border: 1px solid var(--c-success);
  border-radius: 6px;
  background: var(--c-surface-card);
  color: var(--c-success);
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 800;
}

.pill.muted {
  border-color: var(--c-border-default);
  color: var(--c-text-secondary);
}

.message-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.message-key-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  padding: 10px;
}

.message-key-grid code {
  overflow-wrap: anywhere;
  color: #7c2d12;
  font-size: 0.8rem;
}

.readiness-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.readiness-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  padding: 9px 10px;
  font-size: 0.82rem;
}

.readiness-list span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 850;
}

.readiness-list .passed span {
  /* #15449 第 6 刀：checklist 通過/未通過改用既有 success/danger 語意 token，
     取代硬編碼綠/紅，對齊「sync 失敗＝danger 系」的誠實映射語言。 */
  background: var(--c-success-soft);
  color: var(--c-success);
}

.readiness-list .failed span {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

@media (max-width: 900px) {
  .telephony-settings-heading,
  .setting-row,
  .locale-strip,
  .message-key-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .pill-row {
    justify-content: flex-start;
  }
}

.module-route-sidebar {
  min-height: 100svh;
}

.module-route-main {
  display: flex;
  min-height: calc(100svh - 56px);
  flex-direction: column;
  padding: 24px;
}

.module-route-main .intent-router-admin-module {
  flex: 1;
}

/* ── @tbd/agent-config-panel（Redmine #15307 → 換色 #15449）───────────────
   包從 v0.4.0 起出編譯後 CSS（class 前綴 acp、變數 --acp-*），完全自給自足，
   宿主**不需要 Tailwind**。包的 --acp-color-* 全部指向語意 token --c-*（包的
   style.css 內建亮/暗兩組預設值），宿主只需覆寫品牌色掛鉤即可換主題。
   本檔在 bundle 中晚於包的 style.css 載入（RemoteApp 先 import 元件、後 import
   本檔），同為 :root 層級時後載者勝。

   #15449 換色第 1 刀（token 層，見 design/15449/Design Tokens.dc.html +
   design/15449/analysis.md C 節）：
   - accent 三件組由品牌紅改亮青藍。
   - --c-danger / --c-warning：ACP 套件 :root 預設值其實是「深色欄」數值（且
     .acp-dark 未覆寫，故淺深同值），這裡補淺色覆寫，讓亮色模式呈現值表的淺色欄。
   - 新增值表標「＋新增」的 10 個 --c-* 變數（ACP 套件裡完全不存在，非改名）。
   - 深色值統一掛在新建的 .ap-dark 容器 class（非 ACP 既有的 .acp-dark，兩者
     互不相依）——本刀只建立這個 hook，尚無任何畫面切換它，後續刀接上。 */
:root {
  /* accent：亮青藍定案。
     2026-08-09 色階收斂：strong 原是 #1e40af（靛藍）——hover 時色相從青藍跳到
     靛藍，互動中顏色「變種」而非「加深」，是精緻感的殺手。改為同色相降明度
     （#2AA6E8 → HSL 色相不動、L 降），soft 同理由靛藍調改回青藍調。 */
  --c-accent: #2aa6e8;
  --c-accent-strong: #1b87c4;
  --c-accent-soft: #e6f4fd;

  /* motion tokens：全站動效只允許用這三檔＋一條 easing（voiceflow 實測它全站
     一律 0.15s 只動 color/shadow/opacity/transform——克制就是質感）。
     手刻毫秒數一律視為技債。 */
  --motion-fast: 120ms;
  --motion-base: 160ms;
  --motion-slow: 220ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* 主按鈕 token（feat/design-1to1，design:37-38 .ap-btn-primary + renderVals()
     btnVars「deep」檔位）：bg = accent 混 42% 黑（#2AA6E8 → #186087）、
     hover = 混 55% 黑（#134B68）、字恆白 700。亮/暗主題同值（設計公式只吃
     accent + 黑，與 dark 無關），故 .ap-dark 不需覆寫。accent 本色（#2AA6E8）
     從此只用於 focus ring／選中態／eyebrow／active tab，不再當按鈕底色。 */
  --c-btn-bg: #186087;
  --c-btn-fg: #ffffff;
  --c-btn-border: #186087;
  --c-btn-bg-hover: #134b68;
  --c-btn-fg-hover: #ffffff;

  /* danger / warning：補淺色覆寫（ACP 預設值其實是深色欄，見上說明） */
  --c-danger: #dc2626;
  --c-warning: #b45309;

  /* ＋新增：表面
     2026-08-09 第二刀（中性盤重定調）：頁底從 #f5f6f8 加深為帶藍調的 #eef1f4——
     與純白卡片拉開兩階，卡片「浮」出來而不必加重陰影（voiceflow 手法）。 */
  --c-surface-page: #eef1f4;
  --c-surface-hover: #edf1f6;
  --c-surface-sunken: #e9edf2;

  /* ＋新增：邊框（帶藍調灰，與文字同一色溫） */
  --c-border-default: #d8dee7;
  --c-border-strong: #c2cad6;

  /* 文字：近黑 → 深海軍藍三階。純黑配白底對比生硬，帶藍調的深色
     讀起來柔和且與 accent 同色溫（voiceflow 用 #132144 同一思路）。 */
  --c-text-primary: #16233d;
  --c-text-secondary: #46536b;
  --c-text-tertiary: #8a94a6;

  /* ＋新增：文字 */
  --c-text-inverse: #ffffff;

  /* ＋新增：focus ring */
  --c-focus-ring: 0 0 0 3px rgba(42, 166, 232, 0.3);

  /* ＋新增：狀態語意（獨立於 accent，一律淡底深字） */
  --c-success: #059669;
  --c-success-soft: #dcf3e7;
  --c-warning-soft: #fcefd1;
  --c-danger-soft: #fce1e0;
  --c-info: #6d4ae0;
  --c-info-soft: #e9e4fb;
}

/* #15449 深色主題容器（新建，非 ACP 的 .acp-dark）：值表 dark 欄全量，
   keep／new 兩類 token 都在此列齊，確保掛上 .ap-dark 時不必依賴 .acp-dark
   也能拿到完整深色值。 */
.ap-dark {
  /* 表面 */
  --c-surface-card: #1b1e24;
  --c-surface-sunken: #20232a;
  --c-surface-page: #13151a;
  --c-surface-hover: #262a32;

  /* 邊框 */
  --c-border-default: #2c3038;
  --c-border-strong: #3c424c;

  /* 文字 */
  --c-text-primary: #edeff2;
  --c-text-secondary: #b4b9c2;
  --c-text-tertiary: #8a8f99;
  --c-text-muted: #6c7178;
  --c-text-placeholder: #565a62;
  --c-text-inverse: #13151a;

  /* accent（亮青藍，accent 本身深淺同值） */
  --c-accent: #2aa6e8;
  --c-accent-strong: #7fd0f5;
  --c-accent-soft: #123449;
  --c-focus-ring: 0 0 0 3px rgba(42, 166, 232, 0.4);

  /* 狀態語意 */
  --c-success: #34d399;
  --c-success-soft: #12271f;
  --c-warning: #fbbf24;
  --c-warning-soft: #2e2410;
  --c-danger: #f87171;
  --c-danger-soft: #301616;
  --c-info: #a594ff;
  --c-info-soft: #231c44;

  /* 元件 */
  --c-toggle-thumb: #edeff2;
  --c-shadow-card:
    0 1px 2px rgb(0 0 0 / 0.4),
    0 8px 24px -8px rgb(0 0 0 / 0.5);
}

/* 組裝層（AgentConfigFormCard）自己的排版：只影響宿主自刻的外框，不動包的內部樣式。

   #15449 第 4 刀（Config 編輯器重皮，design/15449/analysis.md D 節 #4）：
   - .agent-config-subsection 從「純上邊框分隔線」改成獨立 section card
     （border/radius/bg/shadow），語言對齊第 3 刀 AIBrainWorkspace.css 的
     卡片家族（.ai-brain-form-card 等：12px radius + --c-border-default +
     --c-surface-card + --c-shadow-card）。也套在「基本」metadata 區塊的
     fieldset 上（該區塊沒有獨立 <section> 包裹，見 AgentConfigFormCard.tsx
     的 agent-config-fieldset agent-config-subsection 雙 class），讓它比照
     其餘段落拿到同款卡片，對應設計 cfg-rail 的 sec-basic。
   - h6 段落標題把 --agent-text-muted 換成同義的 --c-text-secondary（兩者
     數值本來就相等，見 styles.css:11 對照註記，純所有權清理非換色）。
   - 新增 .agent-config-card 對「借用 .ai-brain-form-grid 的自刻輸入框」的
     scoped 覆寫：對齊 ACP（@tbd/agent-config-panel）ap-input 的
     focus-ring/placeholder/radius 視覺語言，不改 AIBrainWorkspace.css 本體
     （借用關係不動，該檔第 3 刀已 token 化，其餘 7 處引用維持現狀）。
   - Sticky save bar：.ai-brain-inline-actions 加 sticky bottom + 卡片視覺；
     行為不變，按鈕 onClick 邏輯完全沿用。危險動作色（danger）本卡片沒有
     套用對象——「從 Agent 重設」只是還原本地草稿欄位，不是刪除/破壞性操作。
   - cfg-rail（左側分段導覽）本刀不建：現有 code 是單欄堆疊卡片，沒有對應的
     rail nav 結構；新建需要 scroll-spy JS 或 hash 導覽，超出本刀「CSS
     declaration 為主、tsx 僅必要 className 微調」的範圍，記入回報取捨。 */
/* feat/design-fidelity-config（#15449 設計稿高忠實刀）：
   - 各 section 由通用 .agent-config-subsection 卡改為設計稿 config editor 的
     section card 結構（.cfg-card / .cfg-card-head / .cfg-card-body，出處
     design/15449/Agent Studio.dc.html:245-259 卡片 wrapper、:67 .cfg-sechead、
     :250-257 body padding）——radius 11px、--c-border-default 邊、
     --c-surface-card 白底、--c-shadow-card 陰影、head 13px 15px、
     body 0 15px 16px + grid gap 14px，全部照設計稿確切值。
   - 外層 .ai-brain-form-card.agent-config-card 卸下卡皮（transparent），
     section 卡直接浮在 config 區的 page 底（--c-surface-page）上，對齊設計
     cfg-grid form column（.dc.html:242 flex column gap:12px）——否則會出現
     卡中卡中卡三層嵌套，跟設計的「卡片浮在頁底」完全不同。
   - on/off 控件一律換設計稿 toggle（--c-toggle-thumb 滑塊、--c-accent 軌道、
     --c-border-strong 關閉軌道；.on 列 border/底色對齊 .ap-modcard.sel
     （.dc.html:49）與 .ap-toggle 的 token）。 */
.agent-config-card {
  display: flex;
  flex-direction: column;
  gap: 12px; /* design:242 form column gap:12px */
}

/* 卸卡皮：雙 class 特異性壓過 AIBrainWorkspace.css 的 .ai-brain-form-card
   （border/radius/bg/shadow/padding 全歸零，heading/儲存列樣式不受影響）。 */
.ai-brain-form-card.agent-config-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* config 分頁的 section-shell 換 page 底，讓白色 section 卡浮起來
   （對齊設計 .ap-root 亮色 --c-surface-page #F5F6F8 的頁面底）。 */
.ai-brain-workspace[data-ai-brain-section="config"] .ai-brain-section-shell {
  background: var(--c-surface-page);
}

.agent-config-fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

/* ── 設計稿 section card（design:299 sec wrapper 確切值）─────────────────── */
.cfg-card {
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* design:299,316,338 sec 卡 radius 8px（feat/design-1to1 由 11px 校正） */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  overflow: hidden;
}

/* design:67 .cfg-sechead：padding 13px 15px、flex space-between gap 10px */
.cfg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
}

/* design:247 標題 13.5px/700；<small> 400/tertiary（design:264） */
.cfg-card-title {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.cfg-card-title small {
  margin-left: 5px;
  font-weight: 400;
  color: var(--c-text-tertiary);
}

/* design:247 副標 11px/--c-text-muted/margin-top 1px */
.cfg-card-sub {
  margin-top: 1px;
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-muted);
}

/* design:251 body：padding 0 15px 16px + grid gap 14px（head 下緣即 13px 留白） */
.cfg-card-body {
  display: grid;
  gap: 14px;
  padding: 0 15px 16px;
}

/* design:248 chevron ▸：tertiary、開啟時轉 90deg、transition .3s（design:639） */
.cfg-card-chevron {
  color: var(--c-text-tertiary);
  transition: transform var(--motion-slow) var(--motion-ease);
}

/* ── 循序分段揭露（progressive disclosure）─────────────────────────────────
   客戶自助流程：一段一步，填完/按下一步才顯示下一段。新段落出現時淡入 + 上滑，
   讓推進有「絲滑」感。純 UI 動畫，不影響任何資料流。 */
.agent-config-step-reveal {
  animation: agent-config-step-in 0.28s ease both;
}

@keyframes agent-config-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-config-step-reveal {
    animation: none;
  }

  /* 側欄收合的 width／flex-basis 過場也要跟著停用。 */
  .agent-product-sidebar {
    transition: none;
  }

  /* 收合後的 tooltip 淡入與水平位移同理停用（選擇器需與原規則同特異性才蓋得掉）。 */
  .agent-product-sidebar.is-collapsed
    .sidebar-nav
    button[data-sidebar-tooltip]::after {
    transition: none;
  }
}

/* 段落標題前的步驟編號徽章（1/2/3） */
.agent-config-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* 每段底部的「下一步」推進列 */
.agent-config-step-next {
  display: flex;
  justify-content: flex-end;
}

/* 進階 metadata 收合區：summary 即 .cfg-card-head（設計 cfg-sechead 可點擊
   收合的樣式，design:67 cursor:pointer），chevron 開啟轉 90deg。 */
.agent-config-basic-details > summary {
  cursor: pointer;
  list-style: none;
}

.agent-config-basic-details > summary::-webkit-details-marker {
  display: none;
}

.agent-config-basic-details[open] .cfg-card-chevron {
  transform: rotate(90deg);
}

/* section 內的說明文字（#15560：RAG 回答 LLM 覆寫說明等） */
.agent-config-section-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-text-tertiary);
}

.voxcpm-generation-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-page);
  padding: 12px;
}

.voxcpm-generation-panel h6 {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

.voxcpm-generation-panel > div > p {
  margin: 3px 0 0;
  color: var(--c-text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.voxcpm-generation-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voxcpm-generation-grid label {
  min-width: 0;
  white-space: normal;
}

.voxcpm-generation-grid input {
  max-width: 100%;
}

.voxcpm-generation-grid label small {
  display: block;
  margin-top: 5px;
  color: var(--c-text-tertiary);
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.voxcpm-generation-grid input[aria-invalid="true"] {
  border-color: var(--c-danger);
}

.voxcpm-generation-grid label small.voxcpm-generation-error {
  color: var(--c-danger);
}

@media (max-width: 720px) {
  .voxcpm-generation-grid {
    grid-template-columns: 1fr;
  }
}

/* 自刻表單控件對齊 ACP 視覺語言（ap-input/select/textarea 的 focus-ring）。
   Scope 在 .agent-config-card 底下，只影響 config 編輯器內借用的
   .ai-brain-form-grid 輸入框，不動 AIBrainWorkspace.css 本體其餘引用點。 */
.agent-config-card .ai-brain-form-grid input,
.agent-config-card .ai-brain-form-grid select,
.agent-config-card .ai-brain-form-grid textarea {
  border-radius: 10px; /* design:58 .ap-input 10px（feat/design-1to1 由 7px 校正） */
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.agent-config-card .ai-brain-form-grid input::placeholder,
.agent-config-card .ai-brain-form-grid textarea::placeholder {
  color: var(--c-text-placeholder);
}

.agent-config-card .ai-brain-form-grid input:focus,
.agent-config-card .ai-brain-form-grid select:focus,
.agent-config-card .ai-brain-form-grid textarea:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: var(--c-focus-ring);
}

/* ── 設計稿 toggle（好看的開關）──────────────────────────────────────────
   設計稿 toggle token：--c-toggle-thumb 滑塊（亮 #FFF／暗 #EDEFF2，值表
   design/15449/Design Tokens.dc.html「元件 Component」節）；軌道 on=--c-accent、
   off=--c-border-strong。尺寸與 dev 既有 .module-switch（40×22/18px dot）統一。
   結構：<label.cfg-toggle-field><input type=checkbox/><span.cfg-toggle-name/>
   <span.cfg-toggle><span.cfg-toggle-thumb/></span></label>——input 隱藏、
   :checked ~ 驅動軌道與滑塊，focus-visible 掛 --c-focus-ring。 */
.cfg-toggle-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--c-border-default);
  border-radius: 10px; /* design:78 .ap-togglerow radius 10px（feat/design-1to1 由 7px 校正） */
  background: var(--c-surface-card);
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}

/* hover 對齊 .ap-modcard:hover（design:48）：accent 邊 */
.cfg-toggle-field:hover {
  border-color: var(--c-accent);
}

/* 選中列對齊 .ap-modcard.sel（design:49）：accent 邊 + accent-soft 底 */
.cfg-toggle-field.on {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-text-primary);
}

.cfg-toggle-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.cfg-toggle-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cfg-toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: background-color var(--motion-base) var(--motion-ease);
}

.cfg-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-toggle-thumb);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.25);
  transition: transform var(--motion-base) var(--motion-ease);
}

.cfg-toggle-field input:checked ~ .cfg-toggle {
  background: var(--c-accent);
}

.cfg-toggle-field input:checked ~ .cfg-toggle .cfg-toggle-thumb {
  transform: translateX(18px);
}

.cfg-toggle-field input:focus-visible ~ .cfg-toggle {
  box-shadow: var(--c-focus-ring);
}

/* 啟用的服務 toggle 列：自動換行網格（取代原 .service-checkbox 純 checkbox） */
.cfg-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

/* 設計稿 .ap-label（design:56-57）：12px/600/--c-text-secondary。
   scope 在 config 編輯器內，蓋掉 .ai-brain-form-grid label 的 0.78rem/750。 */
.agent-config-card .ai-brain-form-grid label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-secondary);
}

.agent-config-scenario-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.agent-config-scenario-field .agent-config-section-hint {
  display: block;
  margin-top: 6px;
}

/* Sticky save bar：對齊設計 sticky 儲存列（design:406 radius 8px、
   padding 12px 14px、上拋陰影 0 -2px 10px）；行為不變——按鈕 onClick 邏輯
   完全沿用，只換外框樣式。 */
.agent-config-card .ai-brain-inline-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  border: 1px solid var(--c-border-default);
  border-radius: 8px; /* feat/design-1to1 由 11px 校正 */
  background: var(--c-surface-card);
  box-shadow: 0 -2px 10px rgb(0 0 0 / 0.06);
  padding: 12px 14px;
}

/* Redmine #15455 第 2 步：登入頁 one-off 保留區塊。
   雙層 radial + linear gradient 背景無法用單一 utility 表達（Tailwind 的
   arbitrary bg-[...] 語法要把逗號/空白轉底線，可讀性太差），保留手寫 CSS，
   selector 沿用原名；layout（grid/min-height/place-items/padding）已改寫成
   App.tsx 的 am: utility。 */
.standalone-login-page {
  background:
    radial-gradient(circle at 20% 20%, rgba(198, 40, 40, 0.16), transparent 32%),
    linear-gradient(135deg, #fff, #f5f5f5 48%, #fff8f8);
}

/* .primary-button 仍被 intent-router/flow-designer 的 ImportExportPanel.tsx 與
   FlowJSONPreview.tsx 使用（見該二檔 className="primary-button"），定義保留；
   登入頁自己的 submit button 已改寫成 am: utility，不再吃這個 class。 */
.primary-button {
  cursor: pointer;
  border-radius: 10px;
  font-weight: 800;
  background: var(--c-btn-bg); /* feat/design-1to1：主按鈕 token（design:37） */
  color: var(--c-btn-fg);
  padding: 12px 16px;
}

.primary-button:hover:not(:disabled) {
  background: var(--c-btn-bg-hover);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.68;
}
/* toolbar / remote-frame 的視覺由 PR #50 重新設計（sticky 全寬頂欄），
   #15455 登入頁遷移刀刻意不動它們，沿用手寫定義；LoginPage 其餘樣式
   （card/form/copy/error/session-summary 與 secondary/text-button）已遷移
   為 App.tsx 的 am: utility，定義自本檔移除。 */
.standalone-remote-frame {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* dev 免登入身分改成先打 /projects 才組得出 session（#17791），開場的等待狀態。 */
.standalone-bootstrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  font-size: 0.875rem;
  opacity: 0.68;
}

/* 黑色頂列已退場（2026-08-10 裁示）。右上帳號改浮動圓頭貼；
   內容欄（側欄除外）上方保留一條透明空帶，避免頭貼壓到內容卡
   （仿 voiceflow：有距離、但不做不同底色的 bar）。 */
.session-avatar-anchor {
  position: fixed;
  z-index: 120;
  top: 9px;
  right: 16px;
}

.standalone-remote-frame .agent-product-shell > :not(.agent-product-sidebar) {
  padding-top: 58px;
}

.session-avatar {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px; /* 正圓（使用者裁示） */
  background: var(--c-accent);
  box-shadow: 0 4px 14px rgb(22 24 29 / 0.35);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.session-avatar:hover,
.session-avatar[aria-expanded="true"] {
  border-color: var(--c-accent);
}

.topbar-user {
  position: relative;
  display: flex;
}

.session-user-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  right: 0;
  min-width: 248px;
  padding: 6px;
  color: var(--c-text-primary);
  font-size: 13.5px;
}

/* 帳號區：名稱＋所屬專案兩行（仿 voiceflow 帳號選單頭） */
.session-user-head {
  display: grid;
  gap: 3px;
  padding: 12px 12px 13px;
  border-bottom: 1px solid var(--c-border-default);
  margin-bottom: 6px;
}

.session-user-head strong {
  font-size: 14px;
  font-weight: 650;
}

.session-user-head span {
  color: var(--c-text-secondary);
  font-size: 12.5px;
}

.session-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-primary);
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.session-menu-item svg {
  flex: none;
  color: var(--c-text-tertiary);
}

.session-menu-item:hover {
  background: var(--c-surface-hover);
}

/* ── RAG 綁定頁知識庫 checkbox picker（#15560）───────────────────────────── */
.rag-dataset-roster {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  padding: 8px;
}

.rag-dataset-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.rag-dataset-option:hover {
  background: var(--c-surface-sunken);
}

.rag-dataset-option input[type="checkbox"] {
  flex: none;
  width: auto;
}

.rag-dataset-option-name {
  color: var(--c-text-primary);
  font-weight: 500;
}

.rag-dataset-option-id {
  color: var(--c-text-tertiary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rag-dataset-roster-hint {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-tertiary);
  font-weight: 400;
}

.rag-dataset-roster-error {
  margin: 0;
  font-size: 12px;
  color: var(--agent-error-text);
}

.rag-dataset-unknown {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rag-dataset-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rag-dataset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-border-default);
  border-radius: 999px;
  background: var(--c-surface-sunken);
  padding: 3px 6px 3px 10px;
  font-size: 11px;
  color: var(--c-text-secondary);
}

.rag-dataset-chip code {
  font-size: 11px;
}

.rag-dataset-chip button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--c-text-tertiary);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.rag-dataset-chip button:hover {
  background: var(--agent-error-bg);
  color: var(--agent-error-text);
}

/* 「啟用的服務」已改用 .cfg-toggle-field 設計稿 toggle 列
   （feat/design-fidelity-config），原 .service-checkbox* 定義移除。 */

/* 能力模組計數徽章與開關軌道/滑塊——供 SetupStepIntent（cap-row toggle 列）
   與 SetupStepKnowledge 使用；軌道/滑塊吃 --c-border-strong / --c-accent /
   --c-toggle-thumb token，與 .cfg-toggle 統一。 */
.module-count-badge {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--agent-primary);
  background: var(--agent-primary-light, #e6f4fd);
  padding: 3px 10px;
  border-radius: 999px;
}
.module-switch {
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--c-border-strong);
  position: relative;
  transition: background-color var(--motion-base) var(--motion-ease);
}
/* 兩個呼叫端（DatasetIngestCard、SetupModulePanel）寫的都是 is-on，
   這裡原本只認 .on——開關的底色與圓點位移都沒生效。 */
.module-switch.is-on {
  background: var(--c-accent);
}
.module-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-toggle-thumb);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.25);
  transition: transform var(--motion-base) var(--motion-ease);
}
.module-switch.is-on .module-switch-dot {
  transform: translateX(18px);
}

/* ============================================================
   #15449 首頁（Build Assistant hero + 我的樣板）
   出處 design/15449/Agent Studio.dc.html:
   - :87-92 home-chip / home-iconbtn / home-tpl 原子字面值
   - :182-234 isHome 版面 inline 字面值（padding/max-width/字級全數照抄）
   hero 與 chatbox 的深底色（#0E1013/#15181C/#2C313A…）是設計固定色，
   不隨亮暗主題切換（設計稿 isHome 區塊亮暗模式同值）。
   ============================================================ */
.home-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px; /* 檐溝收窄（原 design:182 的 28px，2026-08-10 隨滿版裁示同步） */
}

.home-inner {
  /* 滿版（2026-08-10 使用者裁示）：解除 940px 置中鎖，寬度交給 .home-main
     的 28px 檐溝。 */
  max-width: none;

  /* 區塊間距（2026-08-14 young：「都黏在一起 沒有間距」）
     原本是 display:block 且各區塊 margin 為 0，改版後三個新區塊完全零間距貼死。
     改用 flex column + gap 統一管理，不再靠各區塊自己加 margin——那正是
     間距失控的來源（誰都不知道該由誰負責）。
     設計稿是 hero→16→就緒卡→30→最近 Agent→30→雙欄，取 28px 作為單一節奏；
     hero 之後那塊較緊，用 :nth-child(2) 收回 16px。 */
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home-inner > :nth-child(2) {
  margin-top: -12px; /* 28 - 12 = 16px，對齊稿上 hero 與就緒卡之間的較緊間距 */
}

/* 樣板區原本自帶 26px margin-top，現在間距由父層 gap 統一負責，收掉避免疊加 */
.home-inner > .home-templates {
  margin-top: 0;
}

.home-hero {
  border: 1px solid #24282f; /* design:184 */
  border-radius: 12px; /* 大區塊 12px（design:184） */
  background: #0e1013;
  padding: 42px 36px 30px;
}

.home-hero-center {
  max-width: 680px; /* design:185 */
  margin: 0 auto;
  text-align: center;
}

.home-eyebrow {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; /* design --mono */
  font-size: 10.5px; /* design:186 */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent); /* accent 用於 eyebrow（key 值表） */
}

.home-title {
  margin: 10px 0 22px; /* design:187 */
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f2f4f6;
}

.home-chatbox {
  text-align: left; /* design:188 */
  border: 1px solid #2c313a;
  border-radius: 12px;
  background: #15181c;
  padding: 14px 15px;
}

.home-chatbox textarea {
  width: 100%; /* design:189 */
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  color: #e8eaed;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.home-chatbox textarea::placeholder {
  color: #565a62; /* dark --c-text-placeholder（design:28） */
}

.home-chatbox-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px; /* design:190 */
}

.home-chatbox-actions .home-start {
  margin-left: auto;
  padding: 8px 14px; /* design:193 */
}



/* 通道選中態（設計未定義 on 態；沿用「accent 用於選中態」的 key 規則） */

.home-suggestions {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
}

.home-suggestions > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #2c313a;
  border-radius: 10px;
  color: #c7cbd1;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.home-suggestions > summary::-webkit-details-marker {
  display: none;
}

.home-suggestions > summary:hover {
  background: rgb(255 255 255 / 0.06);
  color: #f2f4f6;
  border-color: #3a404a;
}

.home-suggestions-chevron {
  display: inline-block;
  font-size: 11px;
  transition: transform var(--motion-base) var(--motion-ease);
}

.home-suggestions[open] .home-suggestions-chevron {
  transform: rotate(180deg);
}

.home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}

.home-chip {
  padding: 6px 13px; /* design:87 */
  border: 1px solid #2c313a;
  border-radius: 10px;
  background: transparent;
  color: #c7cbd1;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.home-chip:hover {
  background: rgb(255 255 255 / 0.06); /* design:88 */
  color: #f2f4f6;
  border-color: #3a404a;
}

.home-tenant-context {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
  padding: 4px 2px;
  /* 頁首帶不再做白卡（2026-08-10 裁示：頁面開頭不要白色背景） */
}

.home-tenant-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.home-tenant-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.home-tenant-label {
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 600;
}

/* 設計註記 1「UUID 不當標題」：租戶名升為這頁最大的字，UUID 降為可複製標籤。
   （設計稿 `租戶與專案綁定.dc.html` 頁首 19px/800） */
.home-tenant-copy strong {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-tenant-ids {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.home-tenant-note {
  max-width: 640px;
  margin: 7px 0 0;
  color: var(--c-text-muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.home-tenant-reload {
  flex: none;
  margin-left: auto;
}

/* 可複製的 ID 標籤。頁首與租戶列共用同一顆——同一種東西只有一種長相。 */
.home-idchip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  height: 24px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--c-border-default);
  border-radius: 6px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.home-idchip:hover {
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}

.home-idchip:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

.home-idchip b {
  flex: none;
  color: var(--c-text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.home-idchip-value {
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-idchip svg {
  flex: none;
  color: var(--c-text-tertiary);
}

/* 複製失敗（例如非 secure context 又沒有 execCommand）：說出來，並讓值可以
   自己框選——安靜失敗會讓人以為複製成功了。 */
.home-idchip.is-failed {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.home-idchip.is-failed svg { color: var(--c-danger); }
/* 失敗態不是按鈕（見 CopyIdChip 註解）：完整值要能被框選，游標也不該是 pointer。 */
/* 失敗態允許完整 ID 換行，高度就不能再固定在 24px——窄卡片上多行文字會溢出
   蓋到旁邊的內容。 */
.home-idchip.is-failed {
  height: auto;
  min-height: 24px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: default;
  user-select: text;
}

.home-idchip.is-failed .home-idchip-value {
  overflow: visible;
  cursor: text;
  user-select: all;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 只給螢幕閱讀器的即時通知（複製成功時說「已複製」）。 */
.home-idchip-live {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 重試鈕：失敗態裡唯一還能按的東西。 */
.home-idchip-retry {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-danger);
  cursor: pointer;
}

.home-idchip-retry:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

/* 專案沒帶 tenantId 時的占位：長得像標籤但不可按，因為沒有 id 可以複製。 */
.home-idchip.is-placeholder {
  cursor: default;
  color: var(--c-text-muted);
}

/* #17791 跨租戶總覽：沿用 home-tenant-context 的卡片語彙（同樣的邊框／圓角／
   sunken 底色），只在租戶分組上多一層縮排，避免另立一套視覺。 */
.home-tenant-overview {
  margin-top: 12px;
  /* 大容器卡退場（頁首白帶很醜）；租戶子卡改白底承擔對比 */
}

.home-tenant-overview-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-tenant-overview-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.home-tenant-overview-head span {
  color: var(--c-text-secondary);
  font-size: 11px;
}

.home-tenant-overview-list,
.home-tenant-overview-list ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-tenant-overview-list {
  gap: 10px;
}

/* overflow:hidden 讓滿版的綁定表格跟著卡片收圓角。 */
.home-tenant-overview-list > li {
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

/* 目前租戶的選中表現（2026-08-14 young：整圈藍框太醜，換一種）
   改用「左緣 accent 條」——理由是這已經是本專案既有的選中語彙：
     · sidebar 選中項  .ui-navitem.is-on  → inset 2px 0 0 accent
     · 語音選項        .voice-opt.is-active → inset 2px 0 0 accent
   統一到同一種表達，使用者只要學一次「左邊那條藍線＝現在在這裡」。
   整圈外框的問題是它把「選中」畫成「一個框」，跟卡片本身的邊界競爭，
   卡片一多就整片都是框；左緣條只佔 3px、不參與邊界，安靜很多。
   邊框維持中性灰，不隨選中改變。 */
.home-tenant-overview-list > li.is-current {
  box-shadow:
    var(--c-shadow-card),
    inset 3px 0 0 var(--c-accent);
}

.home-tenant-overview-tenant {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
  color: var(--c-text-secondary);
}

/* flex:none ＋ 卡片的 overflow:hidden 會讓沒有斷點的長租戶名直接被裁掉。
   允許縮小並在必要時斷字——寧可折行也不要被切掉一半。 */
.home-tenant-overview-tenant strong {
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
  color: var(--c-text-primary);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.home-tenant-overview-tenant > svg { flex: none; }

/* 目前租戶標記：設計稿用的是 soft 底＋accent 字（不是實心 accent）——
   它是「你在這裡」的說明，不是要被按的東西。 */
.home-tenant-current {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 10.5px;
  font-weight: 700;
}

.home-tenant-toggle { margin-left: -4px; }

/* 設計註記 4「每個租戶一條進度條」：原本只有「7 個 Agent」，看不出其中
   幾隻真的能接電話。已就緒／待處理／未綁定 三段比例＋文字。 */
.home-tenant-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.home-tenant-bar {
  display: flex;
  width: 104px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-surface-sunken);
}

.home-tenant-bar > span { flex-grow: 0; flex-shrink: 0; }
.home-tenant-bar > .is-ready { background: var(--c-success); }
.home-tenant-bar > .is-attention { background: var(--c-warning); }
.home-tenant-bar > .is-unbound { background: var(--c-border-strong); }

.home-tenant-meter-skel {
  width: 104px;
  height: 5px;
  border-radius: 999px;
}

.home-tenant-meter-text {
  color: var(--c-text-secondary);
  font-size: 11.5px;
}

.home-tenant-meter-text.is-danger { color: var(--c-danger); }

/* 列尾 chevron：常駐淡色標出「這一列可以點」，hover 加深。
   （通話紀錄表 .tc-row 也在用這顆，別跟著總覽一起刪） */
.home-row-chev {
  flex: none;
  margin-left: auto;
  color: var(--c-text-tertiary);
  transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}

/* ─── 租戶 → Agent → TeleAgent 專案 對照表 ────────────────────────────────
   設計稿 SoT：Claude Design `租戶與專案綁定.dc.html`（2026-08-12 匯入）。
   設計註記 6「表格化，不再是純清單」：固定欄寬讓眼睛沿著一條線往下掃 Agent
   名稱與它綁的專案。欄序＝Agent（Agent Studio）→ 箭頭 → 專案（TeleAgent
   Admin）→ 狀態 → 展開。 */
.home-bind-table {
  /* 表格滿版貼齊租戶卡的邊；卡片自己有 overflow:hidden 收圓角。 */
  margin: 8px -12px -10px;
}

.home-bind-cols,
.home-bind-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 18px minmax(0, 1.15fr) 92px 24px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
}

.home-bind-cols {
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-bind-row {
  border-top: 1px solid var(--c-border-default);
  transition: background var(--motion-fast) var(--motion-ease);
}

.home-bind-row:hover { background: var(--c-surface-hover); }
.home-bind-row.is-skel:hover { background: transparent; }

.home-bind-c1,
.home-bind-c2 { min-width: 0; }

.home-bind-c3 {
  display: flex;
  min-width: 0;
}

/* 欄名在窄畫面才需要跟著每一格走（見本檔底部的 900px 斷點）。 */
.home-bind-lbl { display: none; }

.home-bind-name {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--motion-ease);
}

.home-bind-name:hover { color: var(--c-accent); text-decoration: underline; }
.home-bind-name:focus-visible { outline: none; box-shadow: var(--c-focus-ring); }

.home-bind-meta {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-bind-arrow { color: var(--c-border-strong); }

.home-bind-target {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.home-bind-target.is-danger {
  color: var(--c-danger);
  font-size: 11.5px;
}

/* 「不知道」的列：比未綁定更安靜，但不是空白。 */
.home-bind-target.is-muted .home-bind-target-name { color: var(--c-text-muted); }

.home-bind-target-name {
  overflow: hidden;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-bind-target-meta {
  overflow: hidden;
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 設計註記 3「未綁定從死路變成入口」：缺什麼就在缺的位置補入口。
   虛線框＝「這格還是空的」，與 --secondary 的實線框區隔。 */
.home-bind-cta {
  max-width: 100%;
  border-style: dashed;
  border-color: var(--c-border-strong);
  color: var(--c-accent);
}

.home-bind-cta:hover { border-color: var(--c-accent); }

.home-bind-cell-skel { height: 12px; }

.home-bind-more svg,
.home-tenant-toggle svg {
  transition: transform var(--motion-base) var(--motion-ease);
}

.home-bind-more svg.is-open,
.home-tenant-toggle svg.is-open { transform: rotate(90deg); }

/* 設計註記 5「狀態要附上原因」：展開列說明卡在哪一步，再給對應動作。 */
.home-bind-detail {
  padding: 12px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

.home-bind-detail-plain {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 11.5px;
}

.home-bind-reason {
  padding: 10px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-surface-card);
}

.home-bind-reason.is-warn {
  border-color: var(--c-warning);
  background: var(--c-warning-soft);
}

.home-bind-reason.is-danger {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
}

.home-bind-reason.is-info {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.home-bind-reason strong {
  display: block;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

/* list-style 明寫：全站 reset 把 ul 的項目符號關掉了，但這裡是「有幾條原因」
   的清單，沒有符號會讀成一段連續的話。 */
.home-bind-reason ul {
  margin: 5px 0 0;
  padding-left: 17px;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  line-height: 1.7;
  list-style: disc outside;
}

.home-bind-reason li { margin: 0; }

.home-bind-reason-action {
  margin: 6px 0 0;
  color: var(--c-text-primary);
  font-size: 11.5px;
  font-weight: 600;
}

.home-bind-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

/* 設計註記 7：ID 與技術欄位預設收起，等寬字排版，明示是給工程師對照用的。 */
.home-bind-tech { margin-top: 10px; }

.home-bind-tech > summary {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  margin-left: -6px;
  padding: 3px 6px;
  border-radius: 7px;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.home-bind-tech > summary::-webkit-details-marker { display: none; }

.home-bind-tech > summary:hover {
  background: var(--c-surface-hover);
  color: var(--c-text-secondary);
}

.home-bind-tech > summary svg { transition: transform var(--motion-base) var(--motion-ease); }
.home-bind-tech[open] > summary svg { transform: rotate(90deg); }

.home-bind-tech dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 18px;
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
}

.home-bind-tech dt {
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-bind-tech dd {
  margin: 2px 0 0;
  color: var(--c-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  word-break: break-all;
}

/* 整份對照表的說明，放在清單下方講一次。 */
.home-bind-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.home-bind-notice {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid var(--c-border-default);
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.home-bind-notice.is-danger { color: var(--c-danger); }

/* 綁定端點掛掉時的整區說明。Agent 清單本身仍可用，所以這是一條 alert，
   不是把整區換掉——「讀不到綁定」與「沒有 Agent」是兩回事。 */
.home-bind-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 11px 12px;
  border: 1px solid var(--c-danger);
  border-radius: 10px;
  background: var(--c-danger-soft);
  color: var(--c-text-secondary);
  font-size: 11.5px;
}

.home-bind-alert > svg {
  flex: none;
  margin-top: 1px;
  color: var(--c-danger);
}

.home-bind-alert > div {
  min-width: 0;
  flex: 1;
}

.home-bind-alert strong {
  color: var(--c-danger);
  font-size: 12.5px;
}

.home-bind-alert p {
  margin: 3px 0 0;
  line-height: 1.6;
}

.home-bind-alert code {
  display: block;
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  word-break: break-all;
}

.home-bind-alert > .ui-btn { flex: none; }

/* 狀態 chip：語意色（state 值來自 fs-admin readiness 契約） */
.home-binding-status {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--c-surface-card);
  border: 1px solid var(--c-border-default);
  color: var(--c-text-secondary);
}

.home-binding-status.is-ready {
  background: var(--c-success-soft);
  border-color: transparent;
  color: var(--c-success);
}

.home-binding-status.is-syncing {
  background: var(--c-accent-soft, #e6f4fd);
  border-color: transparent;
  color: var(--c-accent);
}

.home-binding-status.is-action_required {
  background: var(--c-warning-soft);
  border-color: transparent;
  color: var(--c-warning);
}

.home-binding-status.is-failed {
  background: var(--c-danger-soft);
  border-color: transparent;
  color: var(--c-danger);
}

/* effectiveItemState 還會產出這四個值。沒有明寫的話它們會一起退回中性 pill，
   語意色就跟展開列與 TeleAgent 面板對不上。對應關係與面板的 readinessTone 一致：
   unknown → warning、disabled / pending-delete → muted、unbound → 中性。 */
.home-binding-status.is-unknown {
  background: var(--c-warning-soft);
  border-color: transparent;
  color: var(--c-warning);
}

.home-binding-status.is-disabled,
.home-binding-status.is-pending-delete {
  background: var(--c-surface-sunken);
  border-color: transparent;
  color: var(--c-text-tertiary);
}

/* 未綁定刻意維持中性（設計稿的 unbound pill 就是 sunken 底＋灰字）：
   它不是「出事了」，是「還沒開始」。 */
.home-binding-status.is-unbound {
  background: var(--c-surface-sunken);
  border-color: transparent;
  color: var(--c-text-tertiary);
}

/* 專案名是這一列的重點（取代原本零資訊量的「預設專案」），給它足夠的截斷空間
   而不是讓分機號把它擠掉。 */
.home-agent-binding-project {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-tenant-overview-note {
  margin: 8px 0 0;
  color: var(--c-warning);
  font-size: 11px;
}

.home-templates {
  margin-top: 26px; /* design:204 */
}

.home-templates-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px; /* design:205 */
}

.home-templates-head h2 {
  margin: 2px 0 0; /* design:208 */
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.home-templates-hint {
  font-size: 12px;
  color: var(--c-text-muted);
}

.home-empty-state {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
}

.home-empty-state strong {
  display: block;
  color: var(--c-text-primary);
  font-size: 13.5px;
}

.home-empty-state p {
  margin: 4px 0 0;
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .home-tenant-context {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* 名稱在窄畫面允許折行——19px 的租戶名截斷成「BindAgent 測…」等於沒說。 */
  .home-tenant-copy strong {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .home-tenant-reload {
    width: 100%;
    margin-left: 42px;
  }
}

.home-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); /* design:211 */
  gap: 12px;
}

.home-tpl-new {
  min-height: 118px; /* design:212 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--c-border-strong);
  border-radius: 8px; /* 卡片 8px（design:212） */
  background: transparent;
  cursor: pointer;
  color: var(--c-accent);
  font-family: inherit;
}

.home-tpl-plus {
  font-size: 26px; /* design:213 */
  line-height: 1;
  font-weight: 300;
}

.home-tpl-new-label {
  font-size: 13px; /* design:214 */
  font-weight: 700;
}

.home-tpl {
  border: 1px solid var(--c-border-default); /* design:91 */
  border-radius: 8px; /* 卡片 8px */
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  font-family: inherit;
}

.home-tpl:hover {
  border-color: var(--c-accent); /* design:92 */
  box-shadow: var(--c-focus-ring);
}

.home-tpl-head {
  display: flex;
  align-items: flex-start;
  gap: 11px; /* design:218 */
}

.home-tpl-avatar {
  width: 34px; /* design:1189 avatarStyle 字面值 */
  height: 34px;
  border-radius: 4px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}

.home-tpl-main {
  min-width: 0;
  flex: 1;
  display: block;
}

.home-tpl-name {
  display: block;
  font-size: 13.5px; /* design:221 */
  font-weight: 700;
  color: var(--c-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-tpl-desc {
  font-size: 11px; /* design:222 */
  color: var(--c-text-muted);
  margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* badge 尺寸沿用 .ap-badge 規格（design:35）；顏色照 design:1002 statusMeta：
   draft/archived 中性淡底（基底）、active success、needs-validation warning */
.home-tpl-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 6px; /* badge 6px */
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}

.home-tpl-badge.status-active {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.home-tpl-badge.status-needs-validation {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.home-tpl-actions {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
}

.home-tpl-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}

.home-tpl-action:hover,
.home-tpl-action:focus-visible {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}

.home-tpl-menu {
  position: relative;
}

.home-tpl-menu > summary {
  list-style: none;
}

.home-tpl-menu > summary::-webkit-details-marker {
  display: none;
}

.home-tpl-menu-popover {
  /* 外觀歸 .ui-menu，這裡只留定位與尺寸 */
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  min-width: 130px;
  padding: 5px;
}

.home-tpl-menu-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: transparent;
  color: var(--c-danger);
  cursor: pointer;
  text-align: left;
}

.home-tpl-menu-popover button:hover,
.home-tpl-menu-popover button:focus-visible {
  background: var(--c-danger-soft);
}

.home-tpl-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap; /* design:226 */
}

/* tag 沿用 .ap-tag 規格（design:36） */
.home-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px; /* tag 8px */
  font-size: 11px;
  font-weight: 500;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  border: 1px solid var(--c-border-default);
}

/* ============================================================
   建立 Agent 彈窗（CreateAgentModal）：設計佈局照
   design/15449/建立 Agent.dc.html（header 16px 26px＋body 24px 26px、
   內容 max-width 1000、區塊 gap 22px）；視覺 token 走本檔 v4 系統
   （大容器 12px／卡 8px／badge 6px，主按鈕 --c-btn-bg），不取設計檔
   內嵌的舊 ca- token（radius 4px、#1D5ACC）。
   ============================================================ */
.create-modal-overlay {
  animation: ui-overlay-fade var(--motion-base) var(--motion-ease);
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(16 24 40 / 0.5);
}

.create-modal {
  animation: ui-modal-pop var(--motion-slow) var(--motion-ease);
  display: flex;
  width: min(1000px, 100%);
  max-height: min(760px, 100%);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--agent-border);
  border-radius: 12px; /* 殼層大區塊階 */
  background: var(--agent-page);
  box-shadow: 0 24px 64px rgb(16 24 40 / 0.32);
}

.create-modal-header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--agent-border);
  background: var(--agent-surface);
}

.create-modal-header h2 {
  margin: 3px 0;
  font-size: 1.19rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.create-modal-title-meta {
  color: var(--agent-text-soft);
  font-size: 0.75rem;
  font-weight: 400;
}

.create-modal-desc {
  max-width: 620px;
  margin: 0;
  color: var(--agent-text-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}

.create-modal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px 26px;
}

/* ── design v5 頂 bar（per-agent header，design .dc.html:179-194）──────────
   ‹ 首頁 返回鈕｜分隔線｜avatar＋agent 名稱＋狀態 badge＋專案/來源 mono 小字｜
   右側 設定精靈 + Run 試打。覆寫舊 topbar 的雙欄 flex-start 版型為單列置中。 */
.agent-admin-topbar.v5-topbar {
  min-height: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  padding: 12px 24px;
}



.ui-btn--outline span {
  font-size: 13px;
  line-height: 1;
}

.topbar-divider {
  width: 1px;
  height: 26px;
  flex: none;
  background: var(--c-border-default);
}

.topbar-avatar {
  display: flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-btn-bg);
  font-size: 14px;
  font-weight: 800;
}

.topbar-agent {
  min-width: 0;
}

.topbar-agent-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-agent-name strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-agent-sub {
  margin: 2px 0 0;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

.topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── design v5 SETUP WIZARD stepper（design .dc.html:663-830 isWizard）─────
   四步：意圖樣板→知識庫→意圖設定→測試對話。目前步 accent 實心、已完成綠底
   打勾、未到灰框；節點間 1.5px 連接線。 */
/* 精靈雙欄：左表單 + 右側常駐「啟用的能力模組」面板。 */
.setup-wizard {
  /* 滿版（2026-08-10 使用者裁示）：不再 1120px 置中，寬度交給
     .agent-admin-main 的左右 32px 檐溝；寬螢幕多的空間給主欄。 */
  max-width: none;
}

.wz-columns {
  display: grid;
  align-items: start;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 268px;
}

.wz-side {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.wz-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wz-side-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.wz-side-desc {
  margin: 3px 0 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  line-height: 1.5;
}

.wz-side-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wz-side-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--c-surface-page);
  cursor: pointer;
  text-align: left;
}

.wz-side-row:hover {
  border-color: var(--c-border-default);
}

.wz-side-row.on {
  background: var(--c-surface-card);
  border-color: var(--c-border-default);
}

.wz-side-icon {
  display: inline-flex;
  flex: none;
  color: var(--c-text-tertiary);
}

.wz-side-row.on .wz-side-icon {
  color: var(--c-accent);
}

.wz-side-row-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.wz-side-row-label {
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.wz-side-row-code {
  color: var(--c-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

.wz-side-save {
  width: 100%;
}

@media (max-width: 1024px) {
  .wz-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .wz-side {
    position: static;
  }
}

.wz-steps {
  display: flex;
  align-items: center;
  gap: 0;
  /* 上方留白：stepper 不要貼著頂 bar。 */
  margin: 24px 0 22px;
  padding: 0;
  list-style: none;
}

.wz-step-cell {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.wz-step-cell:last-child {
  flex: none;
}

.wz-step {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.wz-num {
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-border-strong);
  border-radius: 50%;
  background: var(--c-surface-card);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.wz-step.on .wz-num {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-text-inverse);
}

.wz-step.done .wz-num {
  border-color: var(--c-success);
  background: var(--c-success);
  color: var(--c-text-inverse);
}

.wz-label {
  color: var(--c-text-tertiary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.wz-step.on .wz-label {
  color: var(--c-text-primary);
}

.wz-bar {
  flex: 1;
  height: 1.5px;
  min-width: 20px;
  margin: 0 12px;
  background: var(--c-border-default);
}

.wz-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wz-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.wz-hint {
  margin-left: auto;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

/* ── 步驟內容通用卡（design .dc.html:85 .wz-card；大塊 12px radius）───── */
.wz-step-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wz-card {
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  padding: 18px 20px;
}

.wz-card-title {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 14px;
  font-weight: 700;
}

.wz-card-desc {
  margin: 2px 0 14px;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.wz-card-desc.no-gap {
  margin-bottom: 0;
}

/* ── 提示詞總覽（#17845）────────────────────────────────────────────────
   卡片內的分組列表，列本身不包卡（巢狀卡片一律錯）：hairline 分隔、
   summary 一行截斷、展開才見全文。chip 沿用既有 token，「進階」用 warning 前景。 */
.pv-count {
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 11px;
}

.pv-empty {
  margin: 4px 0 0;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

/* 預覽的不是綁定情境時的說明（沒有深連結的理由）。 */
.pv-note {
  margin: 8px 0 0;
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.pv-group {
  margin-top: 12px;
}

.pv-group-label {
  margin: 0 0 2px;
  color: var(--c-text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pv-row {
  border-top: 1px solid var(--c-border-default);
}

.pv-row summary {
  display: flex;
  /* 一律允許折行：分流閘門一列有四顆 chip，768px 下不折就會被
     .settings-panel 的 overflow:hidden 裁掉——scrollWidth 量不到、肉眼看得到。 */
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
  padding: 7px 2px;
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}

.pv-row summary::-webkit-details-marker {
  display: none;
}

/* 關掉原生 marker 就得自己補展開圖示，否則收合的列沒有任何「可以打開」的暗示
   （codex `#123851`）。慣例沿用 .cfg-card-chevron：▸ 展開時轉 90deg。 */
.pv-chevron {
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 10px;
  line-height: 1;
  transition: transform var(--motion-slow) var(--motion-ease);
}

.pv-row[open] > summary .pv-chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .pv-chevron {
    transition: none;
  }
}

.pv-row summary:hover {
  background: var(--c-surface-page);
}

.pv-row-label {
  flex: none;
  max-width: 11em;
  overflow: hidden;
  color: var(--c-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-chips {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 4px;
}

.pv-chip {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--c-border-default);
  border-radius: 999px;
  color: var(--c-text-secondary);
  font-size: 10.5px;
  line-height: 16px;
  white-space: nowrap;
}

.pv-chip.is-adv {
  color: var(--c-warning);
}

.pv-preview {
  flex: 1 1 12em;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-row[open] > summary .pv-preview {
  visibility: hidden; /* 展開後全文就在下方，摘要行不重複同一句話 */
}

.pv-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 2px 10px;
}

.pv-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}

.pv-text {
  margin: 0;
  max-width: 100%;
  color: var(--c-text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .pv-preview {
    flex-basis: 100%;
  }
}

.wz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wz-empty-hint {
  margin: 0 0 12px;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

/* ── 步驟 1：對話情境下拉（design .dc.html:114-122 .scn-field/.scn-pop）── */
.wz-scn-card {
  position: relative;
  z-index: 5;
}

.wz-scn-card .field-help {
  display: block;
  margin-top: 10px;
}

/* 進階客製化出口：低調文字連結，導向側欄 Intent Router 的工作流程編輯器。 */
.wz-adv-link {
  display: inline-block;
  margin-top: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--c-text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
}

.wz-adv-link:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

.scn-wrap {
  position: relative;
}

.scn-field {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.scn-field:hover {
  border-color: var(--c-border-strong);
}

.scn-field.open {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.scn-field-icon {
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.scn-field-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.scn-field-name {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scn-field-meta {
  margin-top: 1px;
  overflow: hidden;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scn-bound-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: 6px;
  background: var(--c-success-soft);
  color: var(--c-success);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.scn-chevron {
  display: flex;
  flex: none;
  color: var(--c-text-muted);
  transition: transform var(--motion-base) var(--motion-ease);
}

.scn-chevron.open {
  transform: rotate(180deg);
}

.scn-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: flex;
  max-height: 392px;
  flex-direction: column;
  overflow: hidden; /* 外觀歸 .ui-menu */
}

.scn-pop-head {
  position: relative;
  flex: none;
  border-bottom: 1px solid var(--c-border-default);
  padding: 11px 12px 9px;
}

.scn-search-icon {
  position: absolute;
  top: 50%;
  left: 22px;
  display: flex;
  color: var(--c-text-muted);
  transform: translateY(-50%);
}

.scn-search {
  width: 100%;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  padding: 7px 10px 7px 31px;
  font: inherit;
  font-size: 12.5px;
}

.scn-disabled-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--c-border-default);
  padding: 9px 13px;
  color: var(--c-text-secondary);
  cursor: pointer;
  font-size: 12px;
}

.scn-disabled-toggle input {
  position: relative;
  width: 30px;
  height: 17px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background: var(--c-border-strong);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.scn-disabled-toggle input::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c-surface-card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  content: "";
  transition: transform var(--motion-fast) var(--motion-ease);
}

.scn-disabled-toggle input:checked {
  background: var(--c-accent);
}

.scn-disabled-toggle input:checked::after {
  transform: translateX(13px);
}

.scn-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 5px 0;
}

.scn-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: none;
  border-left: 2px solid transparent;
  background: transparent;
  padding: 9px 13px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.scn-row:hover {
  background: var(--c-surface-hover);
}

.scn-row.sel {
  border-left-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.scn-check {
  display: flex;
  width: 15px;
  flex: none;
  justify-content: center;
  color: var(--c-accent);
}

.scn-row-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.scn-row-name {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scn-row-key {
  overflow: hidden;
  margin-top: 1px;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scn-row-badges {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
}

.scn-metadata-badge,
.scn-disabled-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

.scn-metadata-badge {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

.scn-disabled-badge {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.scn-field.invalid {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 2px var(--c-danger-soft);
}

.scn-binding-error {
  margin: 6px 2px 0;
  color: var(--c-danger);
  font-size: 11.5px;
  font-weight: 600;
}

.scn-row.scn-row-missing {
  cursor: not-allowed;
  opacity: 0.82;
}

.scn-missing-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 7px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.scn-empty {
  margin: 0;
  padding: 22px 14px;
  color: var(--c-text-muted);
  font-size: 12px;
  text-align: center;
}

/* 選定情境提示條（design .dc.html:736-739 accent 淡底）*/
.wz-hintbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--c-accent);
  border-radius: 10px;
  background: var(--c-accent-soft);
}

.wz-hintbar-icon {
  display: flex;
  flex: none;
  margin-top: 1px;
  color: var(--c-accent);
}

.wz-hintbar-text {
  color: var(--c-text-secondary);
  font-size: 11.5px;
  line-height: 1.55;
}

.wz-hintbar-text strong {
  color: var(--c-text-primary);
}

.wz-hintbar-text code {
  color: var(--c-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 能力模組五列 toggle（design .dc.html:74-76 .cap-row）*/
.cap-list {
  margin-top: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  overflow: hidden;
}

.cap-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--c-border-default);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background-color var(--motion-fast) var(--motion-ease);
}

.cap-row:last-child {
  border-bottom: none;
}

.cap-row:hover {
  background: var(--c-surface-hover);
}

.cap-icon {
  display: flex;
  flex: none;
  color: var(--c-text-muted);
}

.cap-icon.on {
  color: var(--c-accent);
}

.cap-label {
  flex: 1;
  min-width: 0;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.cap-code {
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

/* ── 步驟 2：知識庫來源 segment（design .dc.html:781-784 cfg-seg）───── */
.wz-seg {
  display: flex;
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-sunken);
  padding: 3px;
  gap: 3px;
  /* 模式切換與它所控制的內容分屬兩層，間距拉開才看得出從屬關係。 */
  margin-bottom: 18px;
}




.wz-kb-new .wz-card-head {
  margin-bottom: 8px;
}

.wz-kb-new .wz-input {
  width: 100%;
}

.wz-kb-new-hint {
  margin: 8px 0 0;
}

/* ── 步驟 2：雙區拖曳上傳（design .dc.html:800-820）────────────────── */
.wz-dataset-pick {
  max-width: 560px;
  margin-bottom: 12px;
}

/* 目前綁定的知識庫：搜尋與翻頁都會把選中那列捲出視野，所以「選了什麼」要有
   一個不隨清單移動的常駐位置。 */
.wz-dataset-current {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  border: 1px solid var(--c-accent);
  border-radius: 9px;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  padding: 8px 11px;
  font-size: 12.5px;
}

.wz-dataset-current > svg {
  flex: none;
}

/* 可收合版：整列是按鈕，右側 caret 指示展開狀態。名冊 380 筆，
   綁好之後攤開只是把下方的上傳區擠出視窗。 */
.wz-dataset-current--toggle {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.wz-dataset-current--toggle:hover {
  background: var(--c-accent-soft);
  filter: brightness(0.98);
}

.wz-dataset-current-hint {
  margin-left: auto;
  color: var(--c-accent);
  font-size: 12px;
}

.wz-dataset-current-caret {
  flex: none;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.wz-dataset-current--toggle.is-open .wz-dataset-current-caret {
  transform: rotate(180deg);
}

.wz-dataset-current.none {
  border-color: var(--c-border-strong);
  border-style: dashed;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
}

/* 次要文字不用 opacity 壓——淡出會把對比一起壓掉；改用夠深的中性色，
   靠色相（中性灰 vs 藍）與字級分層。 */
.wz-dataset-current-label {
  flex: none;
  color: var(--c-text-secondary);
}

.wz-dataset-current strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
}

.wz-dataset-current code {
  flex: none;
  margin-left: auto;
  color: var(--c-text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.wz-dataset-searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-muted);
  padding: 8px 10px;
}

.wz-dataset-searchbox > svg:first-child {
  flex: none;
}

.wz-dataset-searchbox:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.wz-dataset-searchbox input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--c-text-primary);
  font: inherit;
}

/* 搜尋是伺服器端的：載入指示留在搜尋框裡，清單原地淡出，不抽換內容造成跳版。 */
.wz-dataset-spin {
  flex: none;
  color: var(--c-accent);
  animation: wz-dataset-spin 900ms linear infinite;
}

@keyframes wz-dataset-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-dataset-spin {
    animation: none;
  }
}

.wz-dataset-clear {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-tertiary);
  padding: 2px;
  cursor: pointer;
}

.wz-dataset-clear:hover {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

/* 一列一行後每列約 34px，同樣高度看得到的筆數多一倍，翻頁鈕也跟著上移，
   不必先捲完 20 筆才碰得到。 */
.wz-dataset-results {
  max-height: clamp(240px, 44vh, 396px);
  margin-top: 8px;
  overflow-y: auto;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
  transition: opacity var(--motion-base) var(--motion-ease);
}

.wz-dataset-results.busy {
  opacity: 0.5;
  pointer-events: none;
}

.wz-dataset-option {
  display: grid;
  width: 100%;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--c-border-default);
  background: transparent;
  color: var(--c-text-primary);
  padding: 7px 11px;
  text-align: left;
  cursor: pointer;
}

.wz-dataset-option:last-child {
  border-bottom: 0;
}

/* hover 與「已選」原本同一個底色，滑過時整份清單都像被選中；分開才讀得出狀態。 */
.wz-dataset-option:hover:not(.on):not(:disabled) {
  background: var(--c-surface-hover);
}

.wz-dataset-option.on {
  background: var(--c-accent-soft);
}

.wz-dataset-option.cursor,
.wz-dataset-option:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.wz-dataset-option:disabled {
  cursor: wait;
}

/* 勾永遠佔位，選中才上色：列與列的文字起點才不會因為有沒有勾而左右跳動。 */
.wz-dataset-tick {
  color: transparent;
}

.wz-dataset-option.on .wz-dataset-tick {
  color: var(--c-accent-strong);
}

.wz-dataset-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}

.wz-dataset-option.on strong {
  color: var(--c-accent-strong);
  font-weight: 700;
}

/* dataset ID 縮成前 8 碼：名稱會撞名（清單裡就有兩個「123」），短碼仍足以辨識，
   完整 ID 收在 title，不再和名稱搶同一份視覺重量。 */
/* --c-text-tertiary 是唯一同時「夠淡（讀得出次要）」又過 4.5:1 的中性色；
   再淡一階的 muted / placeholder 在白底只有 3.1 / 2.3。 */
.wz-dataset-option code {
  color: var(--c-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.wz-dataset-option.on code {
  color: var(--c-accent-strong);
}

.wz-dataset-empty {
  margin: 0;
  color: var(--c-text-muted);
  padding: 18px 12px;
  text-align: center;
}

.wz-dataset-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 8px;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

.wz-dataset-count b {
  color: var(--c-text-secondary);
  font-variant-numeric: tabular-nums;
}

.wz-dataset-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 19 頁只有上一頁／下一頁，要點 18 次才到底；補首末頁一步到位。 */
.wz-dataset-pages button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-default);
  border-radius: 7px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  padding: 3px 5px;
  cursor: pointer;
}

.wz-dataset-pages button:hover:not(:disabled) {
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}

.wz-dataset-pages button:disabled {
  color: var(--c-text-placeholder);
  cursor: not-allowed;
}

.wz-dataset-pageno {
  min-width: 52px;
  color: var(--c-text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wz-dataset-warning {
  margin: 8px 0 0;
  color: var(--c-danger);
  font-size: 12px;
}

/* 稿是 flex 各佔一半、gap 12。用 flex 而不是 grid 才好 wrap：容器窄到放不下
   兩欄時自動疊成一欄，不必再開一條 media query（原本 720px 那條已移除）。 */
.wz-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wz-upload-cell {
  display: flex;
  min-width: 0;
  flex: 1 1 180px;
  flex-direction: column;
  gap: 6px;
}

/* 欄標：稿是粗體主標＋淡色副標同一行（「文件 語意分段」）。 */
.wz-upload-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--c-text-primary);
  font-size: 12px;
  font-weight: 700;
}

.wz-upload-title-hint {
  color: var(--c-text-muted);
  font-weight: 500;
}

.wz-dropzone {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 110px;
  padding: 22px 16px;
  border: 1.5px dashed var(--c-border-strong);
  border-radius: 11px;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease);
}

/* hover 與拖曳中同一個回饋（稿只畫了 hover，拖進來時當然也要有）。
   :not(.disabled) 擋掉停用態——沒有 dataset 或上傳中時滑過去不該像可以放。 */
.wz-dropzone:not(.disabled):hover,
.wz-dropzone.drag {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.wz-dropzone.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wz-dropzone.doc .wz-dropzone-icon,
.wz-dropzone.doc .wz-dropzone-label em {
  color: var(--c-accent);
}

.wz-dropzone.sheet .wz-dropzone-icon,
.wz-dropzone.sheet .wz-dropzone-label em {
  color: var(--c-success);
}

.wz-dropzone-icon {
  display: flex;
}

.wz-dropzone-label {
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.wz-dropzone-label em {
  font-style: normal;
}

.wz-dropzone-busyname {
  display: block;
  overflow: hidden;
  max-width: 220px;
  margin-top: 3px;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-dropzone-exts {
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
}

/* ── 步驟 2：從官網自動匯入（後端未提供，控件 disabled）─────────────── */
.wz-badges {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.wz-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.wz-badge.success {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.wz-badge.soon {
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}

.wz-badge.neutral {
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  flex: none;
}

.wz-crawl-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

/* 網址輸入吃剩餘寬度並允許縮到很窄，否則四個控件在窄容器裡撐破卡片
   （#17796：這張卡現在也長在 Agent 設定頁的知識庫頁籤，比精靈窄）。 */
.wz-crawl-row .wz-input:not(.wz-crawl-limit .wz-input) {
  flex: 1 1 200px;
  min-width: 0;
}

/* 官網爬取的「最多 N 頁」上限欄：窄數字框，不搶網址列寬度。 */
.wz-crawl-limit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  white-space: nowrap;
}

.wz-crawl-limit .wz-input {
  width: 58px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-align: center;
}

.wz-crawl-note {
  margin: 8px 0 0;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

/* Firecrawl 剩餘額度：稿把它壓得比一般說明再小一階、走等寬字。
   數字是查回來的（/api/rag/firecrawl/credit-usage），查不到就不渲染這一行。 */
.wz-crawl-credit {
  margin: 7px 0 0;
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

/* 排程爬蟲：toggle 列改成可展開，展開後是設定表單＋已建立清單。 */
.wz-schedule-toggle {
  width: 100%;
  border: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
  cursor: pointer;
  text-align: left;
}

/* JSX 寫的是 is-on（DatasetIngestCard.tsx），這裡原本只認 .on，等於這個
   開關的狀態樣式從來沒生效過。改吃 is-on，與 ui-* 那套（.ui-tab.is-on…）一致。 */
.wz-schedule-toggle.is-on {
  border-color: var(--c-accent);
}

.wz-schedule-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-page);
}

.wz-schedule-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.wz-schedule-field {
  display: flex;
  min-width: 148px;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  color: var(--c-text-secondary);
  font-size: 12px;
}

.wz-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wz-schedule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.wz-schedule-item-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.wz-schedule-item-url {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-schedule-item-meta {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.wz-crawl-icon {
  display: flex;
  flex: none;
  color: var(--c-text-muted);
}

.wz-input {
  flex: 1;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.wz-input:disabled {
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.wz-togglerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
}

.wz-togglerow.disabled {
  opacity: 0.6;
}

.wz-togglerow-title {
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.wz-togglerow-desc {
  margin-top: 3px;
  color: var(--c-text-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* ── 步驟 2：文檔清單（design .dc.html:837-866 kb-doc 列表卡）─────────── */
.wz-card.wz-kb-card {
  padding: 0;
  overflow: hidden;
}

.wz-kb-listhead {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--c-border-default);
  padding: 15px 18px;
}

.wz-kb-listhead-main {
  min-width: 0;
  flex: 1;
}

.wz-kb-current {
  color: var(--c-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 文檔清單搜尋小框：前端即時過濾已載入清單，不打後端。 */
.wz-kb-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 176px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-muted);
  padding: 5px 9px;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}

.wz-kb-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.wz-kb-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--c-text-primary);
  font: inherit;
  font-size: 12px;
  padding: 0;
}

.wz-kb-search input::placeholder {
  color: var(--c-text-placeholder);
}

.wz-kb-cols,
.wz-kb-doc {
  display: flex;
  align-items: center;
  gap: 11px;
}

/* 文檔清單固定高度內部捲動，頁面不被撐長；表頭 sticky 保持可讀。 */
.wz-kb-scrollarea {
  max-height: 380px;
  overflow-y: auto;
}

.wz-kb-cols {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  padding: 7px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wz-kb-cols .wz-kb-col-name {
  flex: 1;
  padding-left: 26px;
}

.wz-kb-col-type,
.wz-kb-col-status {
  width: 64px;
  flex: none;
}

.wz-kb-col-tokens {
  width: 72px;
  flex: none;
  text-align: right;
}

.wz-kb-doc {
  border-bottom: 1px solid var(--c-border-default);
  padding: 9px 18px;
}

.wz-kb-doc:last-child {
  border-bottom: none;
}

.wz-kb-doc-icon {
  display: flex;
  width: 15px;
  flex: none;
  color: var(--c-text-muted);
}

.wz-kb-doc-name {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wz-kb-typebadge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
}

.wz-kb-status {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.wz-kb-status.success {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.wz-kb-status.warning {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.wz-kb-status.danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.wz-kb-status.info {
  background: var(--c-info-soft);
  color: var(--c-info);
}

.wz-kb-doc-tokens {
  color: var(--c-text-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.wz-kb-empty {
  margin: 0;
  padding: 22px 18px;
  color: var(--c-text-muted);
  font-size: 12px;
  text-align: center;
}

.wz-kb-listbody {
  padding: 12px 18px;
}

/* ── 情境必填欄位（SetupStepIntent 步驟 1）──────────────────────────── */
.wz-req {
  color: var(--c-danger);
}

.wz-hint-danger {
  display: block;
  margin-top: 5px;
  color: var(--c-danger);
  font-size: 11.5px;
  font-weight: 600;
}

.form-grid input.wz-required-invalid,
.form-grid textarea.wz-required-invalid {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 12%, transparent);
}

/* ── 測試對話 embedded 外皮（TestChatPanel embedded 模式；掛在 Run 試打 dock）──
   對話功能沿用 ChatShell（stream/氣泡/意圖與 RAG chips 原封），外皮撐滿
   容器高度由 .run-dock-body 系列規則接手。 */
.wz-testchat-body {
  display: flex;
  flex-direction: column;
}

/* ── 步驟 3：語音模型（design .dc.html:869-886）──────────────────────── */

.wz-voice-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.wz-voice-preview-hint {
  color: var(--c-text-muted);
  font-size: 12px;
}

.wz-probe {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border-default);
}

/* ── 步驟 3：關鍵字修正群組選擇的舊版表格樣式（待關鍵字設定頁統一整理）── */
.wz-kw-pairs-head {
  margin-top: 14px;
  margin-bottom: 8px;
}

.wz-kw-pairs {
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  overflow: hidden;
}

.wz-kw-pairs-cols {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 13px;
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wz-kw-pairs-cols span:not(.wz-kw-arrow) {
  flex: 1;
}

.wz-kw-pair-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 13px;
}

.wz-kw-pair-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  padding: 6px 9px;
  font: inherit;
  font-size: 12.5px;
}

.wz-kw-arrow {
  flex: none;
  width: 20px;
  color: var(--c-text-muted);
  text-align: center;
}

/* ── 語音工具的說明條（RunVoiceTools 唯一使用者）─────────────────────────
   原本這一段是 Run 試打舊版左欄「Attributes」的一部分；Run 試打 v2 把左欄換成
   右側 rail（RunTestRail + remote/runTestPanel.css），舊版的 .rt-fullscreen /
   .rc-aside / .rc-json 全數移除，只留這條還在服役的說明條。
   左緣 accent 條的語彙 v2 沿用在 .rt2-rail-intro。 */
.rc-info {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--c-accent);
  border-radius: 2px 8px 8px 2px;
  background: var(--c-bg-sunken, var(--c-surface-page));
}

.rc-info-tag {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-accent);
}
.rc-info-msg {
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 左欄「語音工具」分頁（RunVoiceTools）：TTS 試聽＋ASR 上傳辨識。
   卡 8px / 按鈕沿用 .btn-sm / chip 6px，配色全走 --c-* token。 */
.rv-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rv-card {
  padding: 13px 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
}

.rv-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.rv-card-title {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 13px;
  font-weight: 800;
}

.rv-badge {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 10.5px;
  font-weight: 700;
}

.rv-field {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.rv-field-label,
.rv-label {
  display: block;
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  font-weight: 700;
}

.rv-field-value {
  min-width: 0;
  color: var(--c-text-primary);
  font-size: 12.5px;
  font-weight: 700;
  word-break: break-all;
}

.rv-label {
  margin-bottom: 5px;
}

.rv-textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-page);
  color: var(--c-text-primary);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
}

.rv-textarea:focus {
  border-color: var(--c-accent);
  outline: none;
}

.rv-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 檔案輸入靠 rv-actions 的按鈕代打（原生外觀無法對齊 token），但保留在 DOM 內
   讓鍵盤／輔助技術仍可直接操作。 */
.rv-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rv-hint {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  line-height: 1.6;
}

.rv-hint.ok {
  color: var(--c-success);
}

.rv-hint.warn {
  color: var(--c-warning, #b45309);
}

.rv-hint.bad {
  color: var(--c-danger);
}

.rv-empty {
  margin: 0;
  color: var(--c-text-tertiary);
  font-size: 12px;
  line-height: 1.7;
}

.rv-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-default);
}

.rv-result-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.rv-chip {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--c-surface-page);
  color: var(--c-text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.rv-transcript {
  margin: 5px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--c-surface-page);
  color: var(--c-text-primary);
  font-size: 12.5px;
  line-height: 1.7;
  word-break: break-word;
}

.rv-muted {
  color: var(--c-text-muted);
}

.rv-fixes {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rv-fixes li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.rv-fix-from {
  color: var(--c-danger);
  text-decoration: line-through;
}

.rv-fix-arrow {
  color: var(--c-text-muted);
}

.rv-fix-to {
  color: var(--c-success);
  font-weight: 700;
}

/* .wz-upload-grid 原本也在這裡塌成一欄；它改名 .wz-upload-row 並改用
   flex-wrap 之後，窄容器會自己疊起來，不需要斷點。 */
@media (max-width: 720px) {
  .wz-tpl-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Agent 名冊（#17784 側欄 Agents 入口的落點）─────────────────────────
   沿用工作台既有的卡片語彙（--c-surface-card / --c-border-default），
   不另立一套視覺。頭像圓角與尺寸對齊 .topbar-avatar，讓同一個 agent 在
   名冊與頂 bar 看起來是同一顆。 */
/* ══ Agents 名冊（Claude Design「Agents 清單.dc.html」）══════════════════
   稿的核心：卡片沒有資訊量。每一列改成講「真正有差別的事」——綁在哪個 TeleAgent
   專案、幾份知識庫與情境、最後更新。版面用既有 token 與 ui-* 元件，不另立一套皮。 */

.agent-roster {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agent-roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.agent-roster-title h3 {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-primary);
}

/* 標題列那句總結（設計註記 6）：幾隻啟用中、幾隻未綁定，用等寬數字定住。 */
.agent-roster-headline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.agent-roster-title p {
  margin: 0;
  font-size: 13px;
  color: var(--c-text-secondary);
}

.agent-roster-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.agent-roster-tools-end {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.agent-roster-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  max-width: 330px;
  padding: 7px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.agent-roster-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--c-focus-ring);
}

.agent-roster-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-primary);
  font-size: 13px;
  outline: none;
}

.agent-roster-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 篩選／排序 chip：同一顆元件兩種用途，選中態才反白。 */
.agent-roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.agent-roster-chip:hover {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.agent-roster-chip:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

.agent-roster-chip.is-on {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.agent-roster-chip-n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  opacity: 0.66;
}

/* 分段控制：兩個等價檢視並排，選中的那個浮起來。 */
.agent-roster-view {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-sunken);
}

.agent-roster-view button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.agent-roster-view button:hover { color: var(--c-text-secondary); }

.agent-roster-view button.active {
  background: var(--c-surface-card);
  color: var(--c-accent);
  box-shadow: var(--c-shadow-card);
}

.agent-roster-view button:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

/* 綁定狀態查不到時的降級提示——「查不到」不能長得跟「未綁定」一樣。 */
.agent-roster-degraded {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: 12px;
}

.agent-roster-degraded code {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--c-surface-card);
}

/* 不用 overflow:hidden 切圓角（codex `#136774`）：最後一列的 ⋯ popover 會被裁掉，
   設定精靈與複製就按不到。改成讓頭尾自己帶圓角，容器維持 visible。 */
.agent-roster-table {
  border: 1px solid var(--c-border-default);
  border-radius: 11px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}

.agent-roster-table > .agent-roster-colhead {
  border-radius: 10px 10px 0 0;
}

.agent-roster-table > section:last-child .agent-roster-rows > li:last-child .agent-roster-item {
  border-radius: 0 0 10px 10px;
}

/* 欄位軸線（設計註記 2）：清單靠固定欄寬讓名稱與綁定專案縱向對齊。 */
.agent-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) 132px 92px 126px;
  align-items: center;
  gap: 14px;
  padding: 0 15px;
}

.agent-roster-colhead {
  height: 34px;
  background: var(--c-surface-sunken);
  border-bottom: 1px solid var(--c-border-default);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.agent-roster-colhead .col-end { text-align: right; }

.agent-roster-grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--c-surface-sunken);
  border-bottom: 1px solid var(--c-border-default);
}

.agent-roster-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

.agent-roster-groupn {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--c-text-muted);
}

.agent-roster-grouphint {
  font-size: 11px;
  color: var(--c-text-muted);
}

.agent-roster-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-roster-rows > li + li .agent-roster-row,
.agent-roster-rows > li + li.agent-roster-row {
  border-top: 1px solid var(--c-border-default);
}

.agent-roster-item {
  min-height: 58px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.agent-roster-item:hover { background: var(--c-surface-hover); }

.agent-roster-item:focus-visible {
  outline: none;
  box-shadow: inset var(--c-focus-ring);
}

/* 已封存的列調暗。opacity 會建立 stacking context，於是後面幾列會蓋過前一列打開的
   ⋯ 選單（codex `#136855`）——所以開著選單／hover／focus 的那一列要抬到最上層。 */
.agent-roster-item.is-dim { opacity: 0.68; }

.agent-roster-item:hover,
.agent-roster-item:focus-within,
.agent-roster-item:has(details[open]) {
  position: relative;
  z-index: 30;
}

.agent-roster-name-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.agent-roster-avatar {
  display: flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 12.5px;
  font-weight: 800;
}

/* 列／卡片的主動作：名稱本身就是那顆按鈕（不是把整列宣告成 button）。
   按鈕的預設皮全部拿掉，只留焦點環——版面由外層 grid 決定。 */
.agent-roster-open {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.agent-roster-open:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

/* 「查不到」不能長得像「沒綁」：不給入口、不給警示色，只說事實。 */
.agent-roster-unknown {
  font-size: 12px;
  color: var(--c-text-muted);
  font-style: normal;
}

/* 名稱不再被截斷成錯字（設計註記 4）：單行 ellipsis，長度不影響列高。 */
.agent-roster-name,
.agent-roster-role,
.agent-roster-res,
.agent-roster-project {
  /* ⚠️ min-width:0 曾在合併解衝突時被洗掉一次（b328661 → 8/17 回歸）。
     這幾個是 flex item，少了它 ellipsis 永不觸發、長字直接衝出卡片。
     動這段前先跑 agents 頁卡片檢視確認沒溢出。 */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-roster-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.agent-roster-role {
  font-size: 11px;
  color: var(--c-text-muted);
}

.agent-roster-bind-cell { min-width: 0; }

.agent-roster-project {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-secondary);
}

/* 未綁定不是灰字，是入口（設計註記 5）：虛線邊框把它讀成「這裡可以補」。 */
.agent-roster-bind {
  max-width: 100%;
  border-style: dashed;
  color: var(--c-accent);
}

.agent-roster-res {
  font-size: 11.5px;
  color: var(--c-text-tertiary);
}

.agent-roster-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
}

.agent-roster-pill.is-live {
  background: var(--c-success-soft);
  color: var(--c-success);
}

/* 啟用但沒綁專案＝接不到電話，用警示色跟「啟用中」分開（設計註記 6）。 */
.agent-roster-pill.is-unbound {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

/* 綁了但同步沒完成／分機接不了：比「沒綁」更該處理，用 danger 區隔。 */
.agent-roster-pill.is-attention {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* 查不到＝我們不知道，用中性色，不要暗示任何一邊。 */
.agent-roster-pill.is-unknown {
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}

.agent-roster-pill.is-archived { color: var(--c-text-muted); }

.agent-roster-end {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.agent-roster-item:hover .agent-roster-actions,
.agent-roster-item:focus-within .agent-roster-actions {
  pointer-events: auto;
}

.agent-roster-updated {
  flex: none;
  font-size: 11px;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  /* 不換行：折成兩行會讓那一列比別列高，欄位軸線就歪了（設計註記 4 的同一條理由）。 */
  white-space: nowrap;
}

/* 列動作 hover／focus 才出現（設計註記 9）：常駐只留最後更新。
   focus-within 讓鍵盤使用者一樣走得到，不是只有滑鼠。 */
.agent-roster-actions {
  display: flex;
  gap: 6px;
  /* 不佔位：沒 hover 時完全退場，末欄只剩時間 */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.agent-roster-item:hover .agent-roster-actions,
.agent-roster-item:focus-within .agent-roster-actions {
  position: static;
  opacity: 1;
}

/* 動作出現時把時間收掉：末欄是固定寬度，兩者同時在場會撐破欄位、壓到狀態欄
   （codex `#136754`）。時間是常駐資訊、動作是當下意圖，互斥顯示即可。 */
.agent-roster-item:hover .agent-roster-updated,
.agent-roster-item:focus-within .agent-roster-updated {
  display: none;
}

.agent-roster-menu { position: relative; }

.agent-roster-more { padding: 6px 8px; }

.agent-roster-menu > summary { list-style: none; }
.agent-roster-menu > summary::-webkit-details-marker { display: none; }

.agent-roster-menu-popover {
  /* 外觀歸 .ui-menu，這裡只留定位、尺寸與項目樣式（比照 .home-tpl-menu-popover）。 */
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  min-width: 168px;
  padding: 5px;
}

/* .ui-menu 只給外框——項目樣式各自寫，不補的話是瀏覽器預設的裸 button
   （codex `#136811`）。 */
.agent-roster-menu-popover button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text-primary);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.agent-roster-menu-popover button:hover {
  background: var(--c-surface-hover);
}

.agent-roster-menu-popover button:focus-visible {
  outline: none;
  box-shadow: var(--c-focus-ring);
}

/* 卡片檢視：兩行夾擠＋固定最小高度，長名稱不會讓某張卡變高、破壞對齊。 */
.agent-roster-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-roster-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 152px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 11px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.agent-roster-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--c-shadow-card);
}

.agent-roster-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

.agent-roster-card-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text-primary);
}

.agent-roster-card-open {
  align-items: flex-start;
  width: 100%;
}

.agent-roster-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* 複製失敗時攤開 ID 讓人自己選（codex `#136777`）。 */
.agent-roster-copy-fallback {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  color: var(--c-text-muted);
  font-size: 11px;
}

.agent-roster-copy-fallback input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--c-border-default);
  border-radius: 6px;
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.agent-roster-card-foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--c-border-default);
}

.agent-roster-card-bind {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.agent-roster-card-label {
  flex: none;
  font-size: 10.5px;
  color: var(--c-text-muted);
}

.agent-roster-card-meta {
  overflow: hidden;
  font-size: 10.5px;
  color: var(--c-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 骨架的兩條線要真的佔到名稱欄的寬度（codex `#136812`）：
   內部只有百分比寬的空元素，容器不給 flex:1 的話 intrinsic sizing 會收成 0。 */
.agent-roster-skel-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.agent-roster-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 46px 24px;
  border: 1px solid var(--c-border-default);
  border-radius: 11px;
  background: var(--c-surface-card);
  text-align: center;
}

.agent-roster-empty-icon {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  border-radius: 11px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.agent-roster-empty-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-text-primary);
}

.agent-roster-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.agent-roster-empty-body {
  max-width: 390px;
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--c-text-secondary);
}

/* 窄畫面收欄（設計稿 @media 1180/900 的同一組取捨）：先收資源欄，
   再整列改成 flex 換行，動作常駐（hover 在觸控裝置上沒有對應狀態）。 */
@media (max-width: 1180px) {
  .agent-roster-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 92px 108px;
  }

  .agent-roster-res,
  .agent-roster-colhead .col-res {
    display: none;
  }
}

/* 沒有 hover 能力的裝置（橫向平板、觸控筆電）不一定落在窄版斷點裡（codex `#136856`）：
   只用寬度判斷的話，這些人看得到「試打／更多操作」卻永遠點不到。 */
@media (hover: none), (pointer: coarse) {
  .agent-roster-actions {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }

  /* 動作常駐時末欄塞不下時間，硬擠會壓到狀態欄（codex `#136862`）。
     這裡整個藏起來，不是只在 hover 藏——這些裝置根本沒有 hover。
     窄版（≤900px）整列改 flex-wrap、空間夠，再把時間放回來。 */
  .agent-roster-updated {
    display: none;
  }

  .agent-roster-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 92px 150px;
  }

  .agent-roster-res,
  .agent-roster-colhead .col-res {
    display: none;
  }
}

@media (max-width: 900px) {
  .agent-roster-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 15px;
  }

  .agent-roster-colhead { display: none; }

  .agent-roster-name-cell { flex: 1 1 190px; }

  .agent-roster-bind-cell { flex: 1 1 190px; }

  .agent-roster-end {
    margin-left: auto;
    gap: 10px;
  }

  /* 觸控裝置沒有 hover：動作常駐、可點、且回到文件流，
     時間也留著（此時整列是 flex-wrap，兩者不搶同一格）。 */
  .agent-roster-actions {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }

  .agent-roster-updated,
  .agent-roster-item:hover .agent-roster-updated,
  .agent-roster-item:focus-within .agent-roster-updated {
    display: inline;
  }
}

/* 精靈步驟被掛成側欄分頁時補的儲存列（精靈裡是靠「下一步」順便存檔）。 */
.settings-pane-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-default);
}

.settings-pane-saved {
  font-size: 13px;
  color: var(--c-success);
}

/* ── Agent 詳情頁籤列（#17790 第 2 塊）──────────────────────────────────
   取代原本「靠側欄切換 Agent 設定」的動線：側欄留給全域資源，這一列只放
   這顆 Agent 自己的設定。底線用 accent 而非整塊填色——Operate 模式下，
   頁籤是導覽不是主角，選中狀態需要看得出來但不該搶走內容的注意力。 */
.agent-tabbar {
  position: relative; /* 滑動底線 indicator 的定位基準 */
  display: flex;
  align-items: stretch;
  gap: 2px;
  /* 頁籤列到內容的距離只由 .agent-workbench 的 gap(16) ＋ .settings-panel
     的 4px 上內距構成（共 20px，voiceflow 級）；這裡不再疊自己的 margin。 */
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--c-border-default);
  overflow-x: auto;
  scrollbar-width: thin;
}

.agent-tabbar button {
  position: relative;
  flex: none;
  padding: 9px 14px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease);
}

.agent-tabbar button:hover {
  color: var(--c-text-primary);
}

.agent-tabbar button.active {
  color: var(--c-accent);
}

.agent-tabbar button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -3px;
  border-radius: 6px 6px 0 0;
}

/* 滑動底線（第四刀）：取代原本每顆按鈕自己的 active border-bottom。
   位置由 AgentTabBar 量測寫進 inline transform/width；首繪即在正確位置，
   之後的切換靠 transition 滑過去。 */
.agent-tabbar__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--c-accent);
  transition:
    transform var(--motion-slow) var(--motion-ease),
    width var(--motion-slow) var(--motion-ease);
  will-change: transform;
}

/* 情境設定頁的情境基本設定卡。.irw-panel-card 與上方必填欄位的 .wz-card 本來就
   吃同一組 token 與 12px radius，只差內距——對齊它，否則同一頁兩張卡的內距不同
   會被看出來。容器自己不畫框：外面再包一層就成了卡中卡。 */
.scenario-meta {
  margin-top: 16px;
}

.scenario-meta .irw-panel-card {
  padding: 18px 20px;
}

/* ── Agent 詳情頁首（#17790 第 2 塊）────────────────────────────────────
   主體內的「你正在看哪一顆 Agent」。刻意不放在頂 bar：頂 bar 是跨頁面的動作列，
   這一塊屬於內容，換 Agent 時整塊換掉。 */
.agent-page-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.agent-page-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 3px 8px 3px 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--c-text-muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}

.agent-page-back:hover {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}

.agent-page-back:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* 大標題：與頁籤、內文拉開明確的 scale step，一眼看得出層級。 */
.agent-page-title {
  margin: 0;
  color: var(--c-text-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.agent-page-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 12.5px;
}

.agent-page-summary-dot {
  margin: 0 7px;
  color: var(--c-text-muted);
}

/* 綁共用情境時，System prompt 欄位下方的「此處設定不生效」說明（#16576）。
   用 warning 系而非 danger：這不是錯誤，是這個欄位在該情境下沒有話語權。 */
.agent-config-scenario-note {
  margin: -4px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--c-warning-soft);
  color: var(--c-warning);
  font-size: 12.5px;
  line-height: 1.6;
}

.agent-config-scenario-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.06);
  font-size: 11.5px;
  word-break: break-all;
}

/* ── 語音設定重排（#17799，對齊 voiceflow Settings/Behaviour 的版型）─────────
   左側 anchor nav（scroll-spy 高亮）＋ 右側設定卡堆疊。只重排既有欄位，
   卡片外觀沿用 .wz-card 的邊框／圓角／陰影語彙，不另立一套視覺。
   動效一律引用 Motion tokens（本檔開頭），不手刻 duration。 */
.vs-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* anchor nav：sticky 跟著捲動，項目是 pill，命中的那節高亮。 */
.vs-nav {
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vs-nav button {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 13px;
  text-align: start;
  cursor: pointer;
  transition:
    background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}

.vs-nav button:hover {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
}

.vs-nav button[aria-current="true"] {
  background: var(--c-surface-sunken);
  color: var(--c-text-primary);
  font-weight: 600;
}

.vs-nav button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.vs-nav svg {
  flex: none;
  opacity: 0.75;
}

.vs-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* 節標題：灰色小字＋細分隔線，對齊參考頁的 section header。 */
.vs-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: -8px;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

.vs-section-head::after {
  flex: 1;
  height: 1px;
  background: var(--c-border-default);
  content: "";
}

/* 卡片進場：逐張 stagger 的淡入上浮。索引由 --vs-index 帶入。 */
.vs-stack .wz-card {
  animation: vs-card-in var(--motion-slow) var(--motion-ease) backwards;
  animation-delay: calc(var(--vs-index, 0) * var(--motion-stagger));
}

@keyframes vs-card-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-medium));
  }
}

/* 卡內欄位：label 在上、控制項在下，與參考頁一致。 */
.vs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.vs-field > span {
  color: var(--c-text-secondary);
  font-size: 13px;
}

.vs-field select {
  width: 100%;
}

.vs-card-desc {
  margin: 4px 0 0;
  color: var(--c-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* 窄容器（≤ 900px）收成單欄，anchor nav 改成水平捲動的 pill 列。 */
@media (max-width: 900px) {
  .vs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .vs-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .vs-nav button {
    width: auto;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-stack .wz-card {
    animation: none;
  }

  .vs-nav button {
    transition-duration: 0.01ms;
  }
}

/* ── 總覽搜尋／租戶篩選（#17831）───────────────────────────────────────
   沿用 .agent-roster-search 的輸入框語彙，不另立一套。動效走 Motion tokens。 */
/* 只給讀屏的標籤：畫面不顯示，但焦點與朗讀都拿得到。專案原本沒有這個
   utility，本檔自帶一份。 */
.home-tenant-filters .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-tenant-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* 設計註記 6：篩選 chip 帶數量，可只看未綁定。
   on 態走專案既有的 `.ui-btn.is-active`（styles.css 上方明訂「篩選 pill 的
   on 態都用它」），這裡只補數字的排版。 */
.home-tenant-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-facet-count {
  color: var(--c-text-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ui-btn.is-active .home-facet-count { color: var(--c-accent); }

.home-tenant-search {
  display: flex;
  flex: 1 1 220px;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  transition: border-color var(--motion-base) var(--motion-ease);
}

.home-tenant-search:focus-within {
  border-color: var(--c-accent);
}

.home-tenant-search input {
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-text-primary);
  font-size: 13px;
  outline: none;
}

.home-tenant-overview-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 24px 12px;
  color: var(--c-text-secondary);
  font-size: 13px;
  text-align: center;
}

.home-tenant-overview-empty p {
  margin: 0;
}

.home-tenant-overview-empty button {
  padding: 6px 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease);
}

.home-tenant-overview-empty button:hover {
  background: var(--c-surface-sunken);
}

.home-tenant-overview-empty button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

@media (max-width: 768px) {
  .home-tenant-filters {
    flex-direction: column;
  }

  /* 轉直向後主軸變垂直，flex-basis 會被當成高度——不重設的話搜尋框會被
     撐成 220px 高的空塊。 */
  .home-tenant-search {
    flex: none;
  }

  .home-tenant-picker,
  .home-tenant-picker select {
    width: 100%;
  }

  .home-tenant-facets { width: 100%; }
  .home-tenant-facets > .ui-btn { flex: 1 1 auto; }
}

/* 窄畫面：固定五欄撐不開，改成換行流。欄名跟著每一格走——沒有表頭時，
   「這個名字是哪一側系統的」就得由格子自己說（設計稿同一個做法）。 */
@media (max-width: 900px) {
  .home-bind-cols { display: none; }

  .home-bind-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    padding: 11px 12px;
  }

  .home-bind-arrow { display: none; }

  .home-bind-c1 { flex: 1 1 190px; }

  /* basis 要留得下同一列的「狀態 pill ＋ 展開鈕」，不然展開鈕會自己換行、
     獨佔一整列。grow 仍是 1，放得下時照樣把剩餘寬度吃滿。 */
  .home-bind-c2 { flex: 1 1 130px; }

  /* 靠 c3 把「狀態＋展開」一起推到右端；把 margin-left:auto 放在展開鈕上會
     讓它自己換行、獨佔一列。 */
  .home-bind-c3 {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .home-bind-lbl {
    display: block;
    margin-bottom: 3px;
    color: var(--c-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .home-tenant-meter {
    width: 100%;
    margin-left: 0;
  }

  .home-tenant-reload {
    margin-left: 0;
    margin-top: 8px;
  }
}

/* ══ 情境設定頁：摘要列 ＋ 欄位編輯 Dialog（#17845 階段 2）═══════════════════
   原本這一頁是四張攤開的長卡片，每張都把完整表單放在頁面上。改成「摘要列」
   語彙：一列＝一個可編輯單元，左邊是它是什麼、中間是目前的值、右邊是編輯。
   要改才點開 Dialog。頁面本體因此只回答「現在是什麼」，掃描成本大幅下降。 */

.sum-list {
  margin-top: 4px;
}

.sum-row {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 4px 10px;
  /* chip 與值一律允許折行：768px 下不折會被 .settings-panel 的 overflow:hidden
     裁掉——scrollWidth 量不到、肉眼看得到（#17845 階段 1 的教訓）。 */
  flex-wrap: wrap;
  padding: 9px 4px;
  border: none;
  border-top: 1px solid var(--c-border-default);
  border-radius: 6px;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--motion-base) var(--motion-ease);
}

.sum-list .sum-row:first-child {
  border-top: none;
}

.sum-row:hover,
.sum-row.is-hover {
  background: var(--c-surface-hover);
}

.sum-row:focus-visible,
.sum-row.is-focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
}

.sum-row:active,
.sum-row.is-active {
  background: var(--c-surface-page);
}

.sum-row:disabled,
.sum-row.is-disabled {
  cursor: default;
  opacity: 0.6;
}

.sum-row-label {
  flex: none;
  max-width: 12em;
  overflow: hidden;
  color: var(--c-text-primary);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 目前的值，單行截斷。摘要列的工作是讓人一眼認出「是不是這個」，不是讀完。 */
.sum-row-value {
  flex: 1 1 12em;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sum-row-value.is-empty {
  color: var(--c-text-tertiary);
  font-style: italic;
}

/* chips 在摘要列裡必須可收縮。`.pv-chips` 自己是 `flex: none`（階段 1 在
   `<summary>` 裡不需要收縮），搬進摘要列後就成了不會讓步的 flex item：分流列
   四顆 chip 的內容寬度衝到 507px，而列只有 308px，多出來的被卡片的 overflow
   裁掉——`scrollWidth === clientWidth` 量不到，只有看畫面才發現（階段 1 同一課）。 */
.sum-row .pv-chips {
  flex: 1 1 auto;
  min-width: 0;
}

.sum-row-action {
  flex: none;
  color: var(--c-accent);
  font-weight: 600;
}

.sum-row:disabled .sum-row-action,
.sum-row.is-disabled /* chips 在摘要列裡必須可收縮。`.pv-chips` 自己是 `flex: none`（階段 1 在
   `<summary>` 裡不需要收縮），搬進摘要列後就成了不會讓步的 flex item：分流列
   四顆 chip 的內容寬度衝到 507px，而列只有 308px，多出來的被卡片的 overflow
   裁掉——`scrollWidth === clientWidth` 量不到，只有看畫面才發現（階段 1 同一課）。 */
.sum-row .pv-chips {
  flex: 1 1 auto;
  min-width: 0;
}

.sum-row-action {
  color: var(--c-text-tertiary);
}

/* ── Dialog ────────────────────────────────────────────────────────────── */

.fld-dlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(16 24 40 / 0.5);
  animation: fld-dlg-fade var(--motion-base) var(--motion-ease);
}

.fld-dlg {
  display: flex;
  width: min(680px, 100%);
  max-height: min(84vh, 100%);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: 0 24px 64px rgb(16 24 40 / 0.32);
  animation: fld-dlg-in var(--motion-slow) var(--motion-ease);
}

@keyframes fld-dlg-fade {
  from {
    opacity: 0;
  }
}

@keyframes fld-dlg-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fld-dlg-overlay,
  .fld-dlg {
    animation: none;
  }

  .sum-row {
    transition: none;
  }
}

.fld-dlg-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border-default);
}

.fld-dlg-head-copy {
  min-width: 0;
}

.fld-dlg-title {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 700;
}

.fld-dlg-sub {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

.fld-dlg-close {
  flex: none;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--c-text-tertiary);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--motion-base) var(--motion-ease);
}

.fld-dlg-close:hover:not(:disabled) {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.fld-dlg-close:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.fld-dlg-close:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.fld-dlg-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px;
}

.fld-dlg-field + .fld-dlg-field {
  margin-top: 16px;
}

.fld-dlg-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.fld-dlg-label {
  color: var(--c-text-primary);
  font-size: 12px;
  font-weight: 600;
}

.fld-dlg-count {
  color: var(--c-text-tertiary);
  font-size: 11px;
}

.fld-dlg-input,
.fld-dlg-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.65;
}

.fld-dlg-textarea {
  resize: vertical;
}

.fld-dlg-input:focus-visible,
.fld-dlg-textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -1px;
}

/* 唯讀：看得見、選得起來、改不動。灰底是「這是資料不是輸入框」的訊號。 */
.fld-dlg-input[readonly],
.fld-dlg-textarea[readonly] {
  border-color: var(--c-border-default);
  background: var(--c-surface-page);
  color: var(--c-text-secondary);
  cursor: default;
}

.fld-dlg-input:disabled,
.fld-dlg-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 勾選欄位（useHybrid 之類）：label 與框同一行，對齊 Inspector 的 CheckField。 */
.fld-dlg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.fld-dlg-check input:disabled {
  cursor: not-allowed;
}

.fld-dlg-blocked {
  margin: 5px 0 0;
  color: var(--c-warning);
  font-size: 11.5px;
  line-height: 1.6;
}

.fld-dlg-hint {
  margin: 5px 0 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  line-height: 1.6;
}

.fld-dlg-error {
  flex: none;
  margin: 0;
  padding: 9px 18px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-page);
  color: var(--c-danger);
  font-size: 12px;
  line-height: 1.6;
}

.fld-dlg-foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-page);
}

.fld-dlg-note {
  flex: 1 1 12em;
  min-width: 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .fld-dlg-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .fld-dlg {
    width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
  }
}

/* ══ 情境設定頁：Intent Router 完整模組當基底（#17911 第四輪）════════════
   第三輪在模組旁邊另做了一套唯讀畫布＋工具列（.scn-shell/.scn-bar/.scn-canvas/
   .scn-editor/.scn-testchat），結果是同一頁兩份流程圖、兩排工具列。那一套整個
   退場，只留容器：模組自帶版型，這裡不再覆寫它的內部。 */

.scn-module {
  min-height: 0;
}

/* ══ 情境設定頁：完整工作區（#17911 第三輪）════════════════════════════════
   從唯讀檢視器升級成 intent-router 那套「左工具箱／中畫布／右屬性」的編輯器。
   容器只負責給高度與邊界，內部版型沿用 WorkflowStudio.css（.irw-studio scope）。 */

/* 工具箱停用（積木情境）：看得見、按不下去、理由就寫在標題下面。
   不是藏起來——藏起來只會讓人覺得「這頁少了東西」，不知道是被擋住。 */
.irw-palette--disabled .irw-palette__hint {
  color: var(--c-warning);
}

.irw-palette--disabled .irw-palette__item {
  cursor: not-allowed;
  opacity: 0.45;
}

.irw-palette--disabled .irw-palette__item:hover {
  background: none;
}


/* Hallmark · component: knowledge-base card · genre: modern-minimal · theme: 沿用專案 --c-* token
 * states: default · hover · focus-visible · active · disabled · loading · error · success
 * 語彙來源：intent-router 節點卡（flowNodeStyle.ts ＋ WorkflowStudio.css:348-400）。
 * 色票不新發明——節點卡的 --kind-* 只定義在 intent-router 自己的 CSS（本頁吃不到），
 * 且知識庫的語意是「狀態」不是「型別」，所以改挑本專案既有的語意 token
 * （--c-accent／--c-success／--c-text-tertiary），順帶拿到深色模式。
 * ══════════════════════════════════════════════════════════════════════════ */

.kb-attached,
.kb-available {
  display: grid;
  /* minmax(0, …) 而不是裸 1fr：卡片裡有 code 與長名稱，裸 1fr 會被內容撐爆。 */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 卡片本體。節點卡的第 5 條：padding 10/12、gap 6、圓角 8、1px 邊框＋shadow-card。
   寬度不照抄 220px 固定——那是畫布上的絕對定位卡；這裡在清單裡，改用 grid 讓它
   在窄螢幕收成一欄，其餘留白比例照抄。 */
.kb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-border-default);
  border-left: 3px solid var(--kb-accent, var(--c-border-strong));
  border-radius: 8px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  transition:
    background-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease);
}

/* 左緣色＝狀態色，chip 用同一個變數，兩處同源不會各自漂移。 */
.kb-card[data-state="viewing"] {
  --kb-accent: var(--c-accent);
}

.kb-card[data-state="attached"] {
  --kb-accent: var(--c-success);
}

.kb-card[data-state="available"] {
  --kb-accent: var(--c-text-tertiary);
}

.kb-card:hover,
.kb-card.is-hover {
  background: var(--c-surface-hover);
}

/* 🚫 這裡曾經是 `.kb-card:focus-within { outline: 2px solid var(--c-accent) }`。
   5b162a6 想拿掉整圈藍框，只改了下面那條 .is-focused，這條原封不動——於是卡片裡
   任何元素一取得焦點（點過「移除」鈕就會），整圈 2px accent 外框就補回來，
   跟左緣條同時出現。這就是「改了但畫面沒變」的原因。

   直接刪掉不影響鍵盤可及性：卡片本身不可聚焦（是 <li>），真正需要焦點指示的是
   裡面的按鈕，它們有自己的 `.ui-btn:focus-visible { box-shadow: var(--c-focus-ring) }`。
   `.kb-card.is-focus` 那半條本來就是死碼——JSX 掛的是 is-focused，class token 不相等。 */

/* 檢視中的知識庫：選中語彙全站只有一種——accent-soft 底 ＋ 左緣 accent 條，
   與 sidebar 選中項（inset 2px）、語音選項、租戶卡（inset 3px）同一種表達。

   這裡的「條」用 .kb-card 基底那條 `border-left: 3px solid var(--kb-accent)`
   （[data-state="viewing"] 已經把 --kb-accent 設成 accent），不另外加
   `box-shadow: inset 3px 0 0`。同時用兩種會出事：
     · 3px 邊框＋3px 內陰影 = 6px，條會變兩倍寬
     · 自訂 box-shadow 會蓋掉基底的 var(--c-shadow-card)，這張卡就沒有卡片陰影，
       跟旁邊沒選中的卡不是同一種材質
     · 下面 `.kb-card:active { box-shadow: none }` 會在按住時把整條吃掉
   別處用 inset 是因為那些元素沒有現成的 border-left 可用；這裡有，就用它。 */
.kb-card.is-focused {
  background: var(--c-accent-soft);
}

.kb-card:active,
.kb-card.is-active {
  box-shadow: none;
}

/* chip：11px/700、白字實心底、圓角 6、padding 2/8、靠左不撐滿（第 2 條）。 */
.kb-card-chip {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--kb-accent, var(--c-border-strong));
  color: var(--c-text-inverse);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* 標題階：13.5px/700。層級靠字重與顏色拉開，不靠字級暴增（第 3 條）。
   **標題也要截斷**：節點卡的 label 都是短詞所以原版沒截，但知識庫名稱可以長到
   「(日本)福岡市育兒資訊與中小企業支援生成AI聊天機器人案」——不截的話標題吃掉
   三四行，卡片高度就不可預期了，第 4 條（高度可預期）也跟著破功。 */
.kb-card-title {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--c-text-primary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 預覽階：11.5px/400，固定兩行截斷 → 卡片高度可預期，一排並列不參差（第 4 條）。 */
.kb-card-preview {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.kb-card-id {
  color: var(--c-text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.kb-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.kb-card-done {
  color: var(--c-success);
  font-size: 11.5px;
  font-weight: 600;
}

/* 停用（共用情境唯讀）：按鈕自己的 .btn:disabled 已處理游標與透明度，這裡只把
   卡片整體壓下去一階，讓「這一區現在動不了」在掃視時就看得出來。 */
.kb-card:has(.btn:disabled) .kb-card-chip {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .kb-card {
    transition: none;
  }
}

/* 共用情境的中性告知（#17960）。原本這裡是三塊紅底警告＋停用按鈕；單一真源之後
   改成告知不阻擋，所以視覺上也降階：不是危險，是「你要知道這件事」。 */
.kb-shared-note {
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--c-border-default);
  border-left: 3px solid var(--c-info);
  border-radius: 8px;
  background: var(--c-surface-page);
  color: var(--c-text-secondary);
  font-size: 11.5px;
  line-height: 1.6;
}

/* 別顆 Agent 的私有情境：這是「不能改」不是「要知道」，左緣改用警告色。 */
.kb-shared-note.is-blocked {
  border-left-color: var(--c-warning);
  color: var(--c-text-primary);
}

.kb-shared-note code {
  color: var(--c-text-primary);
  font-size: 11px;
}
/* ── 監控 › 對話紀錄（Run 試打存檔回看，ConversationsPage）──────────────────
   清單 row 語彙照首頁租戶卡（hover 底色＋.home-row-chev 滑出）；動效一律用
   既有 motion token（--motion-fast/--motion-ease），不另刻 duration。 */
.tc-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tc-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tc-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
}

.tc-head p {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 12.5px;
}

.tc-table {
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
}

/* 清單六欄：時間／Agent／專案／輪數／標題／chevron。 */
.tc-cols,
.tc-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 56px minmax(0, 2fr) 20px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  text-align: start;
}

.tc-cols {
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tc-row {
  border: 0;
  border-bottom: 1px solid var(--c-border-default);
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.tc-row:last-child {
  border-bottom: 0;
}

.tc-row:hover {
  background: var(--c-surface-hover);
}

.tc-row:hover .home-row-chev {
  color: var(--c-text-primary);
  transform: translateX(2px);
}

.tc-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-cell-time {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.tc-cell-strong {
  color: var(--c-text-primary);
  font-weight: 700;
}

.tc-cell-turns {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.tc-cell-title {
  color: var(--c-text-secondary);
}

.tc-row-skel .ui-skel {
  height: 12px;
}

.tc-empty {
  padding: 28px 16px;
  color: var(--c-text-tertiary);
  font-size: 12.5px;
  text-align: center;
}

/* ─── 全域資源 › 成員（唯讀名單）────────────────────────────────────────
   刻意重用 .tc-list / .tc-table / .tc-empty / .tc-callout / .tc-cell-strong：
   同一種「清單頁」語彙只該有一套。這裡只補「成員」獨有的三件事：
   標題列右側的跳轉按鈕、五欄欄寬、狀態 chip。

   ⚠️ 列是 <div> 不是 <button>——這頁唯讀，沒有列層級的操作。因此
   **不要**幫它加 hover 底色或 chevron：那是「可點」的語彙，會讓人一直去點
   一列沒有反應的東西。 */
.mb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* 跳轉入口是 <a>（要能開新分頁），套 .ui-btn 後仍會吃到 anchor 的預設底線，
   看起來就不像按鈕。這裡明確關掉。 */
.mb-head .ui-btn {
  flex: none;
  gap: 6px;
  text-decoration: none;
}

/* 五欄：姓名／帳號／角色／部門／狀態。 */
.mb-cols,
.mb-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 1fr)
    minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  text-align: start;
}

.mb-cols {
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mb-row {
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-secondary);
  font-size: 12.5px;
}

.mb-row:last-child {
  border-bottom: 0;
}

.mb-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-cell-account {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.mb-row-skel .ui-skel {
  height: 12px;
}

/* 狀態 chip 直接用首頁那顆 .home-binding-status（含語意色 modifier）——
   同一個「狀態藥丸」語彙在兩頁必須長一樣，各做一份就是散裝的開始。 */

.mb-foot {
  margin: 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

@media (max-width: 720px) {
  /* 窄畫面收成三欄：部門與狀態退場，姓名／帳號／角色是辨識一個人的最小集合。 */
  .mb-cols,
  .mb-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
  }

  .mb-cols > span:nth-child(n + 4),
  .mb-row > span:nth-child(n + 4) {
    display: none;
  }

  .mb-head {
    flex-direction: column;
  }
}

.tc-callout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--c-border-default);
  border-left: 3px solid var(--c-warning);
  border-radius: 10px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  font-size: 12.5px;
}

.tc-pager {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tc-pager-info {
  color: var(--c-text-tertiary);
  font-size: 12px;
}

/* 詳情：左 transcript 泡泡、右「當時設定」卡。 */
.tc-detail-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-detail-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tc-detail-meta {
  overflow: hidden;
  color: var(--c-text-tertiary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 960px) {
  .tc-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tc-transcript {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
}

.tc-skel-bubble {
  height: 34px;
  border-radius: 10px;
}

.tc-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
}

.tc-config h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--c-text-primary);
}

.tc-config-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.tc-config-summary > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.tc-config-summary dt {
  flex: none;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.tc-config-summary dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 12px;
  font-weight: 600;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-config-json > summary {
  color: var(--c-text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.tc-config-json > summary:hover {
  color: var(--c-text-primary);
}

.tc-config-json pre {
  margin: 8px 0 0;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 8px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.tc-config-open {
  align-self: flex-start;
}

/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Agent Studio tokens · designed-as-app */
/* AI 快速驗證：功能清單是主體；沿用全站 token、ui-btn 與 ui-skel，不造第二套設計系統。 */
.health-check-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  overflow: auto;
  background: var(--c-surface-page);
}

.health-check-inner {
  width: 100%;
  padding: 36px 24px 72px;
}

.health-check-heading,
.health-check-report > header,
.health-check-card-title {
  display: flex;
  align-items: center;
}

.health-check-heading {
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border-default);
}
.health-check-heading h1 { min-width: 0; margin: 0 0 5px; overflow-wrap: anywhere; font-size: 26px; letter-spacing: -0.02em; }
.health-check-heading p { margin: 0; color: var(--c-text-secondary); }
.health-check-heading > span {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 999px;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.health-check-roster {
  overflow: clip;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
}
.health-check-list-head,
.health-check-agent-row,
.health-check-list--loading > li {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.5fr) auto;
  gap: 20px;
  align-items: center;
}
.health-check-list-head {
  padding: 10px 18px;
  color: var(--c-text-tertiary);
  background: var(--c-surface-sunken);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.health-check-list-head span:last-child { text-align: end; }
.health-check-list { margin: 0; padding: 0; list-style: none; }
.health-check-list > li + li { border-top: 1px solid var(--c-border-default); }
.health-check-list > li { min-width: 0; }
.health-check-agent-row {
  min-height: 72px;
  padding: 13px 18px;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.health-check-list > li.is-active > .health-check-agent-row { background: var(--c-surface-sunken); }
.health-check-agent-name { display: grid; min-width: 0; gap: 3px; }
.health-check-agent-name strong {
  overflow: hidden;
  color: var(--c-text-primary);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-check-agent-name span {
  overflow: hidden;
  color: var(--c-text-tertiary);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-check-agent-context { display: flex; min-width: 0; gap: 6px; align-items: center; flex-wrap: wrap; }
.health-check-project-chip,
.health-check-module-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  white-space: nowrap;
}
.health-check-project-chip {
  max-width: 220px;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  color: var(--c-text-primary);
  background: var(--c-surface-card);
  text-overflow: ellipsis;
}
.health-check-module-chip { color: var(--c-text-secondary); background: var(--c-surface-sunken); }
.health-check-agent-row > .ui-btn { justify-self: end; }

.health-check-list--loading > li { min-height: 72px; padding: 13px 18px; }
.health-check-list--loading > li + li { border-top: 1px solid var(--c-border-default); }
.health-check-skel-name { width: 58%; height: 14px; }
.health-check-skel-context { width: 72%; height: 22px; }
.health-check-skel-action { width: 80px; height: 30px; justify-self: end; }
.health-check-empty {
  display: grid;
  justify-items: start;
  gap: 7px;
  padding: 34px 24px;
  color: var(--c-text-secondary);
}
.health-check-empty svg { color: var(--c-text-tertiary); }
.health-check-empty strong { color: var(--c-text-primary); }
.health-check-empty p { margin: 0; }
.health-check-empty--error svg,
.health-check-empty--error strong { color: var(--c-danger); }

.health-check-inline-detail {
  padding: 18px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}
.health-check-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.health-check-progress li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--c-text-secondary);
  font-size: 12px;
}
.health-check-progress li span { width: 9px; height: 9px; border-radius: 50%; background: var(--c-border-strong); }
.health-check-progress li.is-current { color: var(--c-text-primary); font-weight: 700; }
.health-check-progress li.is-current span { background: var(--c-accent); box-shadow: 0 0 0 5px var(--c-accent-soft); }
.health-check-spin { animation: health-check-spin var(--motion-slow) linear infinite; }
@keyframes health-check-spin { to { transform: rotate(360deg); } }

.health-check-error { margin-bottom: 14px; padding: 12px 14px; color: var(--c-danger); border: 1px solid var(--c-danger); border-radius: 8px; background: var(--c-danger-soft); }
.health-check-report > header { gap: 10px; padding: 13px 15px; border-radius: 9px; }
.health-check-report > header.is-pass { color: var(--c-success); background: var(--c-success-soft); }
.health-check-report > header.is-fail { color: var(--c-danger); background: var(--c-danger-soft); }
.health-check-report h2, .health-check-report h3, .health-check-report p { margin: 0; }
.health-check-report h2 { font-size: 15px; }
.health-check-report > header p { margin-top: 3px; color: var(--c-text-secondary); }
.health-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.health-check-grid article { min-width: 0; padding: 14px; border: 1px solid var(--c-border-default); border-radius: 9px; background: var(--c-surface-card); }
.health-check-grid article.is-pass { border-color: var(--c-success-soft); }
.health-check-grid article.is-fail { border-color: var(--c-danger-soft); }
.health-check-card-title { gap: 8px; }
.health-check-grid article.is-pass .health-check-card-title { color: var(--c-success); }
.health-check-grid article.is-fail .health-check-card-title { color: var(--c-danger); }
.health-check-grid h3 { font-size: 13px; }
.health-check-grid pre { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-text-secondary); font: inherit; font-size: 12px; line-height: 1.5; }

.health-check-pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--c-text-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.health-check-pagination > div { display: flex; gap: 10px; align-items: center; }

@media (hover: hover) and (pointer: fine) {
  .health-check-list > li:not(.is-active) > .health-check-agent-row:hover {
    position: relative;
    z-index: 1;
    background: var(--c-surface-hover);
    box-shadow: var(--c-shadow-card);
    transform: translateY(-1px);
  }
}

@media (max-width: 760px) {
  .health-check-inner { padding: 26px 14px 72px; }
  .health-check-heading { align-items: flex-start; }
  .health-check-list-head { display: none; }
  .health-check-agent-row,
  .health-check-list--loading > li { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .health-check-agent-context,
  .health-check-skel-context { grid-column: 1 / -1; grid-row: 2; }
  .health-check-agent-row > .ui-btn,
  .health-check-skel-action { grid-column: 2; grid-row: 1; }
  .health-check-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-check-grid { grid-template-columns: 1fr; }
  .health-check-pagination { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .health-check-agent-row { transition: none; }
  .health-check-list > li:not(.is-active) > .health-check-agent-row:hover { transform: none; }
  .health-check-spin { animation: none; }
}


/* ══ 語音設定：聲音下拉、麥克風即時辨識、辨識結果（Claude Design「語音設定」）══
   色與動效一律走既有 --c-* / --motion-* token，不引入設計稿自帶的第二套色票。 */

.voice-picker { position: relative; max-width: 460px; }

.voice-picker-row { display: flex; align-items: center; gap: 9px; }

.voice-play {
  display: flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-default);
  border-radius: 50%;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.voice-play:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.voice-play:focus-visible { outline: none; box-shadow: var(--c-focus-ring); }

.voice-play--sm { width: 26px; height: 26px; }

.voice-picker-trigger {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.voice-picker-trigger:hover { border-color: var(--c-accent); }
.voice-picker-trigger:focus-visible { outline: none; box-shadow: var(--c-focus-ring); }

.voice-picker-current {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.voice-picker-name { font-size: 13px; font-weight: 700; }

.voice-picker-desc {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--c-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-picker-pop {
  position: absolute;
  top: 42px;
  right: 0;
  left: 43px;
  z-index: 30;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
  box-shadow: 0 12px 32px rgb(22 24 29 / 0.14);
  overflow: hidden;
  animation: ui-menu-in var(--motion-base) var(--motion-ease) backwards;
}

.voice-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-tertiary);
}

.voice-picker-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--c-text-primary);
  font-size: 13px;
  outline: none;
}

.voice-picker-list { max-height: 264px; overflow: auto; }

.voice-picker-group {
  margin: 0;
  padding: 7px 12px 5px;
  background: var(--c-surface-sunken);
  border-bottom: 1px solid var(--c-border-default);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* 一列 = 播放鍵（option 外）＋ option 本體。 */
.voice-opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-bottom: 1px solid var(--c-border-default);
}

.voice-opt-row:hover { background: var(--c-surface-hover); }

.voice-opt {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--c-border-default);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.voice-opt { cursor: pointer; }
.voice-opt.is-on { font-weight: 700; }

/* 鍵盤高亮（焦點留在搜尋框，所以不能靠 :focus-visible）。 */
.voice-opt.is-active { box-shadow: inset 2px 0 0 var(--c-accent); }
.voice-opt-row:has(.voice-opt.is-active) { background: var(--c-accent-soft); }

.voice-opt-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.voice-opt-name { font-size: 12.5px; font-weight: 700; color: var(--c-text-primary); }
.voice-opt-warn { font-size: 11px; color: var(--c-warning); }
.voice-opt-check { color: var(--c-accent); flex: none; }

.voice-picker-empty,
.voice-picker-note {
  margin: 0;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--c-text-muted);
}

.voice-picker-note {
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

@media (max-width: 720px) {
  .voice-picker-pop { left: 0; }
}


/* 語音設定卡片標題列與欄位標籤（對齊設計稿 語音設定.dc.html）。 */
.vs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vs-inuse {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.vs-field-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-secondary);
}

.vs-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* 稿的控制項圓角是 5px（卡片才 8–10px）——原本 9–11px 看起來太圓。 */
.voice-picker-trigger,
.voice-picker-search input,
.voice-picker-pop { border-radius: 5px; }
.voice-picker-pop { border-radius: 8px; }


/* ASR 辨識結果清單（設計稿「語音設定」辨識結果區；資料來自音檔上傳辨識）。 */
.asr-interim {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text-secondary);
}

.asr-caret { margin-left: 2px; color: var(--c-accent); font-weight: 700; }

.asr-results-head,
.asr-empty { border-top: 1px solid var(--c-border-default); }

.asr-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--c-surface-sunken);
}

.asr-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.asr-lines { margin: 0; padding: 0; list-style: none; }

.asr-line {
  padding: 11px 14px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.asr-line-text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--c-text-primary); }

.asr-hit {
  border-radius: 3px;
  padding: 0 3px;
  background: var(--c-success-soft);
  color: var(--c-success);
}

.asr-miss {
  border-radius: 3px;
  padding: 0 3px;
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.asr-line-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.asr-meta {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--c-surface-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  color: var(--c-text-tertiary);
}

.asr-fix-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--c-success-soft);
  color: var(--c-success);
  font-size: 11px;
  font-weight: 700;
}

.asr-raw {
  margin-top: 9px;
  border-left: 2px solid var(--c-border-strong);
  padding-left: 11px;
  overflow: hidden;
}

.asr-raw-text {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-text-tertiary);
}

.asr-empty { padding: 26px 16px; text-align: center; }
.asr-empty-title { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--c-text-primary); }

.asr-empty-body {
  max-width: 400px;
  margin: 5px auto 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--c-text-muted);
}

.vs-head-field { display: block; min-width: 200px; }
.vs-head-field .vs-field-label { margin-top: 0; }

.asr-panel {
  margin-top: 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--motion-base) var(--motion-ease);
}

.asr-panel.is-recording { border-color: var(--c-danger); }

.asr-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 16px;
  background: var(--c-surface-sunken);
}

.asr-panel.is-recording .asr-panel-head { background: var(--c-danger-soft); }

.asr-mic {
  display: flex;
  width: 52px;
  height: 52px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-default);
  border-radius: 50%;
  background: var(--c-surface-card);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition:
    background var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}

.asr-mic:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.asr-mic:focus-visible { outline: none; box-shadow: var(--c-focus-ring); }

.asr-mic.is-recording {
  border-color: var(--c-danger);
  background: var(--c-danger);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-danger) 18%, transparent);
}

.asr-panel-body { flex: 1; min-width: 0; }

.asr-panel-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.asr-panel-heading { font-size: 13.5px; font-weight: 700; color: var(--c-text-primary); }

.asr-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  font-size: 11px;
  font-weight: 700;
}

.asr-status.is-live { background: var(--c-danger-soft); color: var(--c-danger); }
.asr-status.is-connecting { background: var(--c-warning-soft); color: var(--c-warning); }

.asr-wave { margin-top: 8px; color: var(--c-accent); }

.asr-panel-hint,
.asr-panel-alt-hint {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--c-text-muted);
  line-height: 1.6;
}

.asr-panel-error { margin: 6px 0 0; font-size: 12px; color: var(--c-danger); }

.asr-panel-alt {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}


/* 左側圖示是真的可按的選檔入口（codex `#137061`）——有 hover 樣式就要真的能點。 */
.asr-mic:disabled { cursor: not-allowed; opacity: 0.55; }

/* 窄容器（Run 頁 ~721–900px、窄版設定卡）：固定 52px 圖示＋不換行按鈕會把中間
   說明欄壓成幾十像素（codex `#137216`）。改成換行、右側入口自成一列。 */
@media (max-width: 980px) {
  .asr-panel-head { flex-wrap: wrap; }
  .asr-panel-body { flex: 1 1 240px; }
  .asr-panel-alt {
    flex: 1 0 100%;
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }
}

/* ═══ ui-sidebar ═══════════════════════════════════════════════════════════
   設計稿 SoT：docs/design-refs/Agent-編輯-v2.dc.html
     :25 .ae-nav / :26 :hover / :27 .on / :28 .ae-navgrp / :105 <aside> / :141 底部卡

   稿裡的 .15s 一律換成 --motion-base（160ms，token 內最接近的一檔），
   顏色一律走 --c-sidebar-* token，不留硬編值。

   ⚠️ 選擇器刻意保留 `.ui-sidebar__nav button` 這條後代規則：
   知識庫那顆入口由 KnowledgeBaseNavEntry 提供，它只掛 .ui-navitem，
   靠這條吃到同一套樣式；未來若有別的元件 inline 進來也一樣受惠。 */
/* 稿的 aside 是 overflow:auto（它的項目少、裝得下）。我們項目較多，若讓整個
   aside 捲，底部專案卡會跟著捲走。改成 aside 固定視窗高、自己不捲，由
   .ui-sidebar__nav 內捲——brand 與專案卡因此永遠在固定位置。 */
/* sidebar 的高度與捲動（2026-08-14 修）
   原本 height:100svh 但 position:static —— 頁面內容比一個視窗高時（首頁改版後
   內容 1387px、視窗 812px），sidebar 只畫到 812px 就斷掉，下面露出頁面底色。
   改用 sticky：高度仍是一個視窗，但捲動時黏在視窗頂端，所以永遠滿版、
   也永遠看得到導覽。align-self:flex-start 是必要的——父層 flex 預設 stretch
   會把 sidebar 拉成內容高度，那樣 sticky 就失效。
   自身內容超過一個視窗時（項目多／視窗矮）由 overflow-y:auto 自己捲。 */
.ui-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  height: 100svh;
  flex: none;
  width: 214px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 13px 11px;
  border-right: 1px solid var(--c-sidebar-line);
  background: var(--c-sidebar-bg);
}

.ui-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 5px 12px;
}

.ui-sidebar__mark {
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--c-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

/* 中間文字區要 flex:1 + min-width:0，否則被 logo 與收合鈕夾住只剩 40px，
   「Agent Studio」會被折成兩行（實測過）。 */
.ui-sidebar__brand-text {
  min-width: 0;
  flex: 1;
}

.ui-sidebar__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-sidebar-lit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ui-sidebar__version {
  display: block;
  color: var(--c-sidebar-grp);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
}

.ui-navgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-navgroup__label {
  padding: 14px 10px 6px;
  color: var(--c-sidebar-grp);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 第一組的上留白由 brand 那塊給，避免頂部空一大截（稿 :114 padding-top:4px）。 */
.ui-navgroup__label:first-of-type {
  padding-top: 4px;
}

.ui-sidebar__nav button,
.ui-navitem {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--c-sidebar-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: start;
  transition:
    background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}

/* :not(.is-on) 不能省。稿裡 .ae-nav:hover 與 .ae-nav.on 特異性相同、靠後寫的
   .on 勝出；這裡多了一層後代選擇器，:hover 會變成 (0,3,1) 壓過 .is-on 的
   (0,2,1) —— 結果是「滑過選中項時它會掉回 hover 底色」。實測截到過這個缺陷。 */
.ui-sidebar__nav button:hover:not(:disabled):not(.is-on),
.ui-navitem:hover:not(:disabled):not(.is-on) {
  background: var(--c-sidebar-hover);
  color: var(--c-sidebar-lit);
}

/* 稿 :27 —— 選中項左緣那條 accent 用 inset box-shadow，不佔版面寬度，
   所以選中與未選中的文字不會位移。 */
.ui-sidebar__nav button.is-on,
.ui-navitem.is-on {
  background: var(--c-sidebar-on);
  box-shadow: inset 2px 0 0 var(--c-accent);
  color: #fff;
  font-weight: 700;
}

.ui-sidebar__nav button:disabled,
.ui-navitem:disabled {
  cursor: default;
  opacity: 0.45;
}

/* 側欄項目右側的計數 badge（稿：監控 › TeleAgent 綁定 帶待處理數）。
   琥珀色走 --c-amber，底色用同色低透明度——token 層沒有 amber-soft，
   這裡用 color-mix 由 token 導出，不新增硬編色。 */
.ui-navitem__badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-amber) 16%, transparent);
  color: var(--c-amber);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}

/* 收合時 badge 縮成一個點，不然 60px 寬塞不下數字。 */
.ui-sidebar.is-collapsed .ui-navitem__badge {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 6px;
  padding: 0;
  color: transparent;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-amber);
  font-size: 0;
}

.ui-sidebar.is-collapsed .ui-sidebar__nav button {
  position: relative;
}

.ui-sidebar__nav button svg,
.ui-navitem svg {
  flex: none;
}

/* flex:1 + overflow-y:auto 不能省：我們的導航項目比設計稿多（多了 AI 快速驗證、
   成員），810px 高的視窗下總高會超出，底部專案卡就被擠到視窗外。讓 nav 自己捲，
   brand 與專案卡才留在固定位置——這也是稿的視覺意圖（卡片永遠貼底）。 */
.ui-sidebar__nav {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
}

/* 底部專案切換器（稿 :141-148）。margin-top:auto 把它壓到底。 */
.ui-sidebar__project {
  margin-top: auto;
  padding-top: 16px;
}

.ui-sidebar__project-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--c-sidebar-card-line);
  border-radius: 11px;
  background: var(--c-sidebar-card);
  color: inherit;
  font-family: inherit;
  text-align: start;
}

/* 這張卡目前只是「你在哪個專案」的顯示，沒有接切換流程（是 div 不是 button）。
   原本留著 cursor:pointer 與 hover 邊框，等於告訴使用者可以點——點了卻沒反應
   （codex `#144009`）。等真的接上切換再把 affordance 加回來。 */

.ui-sidebar__project-mark {
  display: flex;
  width: 24px;
  height: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  font-size: 11px;
  font-weight: 800;
}

.ui-sidebar__project-body {
  min-width: 0;
  flex: 1;
}

.ui-sidebar__project-label {
  color: #565b63;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ui-sidebar__project-name {
  overflow: hidden;
  color: var(--c-sidebar-lit);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 專案卡的改名微互動（#19084 前置）。鉛筆常駐可聚焦、hover/focus 才浮現，
   避免在低頻操作上放常亮按鈕；編輯態沿用卡片內既有排版，只換 name 那行。 */
.ui-sidebar__project-rename {
  display: flex;
  width: 22px;
  height: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6b7280;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--motion-pop), background-color var(--motion-pop);
}

.ui-sidebar__project-card:hover .ui-sidebar__project-rename,
.ui-sidebar__project-rename:focus-visible {
  opacity: 1;
}

.ui-sidebar__project-rename:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}

.ui-sidebar__project-rename:focus-visible {
  outline: 2px solid var(--c-accent-deep);
  outline-offset: 1px;
}

.ui-sidebar__project-rename:active {
  transform: translateY(1px);
}

.ui-sidebar__project-rename-input {
  width: 100%;
  min-width: 0;
  padding: 1px 4px;
  border: 1px solid var(--c-accent-deep);
  border-radius: 6px;
  background: transparent;
  color: var(--c-sidebar-lit);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.ui-sidebar__project-rename-input:focus-visible {
  outline: none; /* 邊框本身就是聚焦指示（整列都是輸入態） */
}

.ui-sidebar__project-rename-input:disabled {
  opacity: 0.6;
}

.ui-sidebar__project-rename-hint {
  padding: 4px 2px 0;
  color: #6b7280;
  font-size: 10.5px;
}

.ui-sidebar__project-rename-hint.is-error {
  color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
  .ui-sidebar__project-rename {
    transition: none;
  }
}

/* ── 收合態 ──────────────────────────────────────────────────────────────
   稿沒有畫收合態。這裡的延伸原則：**只收掉文字、留下所有可點區域**，
   讓 icon 仍在原本的視覺欄位上（padding 左右對稱），避免收合後 icon 亂跳。
   分組標題整條隱藏（9.5px 的大寫小標縮成一欄毫無可讀性），改用組間距分隔。 */
.ui-sidebar.is-collapsed {
  width: 60px;
  padding: 13px 8px;
}

.ui-sidebar.is-collapsed .ui-sidebar__name,
.ui-sidebar.is-collapsed .ui-sidebar__version,
.ui-sidebar.is-collapsed .ui-navgroup__label,
.ui-sidebar.is-collapsed .ui-sidebar__project-label,
.ui-sidebar.is-collapsed .ui-sidebar__project-name,
.ui-sidebar.is-collapsed .ui-sidebar__project-rename,
.ui-sidebar.is-collapsed .ui-sidebar__project-rename-input,
.ui-sidebar.is-collapsed .ui-sidebar__project-rename-hint,
.ui-sidebar.is-collapsed .ui-sidebar__nav button > span,
.ui-sidebar.is-collapsed .ui-navitem > span {
  display: none;
}

.ui-sidebar.is-collapsed .ui-sidebar__brand,
.ui-sidebar.is-collapsed .ui-sidebar__nav button,
.ui-sidebar.is-collapsed .ui-navitem,
.ui-sidebar.is-collapsed .ui-sidebar__project-card {
  justify-content: center;
  padding-inline: 0;
}

.ui-sidebar.is-collapsed .ui-navgroup + .ui-navgroup {
  margin-top: 10px;
}

/* 知識庫分頁標題列（設計稿「知識庫綁定 v2」） */
.kb-tab-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.kb-tab-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.kb-tab-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--c-text-tertiary);
}
.kb-kbd {
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid rgb(255 255 255 / 0.35);
  opacity: 0.65;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

/* ── 當前知識庫卡（設計稿「知識庫綁定 v2」右欄第一塊 .kb-card.kb-panel）──────
   稿的四格統計這裡只畫得出三格，理由與缺的端點見
   src/knowledge-base/CurrentDatasetCard.tsx 檔頭與 docs/design-refs/kb-api-gaps.md。 */
.kb-cur {
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
  animation: kb-cur-in var(--motion-enter) both;
}

@keyframes kb-cur-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-medium));
  }
}

.kb-cur-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px 13px;
}

.kb-cur-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  /* 稿是 linear-gradient(140deg,#1B7FB8,#2AA6E8 60%,#7ED3F7)。前兩段正好等於
     --c-accent-strong 與 --c-accent；第三段的亮青沒有對應 token，用 accent
     混卡片底色導出，不為了一個漸層新增硬編色。 */
  background: linear-gradient(
    140deg,
    var(--c-accent-strong),
    var(--c-accent) 60%,
    color-mix(in srgb, var(--c-accent) 55%, var(--c-surface-card))
  );
  color: var(--c-surface-card);
}

.kb-cur-main {
  min-width: 0;
  flex: 1;
}

.kb-cur-name {
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-cur-sub {
  margin-top: 2px;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* <code> 只是為了讓 hash 有語意，字體已由 .kb-cur-sub 給 */
.kb-cur-sub code {
  font: inherit;
}

.kb-cur-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
}

.kb-cur-stats {
  display: flex;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

.kb-cur-stat {
  min-width: 0;
  flex: 1;
  padding: 9px 16px;
  border-right: 1px solid var(--c-border-default);
}

.kb-cur-stat:last-child {
  border-right: none;
}

.kb-cur-stat-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}

/* 稿把「索引完成」畫成綠字。只有全部完成才給綠——沒完成還是綠的，這格就不是狀態了。 */
.kb-cur-stat-value.is-ok {
  color: var(--c-success);
}

.kb-cur-stat-label {
  color: var(--c-text-muted);
  font-size: 10.5px;
}

/* 共用情境的告知（稿：統計列之後那條紫底 ⓘ 滿版條）。
   原本在左欄「已附加的知識庫」最上面——那一欄是索引，不該夾帶右欄那個知識庫的
   狀態說明。滿版無圓角：.kb-cur 有 overflow:hidden，靠外框裁圓角，跟統計列同一種
   收邊方式。
   稿的字色是 #4B3399，token 層沒有這一階；用 --c-info（#6d4ae0）配 --c-info-soft
   對比 5.3:1 過 AA。

   選擇器寫成 `.kb-cur .kb-cur-note` 而不是單一 class：舊的 `.tab-body p` 群組
   （styles.css 早期那條 catch-all）特異性 (0,1,1) 會壓過 (0,1,0)，字色被拉回
   --agent-text-muted。多一層祖先就贏，不必動那條 catch-all（它還餵著六七個畫面）。 */
.kb-cur .kb-cur-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-info-soft);
  color: var(--c-info);
  font-size: 11.5px;
  line-height: 1.55;
}

.kb-cur-note-icon {
  flex: none;
  margin-top: 1px;
}

.kb-cur-note code {
  font-family: var(--mono);
  font-size: 11px;
}

/* ── 附加知識庫彈窗（設計稿「知識庫綁定 v2」的 .kb-veil / .kb-modal）─────────
   取代原本鋪在頁面上的「可附加的知識庫」卡片牆。遮罩色與陰影沿用既有 dialog
   （.fld-dlg-overlay）的寫法——專案沒有 overlay / scrim 的色 token，
   不為了這一處新增一個。 */
.kb-pick-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 74px 24px 24px;
  background: rgb(16 24 40 / 0.34);
  backdrop-filter: blur(2px);
  animation: kb-pick-fade var(--motion-fast) var(--motion-ease);
}

.kb-pick {
  display: flex;
  width: min(640px, 100%);
  max-height: min(72vh, 100%);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 14px;
  background: var(--c-surface-card);
  box-shadow: 0 26px 70px rgb(16 24 40 / 0.28);
  animation: kb-pick-in var(--motion-pop) both;
}

@keyframes kb-pick-fade {
  from {
    opacity: 0;
  }
}

@keyframes kb-pick-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-medium));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kb-pick-veil,
  .kb-pick {
    animation: none;
  }
}

/* ① 搜尋列 */
.kb-pick-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border-default);
  color: var(--c-text-muted);
}

.kb-pick-search input {
  min-width: 0;
  flex: 1;
  border: none;
  background: none;
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.kb-pick-search input::placeholder {
  color: var(--c-text-muted);
}

/* search 型別的原生清除鈕與自訂的那顆會並排，關掉原生的 */
.kb-pick-search input::-webkit-search-cancel-button {
  display: none;
}

.kb-pick-esc {
  flex: none;
  padding: 2px 6px;
  border: 1px solid var(--c-border-default);
  border-radius: 6px;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
}

/* ② 篩選 chips */
.kb-pick-chips {
  display: flex;
  overflow-x: auto;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border-default);
}

.kb-chip {
  padding: 4px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 99px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.kb-chip:hover {
  border-color: var(--c-border-strong);
  color: var(--c-text-primary);
}

.kb-chip.is-on {
  border-color: var(--c-text-primary);
  background: var(--c-text-primary);
  color: var(--c-surface-card);
}

/* ③ 結果列 */
.kb-pick-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.kb-prow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-border-default);
  transition: background var(--motion-fast) var(--motion-ease);
}

.kb-prow:first-child {
  border-top: none;
}

.kb-prow:hover,
.kb-prow.is-active {
  background: var(--c-surface-hover);
}

/* 鍵盤選中的那一列要比 hover 更明確——只靠底色分不出「滑鼠剛好經過」與「⏎ 會附加這個」 */
.kb-prow.is-active {
  box-shadow: inset 2px 0 0 var(--c-accent);
}

.kb-prow-icon {
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}

.kb-prow-icon.is-on {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.kb-prow-main {
  min-width: 0;
  flex: 1;
}

.kb-prow-name {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-prow-meta {
  display: block;
  overflow: hidden;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 已附加＝綠底，hover 轉紅：這顆按鈕在已附加狀態下按下去是「移除」，
   長得跟未附加時一樣的話，使用者不會知道自己正要拆掉綁定。 */
.kb-prow-toggle.is-on {
  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-border-default));
  background: var(--c-success-soft);
  color: var(--c-success);
}

.kb-prow-toggle.is-on:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border-default));
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

/* ④ 空狀態 */
.kb-pick-empty {
  padding: 44px 20px;
  text-align: center;
}

.kb-pick-empty strong {
  display: block;
  color: var(--c-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.kb-pick-empty p {
  margin: 4px 0 0;
  color: var(--c-text-muted);
  font-size: 12px;
}

/* ⑤ 底部 */
.kb-pick-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-sunken);
}

.kb-pick-count {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.kb-pick-hint {
  margin-inline-start: auto;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

/* ══ 全域知識庫管理頁（設計稿「全域知識庫管理」）══════════════════════════
   稿是三欄：暗色側欄（StudioSidebar 已提供）＋ 288px 名冊 ＋ 主區。
   這裡只畫後兩欄。選中態一律左緣 accent 條（inset 3px），不是稿的整圈框——
   全站已統一，稿的 .km-kb.on 整圈邊框刻意不照做。 */
.km-page {
  display: grid;
  min-height: 0;
  grid-template-columns: 288px minmax(0, 1fr);
  flex: 1;
}

@media (max-width: 900px) {
  .km-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 左欄：名冊 ─────────────────────────────────────────────── */
.km-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.km-list-head {
  flex: none;
  padding: 13px 13px 11px;
  border-bottom: 1px solid var(--c-border-default);
}

.km-list-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.km-list-title strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.km-count {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.km-ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-tertiary);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.km-ico:hover:not(:disabled) {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.km-ico:disabled {
  cursor: default;
  opacity: 0.45;
}

.km-spin {
  animation: km-spin var(--motion-spin, 900ms) linear infinite;
}

@keyframes km-spin {
  to {
    transform: rotate(360deg);
  }
}

.km-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-muted);
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.km-search:focus-within {
  border-color: var(--c-accent);
  box-shadow: var(--c-ring);
}

.km-search input {
  min-width: 0;
  flex: 1;
  border: none;
  background: none;
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
}

.km-search input::-webkit-search-cancel-button {
  display: none;
}

.km-search--sm {
  width: 210px;
  padding-block: 5px;
}

.km-search-clear {
  display: inline-flex;
  flex: none;
  border: none;
  background: none;
  color: var(--c-text-muted);
  cursor: pointer;
}

.km-search-clear:hover {
  color: var(--c-text-primary);
}

.km-new {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
/* 排程爬蟲入口：它是**導覽**（去另一個頁面），不是對名冊做事的動作。
   原本跟「建立知識庫」並排在名冊頭部，兩種語意互相搶注意力、寬度也對不齊
   （2026-08-19 使用者回報「很難看」）。改成名冊底部的文字連結。 */
.km-crawl-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 13px;
  border: none;
  border-top: 1px solid var(--c-border-default);
  background: transparent;
  color: var(--c-text-tertiary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}
.km-crawl-link:hover {
  background: var(--c-surface-hover);
  color: var(--c-accent-deep);
}
/* 尾端的箭頭推到最右，讓它讀起來像「往前走」而不是一顆按鈕。 */
.km-crawl-link > svg:last-child {
  margin-left: auto;
}

.km-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--motion-slow) var(--motion-ease-io),
    opacity var(--motion-base) var(--motion-ease);
}

.km-drawer.is-open {
  max-height: 460px;
  opacity: 1;
}

.km-newform {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 8px;
}

.km-newform-actions {
  display: flex;
  gap: 7px;
}

.km-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.km-input:focus {
  border-color: var(--c-accent);
  box-shadow: var(--c-ring);
}

.km-input--num {
  width: 56px;
  flex: none;
  font-family: var(--mono);
  text-align: center;
}

.km-ta {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-card);
  color: var(--c-text-primary);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.65;
  outline: none;
  resize: vertical;
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.km-ta:focus {
  border-color: var(--c-accent);
  box-shadow: var(--c-ring);
}

.km-list-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 7px;
}

.km-kb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline-end: 8px;
  border-radius: 10px;
  transition: background var(--motion-fast) var(--motion-ease);
}

.km-kb:hover {
  background: var(--c-surface-hover);
}

.km-kb:hover .km-kbact,
.km-kb:focus-within .km-kbact {
  opacity: 1;
}

/* 選中＝左緣 accent 條（全站統一），不是稿的整圈框 */
.km-kb.is-on {
  background: var(--c-accent-soft);
  box-shadow: inset 3px 0 0 var(--c-accent);
}

.km-kb-main {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 3px 9px 11px;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.km-kb-icon {
  display: flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
}

.km-kb.is-on .km-kb-icon {
  background: var(--c-surface-card);
  color: var(--c-accent-strong);
}

.km-kb-text {
  min-width: 0;
  flex: 1;
}

.km-kb-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.km-kb-id {
  display: block;
  margin-top: 3px;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10px;
}

.km-kbact {
  display: flex;
  flex: none;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-ease);
}

.km-link {
  border: none;
  background: none;
  padding: 0;
  color: var(--c-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
}

.km-link:hover:not(:disabled) {
  color: var(--c-accent-strong);
}

.km-link.is-danger:hover:not(:disabled) {
  color: var(--c-danger);
}

.km-link:disabled {
  cursor: default;
  opacity: 0.5;
}

.km-list-foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 13px;
  border-top: 1px solid var(--c-border-default);
}

.km-list-foot button {
  border: 1px solid var(--c-border-default);
  border-radius: 7px;
  background: var(--c-surface-card);
  padding: 1px 8px;
  color: var(--c-text-tertiary);
  cursor: pointer;
}

.km-list-foot button:disabled {
  cursor: default;
  opacity: 0.4;
}

.km-pager-at {
  color: var(--c-text-tertiary);
  font-family: var(--mono);
  font-size: 11.5px;
}

/* ── 主區 ───────────────────────────────────────────────────── */
.km-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.km-blank {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 60px 20px;
  color: var(--c-text-muted);
  text-align: center;
}

.km-blank strong {
  color: var(--c-text-secondary);
  font-size: 13px;
}

.km-blank p {
  margin: 0;
  font-size: 12px;
}

.km-head {
  display: grid;
  flex: none;
  align-items: start;
  gap: 0 12px;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
  grid-template-columns: minmax(0, 1fr) auto;
}

.km-head-main {
  min-width: 0;
}

.km-head-title {
  overflow: hidden;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-head-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  color: var(--c-text-muted);
  font-size: 11px;
}

.km-head-meta code {
  font-family: var(--mono);
}

.km-head-desc {
  overflow: hidden;
  color: var(--c-text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-head-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding-top: 3px;
}

.km-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border-default));
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.km-tabs {
  display: flex;
  overflow-x: auto;
  align-items: center;
  gap: 22px;
  margin-top: 9px;
  grid-column: 1 / -1;
}

.km-tab {
  position: relative;
  padding: 11px 3px 12px;
  border: none;
  background: none;
  color: var(--c-text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--motion-base) var(--motion-ease);
}

.km-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform var(--motion-tab);
}

.km-tab:hover {
  color: var(--c-text-primary);
}

.km-tab.is-on {
  color: var(--c-accent);
  font-weight: 700;
}

.km-tab.is-on::after {
  transform: scaleX(1);
}

.km-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.km-pane {
  animation: km-pane-in var(--motion-enter) both;
}

@keyframes km-pane-in {
  from {
    opacity: 0;
    transform: translateY(var(--distance-small, 4px));
  }
}

.km-pane--pad {
  padding: 16px 20px 22px;
}

.km-pane--narrow {
  max-width: 660px;
}

/* ── 文件分頁 ───────────────────────────────────────────────── */
.km-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.km-segs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--c-surface-sunken);
}

.km-seg {
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--c-text-tertiary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.km-seg:hover {
  color: var(--c-text-primary);
}

.km-seg.is-on {
  border-color: var(--c-border-default);
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
  color: var(--c-text-primary);
}

.km-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
}

.km-upload {
  margin: 0 20px 12px;
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
}

.km-upload-hint {
  margin: 0 0 10px;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.km-drops {
  display: flex;
  gap: 12px;
}

.km-drop {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px;
  border: 1.5px dashed var(--c-border-strong);
  border-radius: 11px;
  background: var(--c-surface-sunken);
  color: var(--c-accent);
  cursor: pointer;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease);
}

.km-drop:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

.km-drop input[type="file"] {
  display: none;
}

.km-drop-label {
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.km-drop-exts {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
}

.km-crawl {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.km-crawl .km-input:first-child {
  min-width: 180px;
  flex: 1;
}

.km-crawl-label {
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.km-credit {
  margin: 7px 0 0;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.km-table {
  overflow: hidden;
  margin: 0 20px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
}

.km-thead,
.km-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
}

.km-thead {
  background: var(--c-surface-sunken);
  padding-block: 8px;
  color: var(--c-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.km-row {
  border-top: 1px solid var(--c-border-default);
  transition: background var(--motion-fast) var(--motion-ease);
}

.km-row:hover {
  background: var(--c-surface-hover);
}

.km-col-name {
  display: flex;
  min-width: 180px;
  flex: 1;
  align-items: center;
  gap: 9px;
}

.km-col-st {
  width: 62px;
  flex: none;
}

.km-col-num {
  width: 74px;
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  text-align: end;
}

.km-col-at {
  width: 104px;
  flex: none;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
  text-align: end;
}

.km-col-act {
  width: 48px;
  flex: none;
  text-align: end;
}

.km-type {
  display: flex;
  min-width: 46px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.km-doc-name {
  overflow: hidden;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-doc-name:hover:not(:disabled) {
  text-decoration: underline;
}

.km-doc-name:disabled {
  cursor: default;
}

.km-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.km-badge.is-success {
  background: var(--c-success-soft);
  color: var(--c-success);
}

.km-badge.is-warning {
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.km-badge.is-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.km-badge.is-info {
  background: var(--c-info-soft);
  color: var(--c-info);
}

.km-badge.is-score {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-family: var(--mono);
}

.km-empty {
  margin: 0;
  padding: 34px 16px;
  color: var(--c-text-muted);
  font-size: 12px;
  text-align: center;
}

.km-foot-note {
  margin: 0 20px 22px;
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.km-notice {
  margin: 0 20px 8px;
  color: var(--c-text-secondary);
  font-size: 11.5px;
}

.km-notice.is-failed {
  color: var(--c-danger);
}

/* ── 搜索 / 庫設定分頁 ──────────────────────────────────────── */
.km-card {
  padding: 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
}

.km-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.km-card-desc {
  margin: 3px 0 0;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.km-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  flex-wrap: wrap;
}

.km-searchbar .km-input:first-child {
  min-width: 220px;
  flex: 1;
}

.km-topk {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
}

.km-hits {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 13px;
}

.km-hit {
  padding: 12px 13px;
  border: 1px solid var(--c-border-default);
  border-radius: 11px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
}

.km-hit-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.km-hit-doc {
  overflow: hidden;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-hit-seg {
  margin-inline-start: auto;
  flex: none;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.km-hit-text {
  margin: 0;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.km-field {
  display: block;
  margin-top: 11px;
}

.km-field > span {
  display: block;
  margin-bottom: 4px;
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.km-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.km-card-actions .km-notice {
  margin: 0;
}

.km-danger-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--c-danger) 35%, var(--c-border-default));
  border-radius: 12px;
  background: var(--c-danger-soft);
}

.km-danger-text {
  min-width: 0;
  flex: 1;
  color: var(--c-danger);
}

.km-danger-text strong {
  font-size: 12.5px;
  font-weight: 700;
}

.km-danger-text p {
  margin: 2px 0 0;
  font-size: 11.5px;
}

/* 有 mutation 在飛時整塊拖放區停用（上傳／刪檔／爬取都不可逆，一次做一件） */
.km-drop.is-busy {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

/* ── 文檔的父文本／子文本 Dialog（設計稿 .km-veil / .km-modal）───────────── */
.km-row.is-clickable {
  cursor: pointer;
}

.km-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgb(16 24 40 / 0.36);
  backdrop-filter: blur(2px);
  animation: km-veil-fade var(--motion-fast) var(--motion-ease);
}

.km-modal {
  display: flex;
  width: min(760px, 100%);
  max-height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border-default);
  border-radius: 16px;
  background: var(--c-surface-card);
  box-shadow: 0 28px 76px rgb(16 24 40 / 0.3);
  animation: km-modal-pop var(--motion-pop) both;
}

@keyframes km-veil-fade {
  from {
    opacity: 0;
  }
}

@keyframes km-modal-pop {
  from {
    opacity: 0;
    transform: translateY(var(--distance-medium));
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-veil,
  .km-modal {
    animation: none;
  }
}

.km-modal-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 11px;
  padding: 16px 18px 13px;
}

.km-modal-icon {
  display: flex;
  width: 30px;
  height: 30px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}

.km-modal-title {
  min-width: 0;
  flex: 1;
}

.km-modal-title h2 {
  overflow: hidden;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.km-modal-title p {
  margin: 2px 0 0;
  color: var(--c-text-tertiary);
  font-size: 12px;
}

.km-iso {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.km-iso:hover:not(:disabled) {
  background: var(--c-surface-hover);
  color: var(--c-text-primary);
}

.km-iso.is-danger:hover:not(:disabled) {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.km-iso:disabled {
  cursor: default;
  opacity: 0.4;
}

.km-iso--sm {
  width: 22px;
  height: 22px;
}

.km-modal-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 0 18px 12px;
  color: var(--c-text-tertiary);
  font-size: 11.5px;
  flex-wrap: wrap;
}

.km-modal-meta code {
  color: var(--c-text-primary);
  font-family: var(--mono);
}

.km-modal-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  color: var(--c-text-secondary);
  font-weight: 600;
}

/* toggle：稿是 38×21，子文本那顆 32×18 */
.km-switch {
  display: block;
  width: 38px;
  height: 21px;
  flex: none;
  padding: 2px;
  border: none;
  border-radius: 99px;
  background: var(--c-border-strong);
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease);
}

.km-switch > span {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 99px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow);
  transition: transform var(--motion-base) var(--motion-ease-io);
}

.km-switch.is-on {
  background: var(--c-accent);
}

.km-switch.is-on > span {
  transform: translateX(17px);
}

.km-switch:disabled {
  cursor: default;
  opacity: 0.5;
}

.km-switch--sm {
  width: 32px;
  height: 18px;
}

.km-switch--sm > span {
  width: 14px;
  height: 14px;
}

.km-switch--sm.is-on > span {
  transform: translateX(14px);
}

.km-modal-tools {
  display: flex;
  flex: none;
  gap: 9px;
  padding: 0 18px 13px;
  border-bottom: 1px solid var(--c-border-default);
}

.km-modal-tools .km-search {
  min-width: 0;
  flex: 1;
}

.km-modal-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 14px 18px;
  background: var(--c-surface-page);
}

.km-chunk {
  overflow: hidden;
  flex: none;
  border: 1px solid var(--c-border-default);
  border-radius: 11px;
  background: var(--c-surface-card);
}

/* 停用的父文本淡掉——它還在，但檢索時不會被撈到 */
.km-chunk.is-off {
  opacity: 0.55;
}

.km-chunk-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
}

.km-badge.is-plain {
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-family: var(--mono);
}

.km-chunk-tokens {
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.km-chunk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.km-chunk-swlabel {
  width: 26px;
  color: var(--c-text-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.km-chunk-text {
  margin: 0;
  padding: 0 12px 11px;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  line-height: 1.75;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.km-chunk-editor {
  padding: 0 12px 11px;
}

.km-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.km-editor-len {
  margin-inline-start: auto;
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.km-ta--sm {
  font-size: 12px;
}

.km-kids-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--c-border-default);
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 700;
}

.km-kids-head code {
  color: var(--c-text-muted);
  font-family: var(--mono);
}

.km-link.is-accent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  color: var(--c-accent-strong);
}

.km-kids {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 12px 12px;
}

.km-child {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-sunken);
}

.km-child-main {
  min-width: 0;
  flex: 1;
}

.km-child-text {
  min-width: 0;
  flex: 1;
  color: var(--c-text-secondary);
  font-size: 12px;
  line-height: 1.65;
  text-wrap: pretty;
  white-space: pre-wrap;
}

.km-child-actions {
  display: flex;
  flex: none;
  gap: 1px;
}

.km-modal-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-border-default);
  background: var(--c-surface-card);
}

.km-modal-count {
  color: var(--c-accent-strong);
  font-size: 12px;
  font-weight: 600;
}

.km-modal-subcount {
  color: var(--c-text-muted);
  font-size: 11.5px;
}

.km-modal-close {
  margin-inline-start: auto;
}

/* 文檔分頁列（清單底部：總數 + 上一頁／下一頁） */
.km-page-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 22px;
}

.km-page-foot .km-foot-note {
  margin: 0;
}

.km-page-foot .km-pager {
  margin-inline-start: auto;
}

.km-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.km-pager button {
  border: 1px solid var(--c-border-default);
  border-radius: 7px;
  background: var(--c-surface-card);
  padding: 1px 8px;
  color: var(--c-text-tertiary);
  cursor: pointer;
}

.km-pager button:disabled {
  cursor: default;
  opacity: 0.4;
}

/* scenario-meta 抽屜（codex #277 R13688：is-drawer/is-open 原本沒有任何對應 CSS，
   流程圖版型下「收起」根本沒收、關閉鈕只拿掉標題）。
   規則：收起時 hidden 級隱藏（保持掛載——複合儲存靠 ref 呼叫它的 save()，
   unmount 等於情境基本設定沒存到，見 AgentSettings.tsx #17911 註解）；
   開啟時以固定置中面板呈現。 */
/* 情境設定 v2：情境基本設定攤平為頁尾常駐卡（原 fixed Dialog 已移除，
   多重 Dialog 是該稿要解的核心問題）。 */
.scenario-meta-card {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 16px;
}
.scenario-meta-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-default);
}
.scenario-meta-card-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}
.scenario-meta-card-head code {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--c-text-muted);
}
.scenario-meta-card > .scn-meta,
.scenario-meta-card > * {
  padding: 12px 16px;
}
.scenario-meta-card > .scenario-meta-card-head {
  padding: 12px 16px;
}

/* 試聽播放中的等化器（稿「Agent 編輯 ASR」：試聽時要看得到聲音在動） */
.voice-eq {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  margin-left: 8px;
}
.voice-eq span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--c-accent);
  animation: ui-eq var(--motion-eq) ease-in-out infinite;
}
/* 選單列版（codex `#144589`）：配 .voice-play--sm 的 26px 播放鍵縮一號，
   靠右擺在名稱與勾勾之間。 */
.voice-eq--sm {
  height: 12px;
  margin-left: auto;
  margin-right: 8px;
}
.voice-eq--sm span {
  width: 2px;
}
@keyframes ui-eq {
  0%, 100% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
}
/* 比照同款的 .ae-bars.is-live .ae-bar（agentEditLayout.css）：降低動態偏好下
   停掉無限循環，留一組靜態聲紋當「正在播放」的標記（codex `#144534`）。 */
@media (prefers-reduced-motion: reduce) {
  .voice-eq span {
    animation: none;
  }
}

/* ── 全域知識庫 › Audio QA 分頁 ────────────────────────────────────────────
   版位沿用 km-* 表格（.km-table/.km-thead/.km-row），這裡只補這個分頁自己
   需要的東西：狀態 pill、選中列的左緣條、詳情面板與上傳視窗。
   顏色一律走 token，沒有任何硬編色值。 */

.km-aq-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.km-aq-hint {
  flex: 1;
  min-width: 220px;
  margin: 0;
  font-size: 12px;
  color: var(--c-text-tertiary);
}
.km-aq-bar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.km-aq-polling {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-tertiary);
}

/* 進行中的脈動點：只是「還在跑」的訊號，不表達成敗，所以用中性的 accent。 */
.km-aq-pulse {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--c-accent);
  animation: km-aq-pulse var(--motion-blink) ease-in-out infinite;
}
@keyframes km-aq-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.km-aq-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--c-border-default);
  border-radius: 99px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.km-aq-badge.is-ok {
  border-color: var(--c-ok);
  background: var(--c-ok-soft);
  color: var(--c-ok);
}
.km-aq-badge.is-bad {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}
.km-aq-badge.is-warn {
  border-color: var(--c-amber);
  background: var(--c-amber);
  color: var(--c-amber-fg);
}
.km-aq-badge.is-accent {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}

.km-aq-col-pick {
  width: 28px;
  flex: none;
  display: flex;
  align-items: center;
}
.km-aq-col-prog {
  width: 64px;
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--c-text-tertiary);
}
.km-aq-cat {
  margin-left: 8px;
  font-size: 11px;
  color: var(--c-text-tertiary);
}

/* 選中列：**只有**左緣一條 accent，不動底色——底色已經被 hover 佔走，
   再疊一層就分不出「滑過」與「選中」（codex `#145525`：第一版註解這樣寫、
   規則卻還是設了 background，自相矛盾）。 */
.km-row.is-on {
  position: relative;
}
.km-row.is-on::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c-accent);
}

.km-aq-detail {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
}
.km-aq-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.km-aq-detail-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.km-aq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 10px;
}
.km-aq-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.km-aq-meta dt {
  font-size: 11.5px;
  color: var(--c-text-tertiary);
}
.km-aq-meta dd {
  margin: 0;
  font-size: 12px;
  color: var(--c-text-secondary);
}
.km-aq-audio {
  width: 100%;
  margin-bottom: 10px;
}
.km-aq-block {
  margin-top: 12px;
}
.km-aq-block h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--c-text-tertiary);
}
.km-aq-transcript {
  max-height: 190px;
  overflow-y: auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--c-surface-sunken);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.km-aq-qa {
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.km-aq-qa li {
  padding: 9px 11px;
  border: 1px solid var(--c-border-default);
  border-radius: 9px;
  background: var(--c-surface-sunken);
}
.km-aq-qa p {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.6;
}
.km-aq-qa p:last-child {
  margin-bottom: 0;
}
.km-aq-qa-key {
  margin-right: 6px;
  color: var(--c-text-tertiary);
  font-weight: 600;
}

/* 遮罩用既有的 .km-veil，這裡只定義視窗本體 */
.km-aq-modal {
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 18px 20px 16px;
  border: 1px solid var(--c-border-default);
  border-radius: 14px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  /* 與知識庫頁其他彈窗同一支（styles.css:12150），不另立一套進場動效 */
  animation: km-modal-pop var(--motion-pop) both;
}
.km-aq-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.km-aq-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
/* 真正的 file input 藏起來，但**不是** display:none——那樣鍵盤與讀屏會完全
   拿不到它；用尺寸壓到 0 保留在無障礙樹上。 */
.km-aq-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.km-aq-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 18px 12px;
  border: 1px dashed var(--c-border-strong);
  border-radius: 12px;
  background: var(--c-surface-sunken);
  color: var(--c-text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.km-aq-drop:hover:not(:disabled) {
  border-color: var(--c-accent);
}
.km-aq-drop small {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--c-text-tertiary);
}
.km-aq-files {
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.km-aq-files li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--c-surface-sunken);
  font-size: 12px;
}
.km-aq-files li span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.km-aq-files li small {
  color: var(--c-text-tertiary);
  font-family: var(--mono);
  font-size: 11px;
}
.km-aq-uploading {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--c-text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .km-aq-pulse,
  /* 既有那條 reduced-motion 規則只涵蓋 .km-modal，這個視窗是另一個 class，
     不一起列進來就還是會播進場動畫（codex `#145539`）。 */
  .km-aq-modal {
    animation: none;
  }
}

/* ── 情境設定 v2：頁內「目前使用的情境」卡與唯讀警示條 ─────────────────── */
.scn-current-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.scn-current-copy {
  flex: 1;
  min-width: 190px;
}
.scn-current-copy h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.scn-current-copy p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--c-text-tertiary);
}
.scn-current-value {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: min(400px, 100%);
  padding: 9px 12px;
  border: 1px solid var(--c-border-default);
  border-radius: 10px;
  background: var(--c-surface-card);
}
.scn-current-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}
.scn-current-text {
  min-width: 0;
  flex: 1;
}
.scn-current-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scn-current-text code {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c-text-muted);
}
.scn-readonly-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 16px;
  border: 1px solid var(--c-warning-soft);
  border-radius: 12px;
  background: var(--c-warning-soft);
  color: var(--c-warning);
  flex-wrap: wrap;
}
.scn-readonly-bar > svg {
  flex: none;
  margin-top: 2px;
}
.scn-readonly-copy {
  min-width: 240px;
  flex: 1;
}
.scn-readonly-copy strong {
  font-size: 13px;
  font-weight: 700;
}
.scn-readonly-copy p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--c-text-secondary);
}
.scn-readonly-cta {
  flex: none;
  align-self: center;
}

/* 情境設定 v2：工具列 ··· popover */
.scn-more {
  position: relative;
  display: inline-flex;
}
.scn-more-pop {
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: 230px;
}
.scn-more-pop .ui-pop__row {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.scn-more-pop .ui-pop__row small {
  font-size: 10.5px;
  color: var(--c-text-muted);
}

/* dev server 的分支標示：借用版號小字的位置，但要一眼看出「這不是版號」。 */
.ui-sidebar__version.is-dev {
  font-family: var(--mono);
  color: var(--c-amber-fg, #7c4a03);
  background: var(--c-amber, #fcefd1);
  border-radius: 5px;
  padding: 1px 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 空狀態 v2：「這個專案還沒有 Agent」（設計稿「空狀態與錯誤頁 v2」1b）─────
   稿的主張是「空狀態變成第一步」——原本一張白卡只講「沒有資料」，使用者得先
   理解系統架構才知道下一步。改成直接列可點的樣板。
   數值取自稿（不是目測）：標題 21px/800、卡 grid repeat(3,1fr) gap 12、
   glyph 32px/radius 10、hover ring 3px rgba(42,166,232,.18) + translateY(-2px)。 */
.es-empty {
  max-width: 760px;
  padding: 4px 0 8px;
}
.es-empty__title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-text-primary);
}
.es-empty__lede {
  margin: 6px 0 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--c-text-secondary);
  text-wrap: pretty;
}
.es-empty__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-text-tertiary);
}
/* 稿把 UUID 從標題下的長字串降級成可點複製的小 chip。 */
.es-idchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border: none;
  border-radius: 6px;
  background: var(--c-surface-sunken);
  color: var(--c-text-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
  transition:
    background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}
.es-idchip:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}
.es-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 16px;
}
@media (max-width: 860px) {
  .es-tpl-grid {
    grid-template-columns: 1fr;
  }
}
.es-tpl {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 15px 14px;
  border: 1px solid var(--c-border-default);
  border-radius: 12px;
  background: var(--c-surface-card);
  box-shadow: var(--c-shadow-card);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
.es-tpl:hover {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-ring-color, rgba(42, 166, 232, 0.18));
  transform: translateY(-2px);
}
.es-tpl:focus-visible {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-ring-color, rgba(42, 166, 232, 0.18));
}
.es-tpl--skeleton {
  min-height: 168px;
  background: var(--c-surface-sunken);
  border-style: dashed;
  cursor: default;
  animation: es-skel 1.4s ease-in-out infinite;
}
@keyframes es-skel {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.es-tpl__glyph {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
}
.es-tpl__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-primary);
}
.es-tpl__desc {
  flex: 1;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-tertiary);
  text-wrap: pretty;
}
.es-tpl__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--c-text-muted);
}
.es-tpl__cta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-accent-deep);
}
.es-empty__nolist {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--c-text-tertiary);
}
.es-empty__alt {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-border-default);
}
/* 稿的次要路徑是虛線邊框鈕（與主動作明顯分層）。 */
.es-alt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px dashed var(--c-border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--c-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease);
}
.es-alt-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-deep);
  background: var(--c-accent-soft);
}
/* 三步預告：讓使用者在點下去之前知道後面還有語音與知識庫要設。 */
.es-steps {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 0 0;
  list-style: none;
}
.es-steps > li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 200px;
}
.es-steps__n {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--c-surface-sunken);
  color: var(--c-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.es-steps strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text-primary);
}
.es-steps small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--c-text-muted);
}

/* 文檔清單一次最多顯示 10 列，其餘捲動（2026-08-19 使用者指示）。
   知識庫動輒上百份文件（實測有 4 個月前爬的官網一次進 20+ 筆），
   全部展開會把整頁撐得非常長，左右兩欄的高度也對不上。
   列高假設：.km-row 是 padding 9px 上下 + 單行內容約 20px ≈ 38px。
   表頭 .km-thead 刻意留在捲動區外面——捲的時候欄位標題不該跟著跑掉。 */
.km-tbody {
  --km-row-h: 38px;
  max-height: calc(var(--km-row-h) * 10);
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* ── ASR 深色聲紋區（設計稿「Agent 編輯 ASR」的 .ae-dark 一族）──────────────
   稿最顯眼的那塊：深底、左側麥克風圓鈕、中間波形、底下一列播放／時間／提示。
   原本 .asr-rec / .asr-rec-foot / .asr-rec-time / .asr-rec-hint 這四個 class
   在 JSX 裡用了但**完全沒有對應 CSS**，所以就算走到錄音那條路，畫出來也只是
   一條裸 canvas——這是「刻得跟稿不像」的主因之一。
   下面的數值逐項取自稿的 CSS（.ae-dark / .ae-mic / .ae-mini），不是目測。 */
.asr-rec {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--c-asr-dark);
  color: var(--c-asr-dark-fg);
}
/* 麥克風鈕在深色區裡（稿的位置）。稿是無邊框＋投影＋hover 放大，
   不是描邊按鈕——這點一開始刻錯過。 */
.asr-rec > .asr-mic {
  grid-row: 1 / span 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--c-asr-mic);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform var(--motion-base) var(--motion-ease),
    background var(--motion-base) var(--motion-ease);
}
.asr-rec > .asr-mic:hover:not(:disabled) {
  transform: scale(1.05);
}
.asr-rec > .asr-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* 錄音中：稿是 #F0473A（比 --c-danger 更橘），外圈脈動是我們加的可用性提示。 */
.asr-rec > .asr-mic.is-recording {
  background: var(--c-asr-mic-rec);
  animation: asr-mic-pulse var(--motion-pulse, 1600ms) ease-in-out infinite;
}
@keyframes asr-mic-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(240, 71, 58, 0.45);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.35),
      0 0 0 9px rgba(240, 71, 58, 0);
  }
}
.asr-rec .asr-wave {
  margin-top: 0;
  width: 100%;
  height: 46px;
  display: block;
}
/* ClipWaveform 讀 computed color 當「已播放」色、--clip-wave-dim 當未播放色。 */
.asr-wave--clip {
  color: var(--c-accent);
  --clip-wave-dim: var(--c-asr-wave-dim);
  cursor: pointer;
}
.asr-rec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* 稿的 .ae-mini（深色版）：26px、8px 圓角、深底描邊。 */
.asr-rec-play,
.asr-rec-reset {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--c-asr-mini-line);
  background: var(--c-asr-mini);
  color: var(--c-asr-mini-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}
.asr-rec-play:hover,
.asr-rec-reset:hover {
  background: var(--c-asr-mini-hov);
  color: var(--c-asr-dark-fg);
}
.asr-rec-reset {
  margin-left: auto;
}
.asr-rec-time {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: #d6d9de;
}
.asr-rec-hint {
  min-width: 0;
  font-size: 11.5px;
  color: #8b92a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 語音設定：TTS 卡的「語音 ｜ 辨識語言」兩欄（設計稿「Agent 編輯 ASR」）──
   稿是 grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:14px。
   辨識語言原本在下面 ASR 卡的標題右側，照稿搬到聲音旁邊——兩者連動（聲音清單
   會依語言過濾），並排才看得出來。 */
.vs-tts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.vs-tts-col {
  min-width: 0;
}
.vs-tts-col > .ui-select {
  width: 100%;
}
/* 窄容器（試打 dock 裡的設定分頁）塞不下兩欄就疊起來。 */
@media (max-width: 720px) {
  .vs-tts-grid {
    grid-template-columns: 1fr;
  }
}
.vs-asr-engine {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
}


/* ── 知識庫頁面級分頁：知識庫 ／ 排程爬蟲（2026-08-19 使用者要求）───────────
   排程爬蟲原本是獨立路由，入口藏在名冊底部一行連結，要捲到底才看得到。
   它管的是「哪些網址定期寫回哪個知識庫」，跟名冊同一個範圍，做成同層分頁。
   獨立路由保留（深連結可能在用），兩邊共用 CrawlerSchedulesPanel。 */
.km-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.km-pagetabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px 0;
  border-bottom: 1px solid var(--c-border-default);
}
.km-pagetab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 10px;
  margin-right: 14px;
  border: none;
  background: transparent;
  color: var(--c-text-tertiary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--motion-base) var(--motion-ease);
}
.km-pagetab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transition: transform var(--motion-tab, 260ms) var(--motion-ease-io);
}
.km-pagetab:hover {
  color: var(--c-text-primary);
}
.km-pagetab.is-on {
  color: var(--c-accent);
  font-weight: 700;
}
.km-pagetab.is-on::after {
  transform: scaleX(1);
}
/* 外觀收編至 ui-btn（--icon --icon-sm ＋ .is-flash 複製回饋），只留行內版位 */
.copy-id-btn {
  flex-shrink: 0;
  vertical-align: middle;
}
.rag-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
}

.rag-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(2px);
}

.rag-panel {
  position: relative;
  width: min(1040px, 94vw);
  height: min(760px, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.rag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-4);
}

.rag-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-7);
}

.rag-title {
  margin: 2px 0 0;
  font-size: 18px;
  color: var(--ink-10);
}

/* 關閉鈕收編至 ui-btn--icon */

.rag-body {
  flex: 1;
  display: grid;
  /* 對齊 OTD 流體寬：大螢幕 270、視窗變窄收到 230 */
  grid-template-columns: clamp(230px, 24vw, 270px) 1fr;
  min-height: 0;
}

/* ===== 左：dataset 列表 ===== */
.rag-datasets {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ink-4);
  min-height: 0;
}

.rag-datasets-head {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--ink-4);
}

.rag-filter {
  flex: 1;
  min-width: 0;
  padding: 6px 9px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 7px;
  color: var(--ink-10);
  font-size: 13px;
}
.rag-filter:focus {
  outline: none;
  border-color: var(--accent);
}

.rag-dataset-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  min-height: 0;
}

.rag-dataset-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-9);
  cursor: pointer;
  text-align: left;
}
.rag-dataset-item:hover {
  background: var(--ink-3);
}
.rag-dataset-item.active {
  background: var(--ink-3);
  border-color: var(--accent);
  color: var(--ink-10);
}

.rag-dataset-name {
  font-size: 12.5px;
  color: var(--ink-10);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rag-dataset-desc {
  font-size: 11px;
  color: var(--ink-7);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rag-empty {
  padding: 24px;
  color: var(--ink-7);
  font-size: 13px;
  list-style: none;
  text-align: center;
}

/* ===== 右：主區 ===== */
.rag-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rag-placeholder {
  padding: 24px;
  color: var(--ink-7);
  font-size: 13px;
}

.rag-main-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-4);
}

.rag-main-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-10);
  font-size: 15px;
  min-width: 0;
}

.rag-main-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rag-main-gid {
  font-size: 11px;
  color: var(--ink-6);
}

.rag-detail-desc {
  margin: 0;
  padding: 8px 16px 0;
  font-size: 12px;
  color: var(--ink-8);
  line-height: 1.55;
}

/* ===== 試搜（hits 主區）===== */
.rag-hits-area {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.rag-hits-banner {
  font-size: 11px;
  color: var(--ink-7);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.rag-hits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rag-hit {
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ink-1, var(--ink-2));
  padding: 10px 12px;
}

.rag-hit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.rag-hit-rank {
  font-size: 11px;
  color: var(--ink-6);
  font-family: var(--mono);
}

.rag-hit-doc {
  font-size: 12px;
  color: var(--ink-10);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.rag-hit-score {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid var(--ink-5);
  color: var(--ink-7);
  font-family: var(--mono);
}

.rag-hit-content {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-9);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

.rag-hits-empty,
.rag-hits-loading,
.rag-hits-err {
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--ink-4);
  background: var(--ink-3);
  color: var(--ink-8);
}

.rag-hits-err {
  color: var(--rose, #d4607a);
  border-color: color-mix(in srgb, var(--rose, #d4607a) 40%, transparent);
  background: color-mix(in srgb, var(--rose, #d4607a) 8%, transparent);
}

/* ===== 文件列表（docs mode）===== */
.rag-docs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rag-doc {
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ink-1, var(--ink-2));
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rag-doc-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.rag-doc-name {
  font-size: 13px;
  color: var(--ink-10);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.rag-doc-type {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid var(--ink-5);
  color: var(--ink-7);
  font-family: var(--mono);
}

.rag-doc-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 6px;
  border: 1px solid var(--ink-5);
  color: var(--ink-7);
}

.rag-doc-tag--off {
  color: var(--ink-6);
}

.rag-doc-tag--err {
  color: var(--rose, #d4607a);
  border-color: color-mix(in srgb, var(--rose, #d4607a) 50%, transparent);
}

.rag-doc-url {
  font-size: 11px;
  color: var(--ink-7);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rag-doc-url:hover {
  color: var(--accent);
  text-decoration: underline;
}

.rag-doc-meta {
  font-size: 10.5px;
  color: var(--ink-6);
}

.rag-docs-truncated {
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--ink-7);
  background: var(--ink-3);
  border: 1px dashed var(--ink-4);
  border-radius: 8px;
}

/* docs → hits toggle 按鈕：inline 在 banner 內 */
/* 外觀收編至 ui-btn（--secondary --sm），只留版位 */
.rag-toggle-btn {
  margin-right: 8px;
}

/* ===== 試搜（input bar）===== */
.rag-tester {
  border-top: 1px solid var(--ink-4);
  padding: 12px 16px;
  background: var(--ink-2);
}

.rag-tester-head {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-7);
  margin-bottom: 8px;
}

.rag-tester-row {
  display: flex;
  gap: 8px;
}

.rag-tester-input {
  flex: 1;
  padding: 8px 11px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 8px;
  color: var(--ink-10);
  font-size: 13px;
}
.rag-tester-input:focus {
  outline: none;
  border-color: var(--accent);
}

.rag-tester-opts {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--ink-7);
  align-items: center;
  margin-top: 8px;
}

.rag-tester-opts label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rag-tester-num {
  width: 58px;
  padding: 3px 6px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 6px;
  color: var(--ink-10);
  font-size: 12px;
}

/* ===== 按鈕（對齊 OTD）===== */
/* #15449 第 7 刀：尺寸/字重對齊全域 secondary 按鈕（同 OTD），disabled
   opacity 對齊全站一致值（.55）。 */