/* ===== 终端页 ===== */
/* 设计与理由见 PROMPT/26_终端页.md
 * 页壳（.api-page / 顶栏 / 输入框 / 按钮 / 分段卡槽）全部复用 setting-api.css，
 * 本文件只写终端自己的部件。禁止渐变，颜色一律走 base.css 的变量。 */

/* 四张页的层级：列表是一级页，详情压在它上面，编辑与调试台再高一层。
   .api-page 自带 z-index: 11，这里逐张改掉 */
.tm-page { z-index: 10; }        /* 与设置页 / 聊天页 / 音乐页同级，彼此不会同时打开 */
.tm-detail { z-index: 11; }
.tm-edit { z-index: 12; }        /* 与 .ap-modal 同层，两者不会同时出现 */
.tm-console { z-index: 12; }

/* ===== 概览三格 ===== */
.tm-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
  margin-top: 24px;
}

.tm-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 8px;
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
}
.tm-stat-cell:first-child {
  border-top-left-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
}
.tm-stat-cell:last-child {
  border-top-right-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

.tm-stat-num {
  font-size: var(--metric-size);
  font-weight: var(--metric-weight);
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.tm-stat-name {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: 0.04em;
  color: var(--c-sub);
}

/* ===== 服务器列表 ===== */
.tm-list {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.tm-srv {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.tm-srv:first-child { border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); }
.tm-srv:last-child { border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); }
.tm-srv:active { background: var(--press-bg); }

/* 状态点：四种状态只靠明度区分，不引入彩色 */
.tm-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-hint);
}
.tm-dot.is-ok { background: var(--c-text); }
.tm-dot.is-busy { background: var(--c-accent); animation: tm-blink 1s var(--ease) infinite; }
.tm-dot.is-bad {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c-sub);
}

@keyframes tm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.tm-srv-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tm-srv-name {
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-srv-host {
  font-size: var(--row-value-size);
  color: var(--c-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-tags {
  flex: none;
  display: flex;
  gap: 4px;
}

.tm-tag {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-title);
  white-space: nowrap;
}
.tm-tag.is-dim { background: transparent; box-shadow: inset 0 0 0 1px var(--c-border-m); color: var(--c-hint); }

/* ===== 空态与说明 ===== */
.tm-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: var(--row-value-size);
  color: var(--c-hint);
}

.tm-note,
.tm-hint {
  margin-top: 8px;
  font-size: var(--row-value-size);
  line-height: 1.5;
  color: var(--c-hint);
}
.tm-note { margin-top: 16px; text-align: center; }

/* ===== 连接状态卡 ===== */
.tm-state {
  margin-top: 24px;
  padding: var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius);
}

.tm-state-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.tm-state-word {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-text);
}
/* 未连接与失败降一档明度：状态靠字重与灰度分层，不上色 */
.tm-state[data-state="idle"] .tm-state-word,
.tm-state[data-state="bad"] .tm-state-word { color: var(--c-sub); }

.tm-state-ms {
  font-size: var(--row-value-size);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.tm-state-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-state-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--row-value-size);
  line-height: 1.5;
}
.tm-state-row span { flex: none; color: var(--c-sub); }
.tm-state-row b {
  min-width: 0;
  font-weight: 450;
  color: var(--c-text);
  text-align: right;
  word-break: break-all;
}

.tm-state-err {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--c-bg);
  font-size: var(--row-value-size);
  line-height: 1.5;
  color: var(--c-title);
  word-break: break-word;
}

/* ===== 分页面板 ===== */
.tm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  margin-top: 16px;
}
.tm-panel[hidden] { display: none; }

.tm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 11px var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.tm-item:first-child { border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); }
.tm-item:last-child { border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); }
.tm-item:not(.is-flat):active { background: var(--press-bg); }

.tm-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tm-item-name {
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-item-sub {
  font-size: var(--row-value-size);
  line-height: 1.4;
  color: var(--c-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 日志 ===== */
.tm-log {
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  overflow: hidden;
}
.tm-log:first-child { border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); }
.tm-log:last-child { border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); }

.tm-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px var(--card-pad);
  text-align: left;
}
.tm-log-head:active { background: var(--press-bg); }

.tm-log-method {
  min-width: 0;
  font-size: var(--row-value-size);
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-log-meta {
  flex: none;
  font-size: 11px;
  color: var(--c-hint);
  font-variant-numeric: tabular-nums;
}

/* 折叠靠 display 切换而不是高度过渡：日志体高度差异极大，动画只会拖慢面板 */
.tm-log-body { display: none; }
.tm-log.is-open .tm-log-body { display: block; }

.tm-log-body,
.tm-block {
  margin: 0;
  padding: 12px var(--card-pad);
  background: var(--c-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--c-title);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== 单选行（鉴权方式）===== */
.tm-opts {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.tm-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius-in);
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.tm-opt:first-child { border-top-left-radius: var(--card-radius); border-top-right-radius: var(--card-radius); }
.tm-opt:last-child { border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); }
.tm-opt:active { background: var(--press-bg); }

.tm-opt-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-accent-dark);
  color: var(--c-bg);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.tm-opt.is-on .tm-opt-check { opacity: 1; }

/* 鉴权分块与中转地址：跟在提示文字后面，靠这一档间距和上面拉开 */
.tm-auth,
.tm-auth .api-field,
.tm-edit .api-field[data-when] { margin-top: 16px; }
.tm-auth[hidden] { display: none; }

.tm-oauth-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius);
}

/* ===== 键值对行 ===== */
.tm-kvs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.tm-kv {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tm-kv-key { flex: 4; min-width: 0; }
.tm-kv-val { flex: 5; min-width: 0; }

.tm-kv-del {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: var(--field-h);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  color: var(--c-sub);
  transition: background var(--dur) var(--ease);
}
.tm-kv-del:active { background: var(--press-bg); }

/* ===== 开关 ===== */
/* 本体 44×26，靶区由 ::before 上下撑开，几何与世界书页那颗一致 */
.tm-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 8px var(--card-pad);
  background: var(--card-bg);
  border-radius: var(--card-radius);
}
.tm-switch-row.is-bare { background: transparent; padding: 4px 0; min-height: 40px; }

.tm-switch-text {
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  color: var(--c-text);
}

.tm-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--c-surface-3);
  transition: background var(--dur) var(--ease);
}
.tm-switch::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  bottom: -9px;
}
.tm-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease);
}
.tm-switch[aria-pressed="true"] { background: var(--c-accent-dark); }
.tm-switch[aria-pressed="true"]::after { transform: translateX(18px); }

/* ===== 表单补件 ===== */
.tm-select {
  /* 原生下拉在 iOS 上必须留出箭头位，去掉默认外观后自己画一个 */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: none;
  color: var(--c-text);
}

.tm-textarea {
  height: auto;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}

.tm-tool-desc {
  margin-top: 16px;
  font-size: var(--row-value-size);
  line-height: 1.6;
  color: var(--c-sub);
  white-space: pre-wrap;
}

.tm-form { display: block; }
.tm-form[hidden], .tm-json[hidden] { display: none; }

/* ===== 调用结果 ===== */
.tm-result {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.tm-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--card-pad);
  background: var(--card-bg);
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  font-size: var(--row-value-size);
  color: var(--c-sub);
  font-variant-numeric: tabular-nums;
}

.tm-block {
  border-radius: var(--card-radius-in);
}
.tm-result .tm-block:last-child {
  border-bottom-left-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

.tm-img {
  width: 100%;
  border-radius: var(--card-radius-in);
  background: var(--c-bg);
}

/* ===== 删除按钮 ===== */
.tm-btn-danger { color: var(--c-sub); }
.tm-btn-danger:active { background: var(--press-bg); }

@media (prefers-reduced-motion: reduce) {
  .tm-dot.is-busy { animation: none; }
  .tm-switch::after { transition: none; }
}