/* 万象寻真控制台样式。
 *
 * 分层：L0 设计令牌（与 App color.json 一一对应）→ 基础层 → 组件层 → 视图层。
 * 命名：BEM（block__element--modifier）；状态类 is-*；视图前缀语义分组注释。
 * 视觉基准：omniseek-app/harmony（暖纸/深空双色主题、radius 16/12/22、
 * tint 胶囊徽标、卡片 0.5px 描边 + 按压缩放、AppDialog/SheetPicker 形态）。
 */

/* ══ L0 设计令牌（dark = App dark/color.json）══════════════════════════ */
:root {
  color-scheme: dark;
  --bg: #0B0F19; --panel: #121721; --panel2: #1A1D24; --bg-fill: #202634;
  --sunk: #0E121C; --codehead: #0E121C;
  --scrim: rgba(0, 0, 0, 0.62);
  --line: #232936; --line-soft: #1C2230;
  --text: #F3F5FA; --text-primary: #FFFFFF;
  --muted: #AEB6C6; --text-secondary: #D1D5DB; --text-tertiary: #8B93A7;
  --faint: #6B7280; --text-quaternary: #6B7280;
  --accent: #FF7F50; --accent-tint: rgba(255, 127, 80, 0.12);
  --accent-bd: rgba(255, 127, 80, 0.35); --accent-active: #FF6B35;
  --ok: #34D399; --ok-tint: #16342A; --ok-edge: rgba(52, 211, 153, 0.55);
  --warn: #FFD23F; --warn-tint: #33290F; --warn-bd: rgba(255, 210, 63, 0.35);
  --danger: #FF5C5C; --danger-tint: #331A19;
  --danger-bd: rgba(255, 92, 92, 0.48); --danger-edge: rgba(255, 92, 92, 0.55);
  --think: #00E5FF; --think-tint: rgba(0, 229, 255, 0.10);
  --diff-add: #34D399; --diff-del: #FF8177; --code-text: #FFD08A;
  --purple: #A78BFA; --purple-tint: #2B2545;
  --teal: #2DD4BF; --teal-tint: #0F3330;
  --rose: #F472B6; --rose-tint: #3A1F30;
  --success-tint: #16342A; --warning-tint: #33290F;
  --on-accent: #FFFFFF;
  --radius-card: 16px; --radius-field: 12px; --radius-sheet: 22px;
  --radius-avatar: 14px; --radius-block: 10px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.30);
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.45);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Segoe UI", sans-serif;
  --fs-body: 15px; --fs-sub: 13px; --fs-caption: 11px; --fs-micro: 10px;
  --bar-blur: blur(18px) saturate(140%);
}

/* 亮色主题（light = App base/color.json：暖纸底 + 深橙强调） */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F2EE; --panel: #FFFFFF; --panel2: #F0EDE7; --bg-fill: #ECE8E1;
  --sunk: #EFEBE4; --codehead: #EDE8E0;
  --scrim: rgba(36, 30, 20, 0.45);
  --line: #E0DAD1; --line-soft: #EAE5DD;
  --text: #241E18; --text-primary: #201A14;
  --muted: #6E655A; --text-secondary: #57503F; --text-tertiary: #8A8175;
  --faint: #9A9086; --text-quaternary: #A39A8D;
  --accent: #D14E1F; --accent-tint: rgba(209, 78, 31, 0.10);
  --accent-bd: rgba(209, 78, 31, 0.25); --accent-active: #B84318;
  --ok: #0E8F63; --ok-tint: #E3F1EA; --ok-edge: rgba(14, 143, 99, 0.55);
  --warn: #B7791F; --warn-tint: #F6EEDC; --warn-bd: rgba(183, 121, 31, 0.35);
  --danger: #D3360F; --danger-tint: #F8E7E2;
  --danger-bd: rgba(211, 54, 15, 0.40); --danger-edge: rgba(211, 54, 15, 0.55);
  --think: #0891B2; --think-tint: rgba(8, 145, 178, 0.10);
  --diff-add: #0E8F63; --diff-del: #D3360F; --code-text: #9A6700;
  --purple: #7C5CD6; --purple-tint: #EFEAFC;
  --teal: #0E8F86; --teal-tint: #E0F1EF;
  --rose: #C2527E; --rose-tint: #F7E8EE;
  --success-tint: #E3F1EA; --warning-tint: #F6EEDC;
  --shadow-card: 0 2px 10px rgba(35, 28, 20, 0.05);
  --shadow-float: 0 4px 16px rgba(35, 28, 20, 0.12);
}

/* ══ 基础层 ════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.55 var(--sans);
  overflow-x: hidden;
}
/* 暗色微点阵纹理：消除纯黑死板（亮色保持纸感干净）。 */
html:not([data-theme="light"]) body {
  background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 28px 28px;
}
::selection { background: rgba(255, 127, 80, 0.35); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent-bd); outline-offset: 1px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
/* 无障碍：用户偏好减少动效时关闭呼吸/打点动画与卡片过渡。 */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot, .typing-dots__dot { animation: none; }
  .device-card, .inst-card, .sess-card, .chip-btn, .btn-icon { transition: none; }
}

/* ══ 组件层：胶囊徽标（StatusPill / PhaseChip 同族）════════════════════ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 9px; border-radius: 999px;
  font-size: var(--fs-caption); font-weight: 500; white-space: nowrap;
}
.pill--mini { padding: 1px 8px 1px 7px; font-size: var(--fs-micro); }
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tone--ok { color: var(--ok); background: var(--ok-tint); }
.tone--warn { color: var(--warn); background: var(--warn-tint); }
.tone--danger { color: var(--danger); background: var(--danger-tint); }
.tone--accent { color: var(--accent); background: var(--accent-tint); }
.tone--neutral { color: var(--text-secondary); background: var(--bg-fill); }
.tone--think { color: var(--think); background: var(--think-tint); }

/* 呼吸圆点（PulseDot，900ms 半周期）。 */
.pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
  animation: breathe 1.8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: 0.35; transform: scale(1.25); } }

/* 打字三点波（TypingDots，380ms 节拍）。 */
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: typing 1.14s ease-out infinite;
}
@keyframes typing { 0%, 100% { opacity: 0.3; transform: scale(1); } 33% { opacity: 1; transform: scale(1.3); } }

/* 胶囊操作按钮（ChipButton）。 */
.chip-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: 999px; font-size: var(--fs-sub); font-weight: 500;
  white-space: nowrap; flex: none; transition: opacity 0.12s, transform 0.13s ease-out;
}
.chip-btn:active { transform: scale(0.97); }
.chip-btn--accent { color: var(--accent); background: var(--accent-tint); }
.chip-btn--danger { color: var(--danger); background: var(--danger-tint); }
.chip-btn--neutral { color: var(--text-secondary); background: var(--bg-fill); }
.chip-btn--filled { color: var(--on-accent); background: var(--accent); }
.chip-btn.is-disabled, .chip-btn:disabled { opacity: 0.45; pointer-events: none; }

/* 图标圆钮（返回/设置等 34px 圆钮）。 */
.btn-icon, .navbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 17px;
  background: var(--bg-fill); color: var(--text-secondary); flex: none;
  transition: transform 0.13s ease-out;
}
.btn-icon:active, .navbar__back:active { transform: scale(0.94); }

/* 危险描边小按钮（中止等）。 */
.stop-btn {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--danger-bd);
  color: var(--danger); font-size: 12px; font-weight: 500; flex: none;
  transition: background 0.12s, transform 0.13s ease-out;
}
.stop-btn:hover, .stop-btn:active { background: var(--danger-tint); }
.stop-btn:active { transform: scale(0.97); }

/* 悬浮小按钮（加载更早）。 */
.float-btn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; box-shadow: var(--shadow-card);
  transition: transform 0.13s ease-out;
}
.float-btn:active { transform: scale(0.97); }
.float-btn:disabled { opacity: 0.6; }

/* 分区头（SectionHeader）。 */
.sect-head { display: flex; align-items: center; gap: 7px; margin: 22px 2px 10px; }
.sect-head:first-child { margin-top: 8px; }
.sect-head__title { font-size: var(--fs-sub); font-weight: 500; color: var(--text-secondary); }
.sect-head__count {
  font-size: var(--fs-micro); color: var(--text-tertiary);
  background: var(--bg-fill); border-radius: 999px; padding: 1px 7px;
}
.sect-head__hint { font-size: var(--fs-micro); color: var(--text-tertiary); }
.sect-head__more { margin-left: auto; font-size: var(--fs-micro); color: var(--accent); }
.sect-head__more:hover { text-decoration: underline; }

/* 空态（EmptyState：同心圆饰 + 图标 + 标题 + 提示）。 */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 56px 24px; text-align: center; }
.empty-state__rings {
  position: relative; width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-quaternary);
}
.empty-state__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--bg-fill); opacity: 0.7;
}
.empty-state__core {
  position: absolute; inset: 21px; border-radius: 50%;
  background: var(--panel);
}
.empty-state__rings svg { position: relative; }
.empty-state__title { margin-top: 16px; font-size: var(--fs-body); font-weight: 500; color: var(--text-secondary); }
.empty-state__hint { margin-top: 6px; font-size: var(--fs-sub); color: var(--text-tertiary); max-width: 300px; }

/* 开关（Toggle Switch）。 */
.switch {
  width: 44px; height: 26px; border-radius: 999px; background: var(--bg-fill);
  position: relative; transition: background 0.15s; flex: none;
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.switch.is-on { background: var(--accent); }
.switch.is-on .switch__knob { transform: translateX(18px); }

/* ══ 视图层：凭证门（App Index.ets）════════════════════════════════════ */
.gate {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 20px 28px; background: var(--bg);
}
.gate__brand img {
  display: block; width: 72px; height: 72px;
  border-radius: 20px; /* 与 App Index.ets 同参：72vp + 圆角 20 */
}
.gate__title { margin-top: 16px; font-size: 28px; font-weight: 700; color: var(--text-primary); }
.gate__subtitle { margin-top: 6px; font-size: var(--fs-sub); color: var(--text-tertiary); }
.gate__card {
  width: min(100%, 360px); margin-top: 40px; padding: 20px 16px;
  border-radius: var(--radius-card); background: var(--panel);
  box-shadow: var(--shadow-card); border: 0.5px solid var(--line);
}
.gate__label { display: block; font-size: var(--fs-sub); font-weight: 500; color: var(--text-secondary); }
.gate__card .gate__label { margin-top: 16px; }
.gate__card input[type="password"],
.gate__card input[type="text"] {
  width: 100%; height: 46px; margin-top: 8px; padding: 0 12px;
  border-radius: var(--radius-field); border: 1px solid transparent;
  background: var(--bg-fill); color: var(--text); font-size: 14px;
  transition: border-color 0.12s;
}
.gate__card input[type="password"]:focus,
.gate__card input[type="text"]:focus { outline: none; border-color: var(--accent); }
/* 连接历史下拉（原生 Select，对齐 App 登录页布局：时钟图标 + 下拉回填）。 */
.gate__history {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--text-quaternary);
}
.gate__select {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px;
  border-radius: var(--radius-field); border: 1px solid transparent;
  background: var(--bg-fill); color: var(--text-secondary);
  font: 500 var(--fs-sub)/1 var(--sans);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gate__submit {
  width: 100%; height: 46px; margin-top: 20px; border-radius: var(--radius-field);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-body); font-weight: 500;
  transition: background 0.12s, transform 0.13s ease-out;
}
.gate__submit:active { background: var(--accent-active); transform: scale(0.98); }
.gate__submit:disabled { opacity: 0.6; }
.gate__autoenter {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; font-size: var(--fs-sub); color: var(--muted); cursor: pointer;
}
.gate__autoenter input { accent-color: var(--accent); }
.gate__status { display: flex; justify-content: center; margin-top: 14px; }
.gate__status > div { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sub); }
.gate__status .is-ok { color: var(--ok); }
.gate__status .is-err { color: var(--danger); }
.gate__version { margin-top: auto; padding-top: 40px; font-size: var(--fs-sub); color: var(--text-tertiary); }

/* ══ 视图层：页面骨架（导航栏 / 页头）══════════════════════════════════ */
.view { max-width: 720px; margin: 0 auto; min-height: 100dvh; }
.navbar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
}
.navbar__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.navbar__title {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar__subtitle {
  margin-top: 2px; font-size: var(--fs-caption); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbar__right { display: flex; align-items: center; gap: 8px; flex: none; }

.view-head {
  display: flex; align-items: center; gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
}
.view-head__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view-head__title { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.view-head__subtitle {
  margin-top: 2px; font-size: var(--fs-caption); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.view-head__right { display: flex; align-items: center; gap: 10px; flex: none; }

/* ══ 视图层：设备（Devices.ets）════════════════════════════════════════ */
.device-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 28px; }
.device-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border-radius: var(--radius-card); text-align: left;
  background: var(--panel); border: 0.5px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 0.13s ease-out, border-color 0.15s, background 0.2s, opacity 0.2s, filter 0.2s;
}
.device-card:active { transform: scale(0.97); }
/* 活跃（在线）卡：语义色 wash 渐变底 + tinted 边框 + 顶部径向光晕。
 * --live-hue 由状态类注入；渐变直接挂在元素背景上，不引入叠层。 */
.device-card.is-online {
  --live-hue: var(--ok);
  background:
    radial-gradient(150px 76px at 100% 0%,
      color-mix(in srgb, var(--live-hue) 13%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--live-hue) 8%, var(--panel)),
      color-mix(in srgb, var(--live-hue) 3%, var(--panel)));
  border-color: color-mix(in srgb, var(--live-hue) 26%, var(--line));
}
/* 离线卡：降透明 + 去饱和 + 无阴影（与活跃卡一眼可辨）。 */
.device-card.is-off {
  opacity: 0.62; filter: saturate(0.5);
  box-shadow: none; border-color: var(--line-soft);
}
.device-card__avatar {
  position: relative; width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, currentColor 20%, transparent);
}
.device-card__monogram { font-size: 20px; font-weight: 700; letter-spacing: 0.2px; }
.device-card__badge {
  position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--text-quaternary);
  border: 2.5px solid var(--panel);
  transition: background 0.2s;
}
.device-card.is-online .device-card__badge {
  background: var(--ok);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 55%, transparent);
}
.device-card__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.device-card__name {
  font-size: 16px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.device-card__id {
  font-size: var(--fs-micro); color: var(--text-quaternary);
  font-family: var(--mono); letter-spacing: 0.3px;
}
.device-card > svg { color: var(--text-quaternary); flex: none; }
/* 头像色轮换（Theme.avatarHue 6 组 tint 搭配）。 */
.hue-0 .device-card__avatar { background: var(--accent-tint); color: var(--accent); }
.hue-1 .device-card__avatar { background: var(--purple-tint); color: var(--purple); }
.hue-2 .device-card__avatar { background: var(--teal-tint); color: var(--teal); }
.hue-3 .device-card__avatar { background: var(--success-tint); color: var(--ok); }
.hue-4 .device-card__avatar { background: var(--rose-tint); color: var(--rose); }
.hue-5 .device-card__avatar { background: var(--warning-tint); color: var(--warn); }

/* ══ 视图层：实例会话（Jobs.ets）═══════════════════════════════════════ */
.jobs-body { padding: 0 14px 30px; }
.jobs-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 80px; color: var(--text-tertiary); font-size: var(--fs-sub);
}
.inst-card {
  padding: 16px; border-radius: var(--radius-card);
  background: var(--panel); border: 0.5px solid var(--line);
  box-shadow: var(--shadow-card); margin-bottom: 12px;
  transition: transform 0.13s ease-out, border-color 0.15s, background 0.2s, opacity 0.2s, filter 0.2s;
}
.inst-card:active { transform: scale(0.985); }
/* 忙态卡：AI 活动青 wash（与进行中会话共用同一活跃语言）。 */
.inst-card.is-busy {
  --live-hue: var(--think);
  background:
    radial-gradient(170px 84px at 100% 0%,
      color-mix(in srgb, var(--live-hue) 12%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--live-hue) 7%, var(--panel)),
      color-mix(in srgb, var(--live-hue) 3%, var(--panel)));
  border-color: color-mix(in srgb, var(--live-hue) 28%, var(--line));
}
.inst-card.is-off {
  opacity: 0.62; filter: saturate(0.5);
  box-shadow: none; border-color: var(--line-soft);
}
/* 选中态最后声明：点选意图优先于状态 wash。 */
.inst-card.is-selected { background: var(--accent-tint); border: 1.5px solid var(--accent); }
.inst-card__top { cursor: pointer; }
.inst-card__name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inst-card__name {
  flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inst-card__name-row .pill { flex: none; }
.inst-card__summary {
  margin-top: 10px; font-size: var(--fs-sub); line-height: 1.5; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inst-card__meta {
  margin-top: 10px; font-size: var(--fs-caption); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.inst-card__ws {
  margin-top: 5px; display: flex; align-items: center; gap: 5px;
  min-width: 0; font-size: var(--fs-caption); color: var(--text-quaternary);
  font-family: var(--mono);
}
.inst-card__ws svg { flex: none; opacity: 0.8; }
.inst-card__ws > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inst-card__foot {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
}
.inst-card.is-busy .inst-card__foot {
  border-top-color: color-mix(in srgb, var(--live-hue) 16%, var(--line-soft));
}
.inst-card__sid {
  flex: 1; min-width: 0; align-self: center;
  height: 24px; line-height: 24px; padding: 0 8px; border-radius: 6px;
  background: var(--bg-fill); text-align: left;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 0.12s;
}
.inst-card__sid:active { color: var(--text-secondary); }
.inst-card__sid-hint {
  flex: 1; min-width: 0; font-size: var(--fs-micro); color: var(--text-quaternary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sess-hint {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 14px; border-radius: var(--radius-card);
  background: var(--bg-fill); border: 0.8px dashed var(--line);
  color: var(--text-tertiary); font-size: var(--fs-sub);
}
.sess-empty {
  padding: 26px 0 10px; text-align: center;
  font-size: var(--fs-sub); color: var(--text-tertiary);
}
/* 会话卡 + 左滑删除 / 右滑复制。 */
.sess-wrap { position: relative; margin-bottom: 12px; border-radius: var(--radius-card); overflow: hidden; }
.sess-card__del {
  position: absolute; top: 0; right: 0; bottom: 0; width: 72px;
  background: var(--danger); color: #fff; font-size: var(--fs-sub); font-weight: 500;
}
.sess-card {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 16px; border-radius: var(--radius-card);
  background: var(--panel); border: 0.5px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease-out, border-color 0.15s, background 0.2s;
}
.sess-card:active { transform: scale(0.985); }
/* 进行中卡：与忙态实例同一活跃 wash（AI 青）。 */
.sess-card.is-active {
  --live-hue: var(--think);
  background:
    radial-gradient(170px 84px at 100% 0%,
      color-mix(in srgb, var(--live-hue) 12%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--live-hue) 7%, var(--panel)),
      color-mix(in srgb, var(--live-hue) 3%, var(--panel)));
  border-color: color-mix(in srgb, var(--live-hue) 28%, var(--line));
}
.sess-card__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sess-card__title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sess-card__sid {
  margin-top: 7px; display: inline-flex; align-items: center;
  max-width: 100%; font-size: var(--fs-caption); color: var(--text-quaternary);
  font-family: var(--mono);
}
.sess-card__sid > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sess-card__active {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--think) 12%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--think) 34%, transparent);
  color: var(--think); font-size: var(--fs-micro); font-weight: 600;
}
/* 元信息行：meta 占满剩余宽度，进行中徽标右贴。 */
.sess-card__meta-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; min-width: 0;
}
.sess-card__meta {
  flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══ 视图层：聊天（Chat.ets）═══════════════════════════════════════════ */
.detail-head {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: var(--bar-blur); -webkit-backdrop-filter: var(--bar-blur);
  border-bottom: 1px solid var(--line-soft);
}
.detail-head__title {
  flex: 1; min-width: 0; font-size: var(--fs-sub); font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.mode-bar { position: sticky; top: 54px; z-index: 7; display: flex; justify-content: center; padding: 10px 12px 0; }

.messages {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px 8px; max-width: 760px; margin: 0 auto; width: 100%;
}
.load-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--muted); font-size: var(--fs-sub); }
.load-error__retry {
  height: 30px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); font-size: 12px;
}

/* 用户气泡（右对齐 + 复制）。 */
.user-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; }
.user-row .copy-btn { order: -1; }
.user-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 85%; }
.att-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.att-thumb {
  width: 132px; height: 99px; overflow: hidden;
  border: 1px solid var(--accent-bd); border-radius: 10px;
  background: var(--panel2);
  display: flex; align-items: center; justify-content: center;
}
.att-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-thumb--broken { font-size: var(--fs-micro); color: var(--muted); }
.att-chip {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 10px; border: 1px solid var(--accent-bd); border-radius: 999px;
  background: var(--panel2); font-size: var(--fs-micro); color: var(--muted);
}
.bubble {
  max-width: 85%; padding: 8px 12px;
  background: var(--accent-tint); border: 1px solid var(--accent-bd);
  border-radius: 12px 12px 3px 12px;
  font-size: var(--fs-sub); line-height: 1.6; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble--pending { border-style: dashed; }
.pending-row { opacity: 0.85; }
.pending-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 85%; }
.pending-label { font-size: var(--fs-micro); color: var(--accent); }
.pending-col .bubble { max-width: 100%; }

/* 消息卡基底（mcard = App CardFrame：panel2 底 + 描边 + 圆角 10）。 */
.mcard {
  background: var(--panel2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-block); padding: 12px; min-width: 0; max-width: 100%; overflow: hidden;
}
.mcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rlabel { font-size: var(--fs-caption); font-weight: 700; flex: none; color: var(--muted); }
.rlabel--user { color: var(--accent); }
.rlabel--tool { color: var(--muted); }
.mmeta { font-size: var(--fs-micro); color: var(--faint); margin-left: auto; flex: none; }
.flag {
  font-size: var(--fs-micro); color: var(--warn);
  border: 1px solid var(--warn-bd); border-radius: 4px; padding: 0 4px; flex: none;
}
.flag--err { color: var(--danger); border-color: var(--danger-bd); }
.mcard__body { font-size: var(--fs-sub); line-height: 1.7; overflow-wrap: anywhere; }
.mcard__body > * + * { margin-top: 8px; }
.result-text {
  font-family: var(--mono); font-size: var(--fs-sub); line-height: 1.6;
  color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 落盘卡高亮渐隐（直播→落盘交接）。 */
.mcard.is-fresh { animation: fresh-glow 2.4s ease-out; }
@keyframes fresh-glow { 0%, 55% { border-color: var(--accent-bd); box-shadow: 0 0 0 1px var(--accent-bd); } 100% { border-color: var(--line-soft); } }

/* 复制按钮。 */
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  color: var(--faint); margin-left: auto;
}
.copy-btn:hover, .copy-btn:active { background: var(--bg-fill); color: var(--text); }
.copy-btn.is-done { color: var(--ok); }
.mcard__head .mmeta + .copy-btn { margin-left: 0; }
.mcard__head .copy-btn { margin-left: auto; }
.mcard__head .rlabel + .copy-btn { margin-left: auto; }

/* Markdown（受限子集）。 */
.p { white-space: pre-wrap; }
.h { font-weight: 600; line-height: 1.45; margin-top: 10px; color: var(--text-primary); }
.h:first-child { margin-top: 0; }
.h.h1 { font-size: 15px; } .h.h2 { font-size: 14px; } .h.h3, .h.h4 { font-size: 13px; }
.quote { border-left: 2px solid var(--line); padding: 2px 0 2px 10px; color: var(--muted); white-space: pre-wrap; }
.list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.list.sub { margin-top: 4px; }
.list li::marker { color: var(--faint); }
.list li { white-space: pre-wrap; overflow-wrap: anywhere; }
.list li.task { list-style: none; margin-left: -18px; display: flex; gap: 7px; align-items: flex-start; }
.list li.task input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.hr { border-top: 1px solid var(--line); margin: 10px 0; }
strong { font-weight: 600; }
del { color: var(--faint); }
a.mdlink { color: var(--accent); text-decoration: none; }
a.mdlink:hover { text-decoration: underline; }
code.inl { background: var(--bg-fill); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 12px; color: var(--code-text); }
.tablewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line-soft); border-radius: 8px; }
table.mdtable { border-collapse: collapse; width: 100%; font-size: 12px; }
.mdtable th, .mdtable td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.mdtable th { background: var(--panel2); font-weight: 600; white-space: nowrap; }
.mdtable tr:last-child td { border-bottom: none; }

/* 代码块 / diff。 */
.codewrap { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; max-width: 100%; }
.codehead {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 3px 4px 3px 10px; background: var(--codehead); border-bottom: 1px solid var(--line-soft);
}
.codehead .lang { font-family: var(--mono); font-size: var(--fs-micro); color: var(--faint); letter-spacing: 0.5px; }
.codehead .copy-btn { width: 24px; height: 24px; }
pre.code {
  background: var(--sunk); padding: 8px 10px; overflow-x: auto; white-space: pre;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; margin: 0;
}
.diff {
  background: var(--sunk); font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  overflow-x: auto; max-width: 100%; padding: 4px 0;
}
/* 行号栏 + 内容双列（TUI patch_card unified：del=旧号红 / add=新号绿 / 上下文灰）。 */
.dl-row { display: flex; align-items: flex-start; padding: 0 10px; min-height: 1.6em; }
.dl-num { width: 30px; flex: none; text-align: right; padding-top: 1px; font-size: 9.5px; color: var(--faint); user-select: none; }
.dl-num--add { color: var(--diff-add); }
.dl-num--del { color: var(--diff-del); }
.dl-text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dl-add { color: var(--diff-add); background: var(--ok-tint); box-shadow: inset 2px 0 0 var(--ok-edge); }
.dl-del { color: var(--diff-del); background: var(--danger-tint); box-shadow: inset 2px 0 0 var(--danger-edge); }
.dl-hunk { color: var(--accent); background: var(--accent-tint); }
.dl-meta { color: var(--faint); font-weight: 600; }

/* thinking 卡（TUI thinking_block 同构窗口）。 */
.think-card { padding: 0; }
.think__head {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer;
}
.think__label { font-size: var(--fs-caption); font-weight: 700; color: var(--think); flex: none; }
.think__meta { font-size: var(--fs-micro); color: var(--faint); flex: none; }
.think__win-inner { cursor: pointer; }
.think__line {
  padding: 0 12px 4px 24px; font-size: 12px; line-height: 1.55;
  color: var(--muted); font-style: italic;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.think__line.single, .think__win .think__line:only-child { padding-bottom: 10px; }
.think__omit {
  padding: 0 12px 4px 24px; font-size: var(--fs-micro); font-style: italic;
  color: var(--faint);
}
.think__full {
  margin: 0 12px 10px 24px; padding: 4px 0 4px 10px;
  border-left: 2px solid var(--think-tint);
  font-size: 12px; line-height: 1.6; font-style: italic; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 工具卡（glyph+家族+状态+参数折叠+TUI 形态结果+页脚）。 */
.tool { padding: 0; }
.tool__head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; min-width: 0; }
.tool__head svg { flex: none; }
.tool__family { font-size: 12px; font-weight: 700; flex: none; }
.tool__sep { color: var(--faint); font-size: var(--fs-caption); flex: none; }
.tool__stat { font-size: var(--fs-caption); flex: none; font-family: var(--mono); }
.tool__stat.is-running { color: var(--warn); }
.tool__stat.is-good { color: var(--ok); font-weight: 700; }
.tool__stat.is-bad { color: var(--danger); font-weight: 700; }
.tool__extra { font-size: 10.5px; font-family: var(--mono); color: var(--faint); flex: none; }
.tool__sum {
  font-size: var(--fs-caption); color: var(--muted); min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.tool__cmd {
  padding: 4px 10px 2px; font-family: var(--mono); font-size: var(--fs-caption);
  color: var(--warn); white-space: pre-wrap; overflow-wrap: anywhere;
}
.tool.is-err { border-color: var(--danger-bd); }
.tool__fold { position: relative; }
.tool__fold > summary, .fold__head {
  display: flex; align-items: center; gap: 6px; padding: 5px 34px 5px 10px;
  font-size: var(--fs-caption); color: var(--faint); cursor: pointer;
  border-top: 1px solid var(--line-soft); list-style: none;
}
.tool__fold > summary::-webkit-details-marker { display: none; }
.tool__fold > summary::before { content: "▸"; flex: none; font-size: var(--fs-micro); }
.tool__fold[open] > summary::before { content: "▾"; }
.sumlabel { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.sum-tag {
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.5px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; flex: none;
}
.sum-meta { font-size: var(--fs-micro); font-family: var(--mono); color: var(--faint); flex: none; }
.tool__fold .copy-btn { position: absolute; top: 3px; right: 4px; display: none; }
.tool__fold[open] .copy-btn { display: inline-flex; }
.fold__pre {
  margin: 0; padding: 8px 10px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.6;
  max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.tool__wait {
  padding: 5px 10px; font-size: var(--fs-caption); color: var(--faint);
  border-top: 1px solid var(--line-soft);
}
.tool__result-inner { border-top: 1px solid var(--line-soft); }
.tool__result-head { display: flex; align-items: center; gap: 6px; padding: 5px 10px 3px; }
.tool__result-head .copy-btn { margin-left: auto; width: 22px; height: 22px; }
.tool__footer {
  border-top: 1px solid var(--line-soft); padding: 4px 10px 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* TUI 形态输出体。 */
.tui-out { min-width: 0; }
.tui-out__collapsed { padding: 4px 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.tui-out__line {
  font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.55; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tui-out__line--dim { color: var(--muted); }
.tui-out__omit {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-style: italic;
  color: var(--faint); padding: 1px 0;
}
.tui-out__omit:hover { color: var(--warn); }
.tui-out__pre {
  max-height: 320px; overflow: auto; margin: 0; padding: 6px 10px 8px;
  font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* flush：独立结果卡内去掉水平内边距（外层卡片已有 padding，对齐 App TuiOut inset=false）。 */
.tui-out--flush .tui-out__collapsed { padding: 4px 0 6px; }
.tui-out--flush .tui-out__pre { padding: 6px 0 8px; }

/* 直播思考单块（收起态首行/折叠行数/尾行连为一体；展开态同底色）。 */
.think-live--block {
  background: var(--think-tint); border-radius: 12px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; line-height: 1.55; color: var(--think);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer;
}
.think-live__line {
  color: var(--think);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.think-live__omit { font-size: var(--fs-micro); font-style: italic; color: var(--faint); }

/* 探索卡。 */
.explore-card__title { color: var(--warn); }
.explore__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--faint); }
.explore__dot.is-running { background: var(--faint); animation: breathe 1.8s ease-in-out infinite; }
.explore__dot.is-good { background: var(--ok); }
.explore__dot.is-bad { background: var(--danger); }
.explore__entry {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px;
  border-top: 1px solid var(--line-soft); min-width: 0;
  cursor: pointer; flex-wrap: wrap;
}
.explore__entry svg { flex: none; }
.explore__entry[tabindex="-1"] { cursor: default; }
.explore__name { font-size: var(--fs-caption); font-weight: 500; flex: none; }
.explore__sum {
  font-size: var(--fs-micro); color: var(--muted); min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.explore__result {
  font-size: var(--fs-micro); font-family: var(--mono); color: var(--faint); flex: none;
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.explore__full {
  width: 100%; padding: 0 10px 6px;
  font-family: var(--mono); font-size: var(--fs-micro); line-height: 1.6;
  color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* 底部坞（审批条 / 直播底坞 / 接管条 / 附件 / 输入区）。 */
.bottom-dock {
  position: sticky; bottom: 0; z-index: 9;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0 calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: var(--bar-blur); -webkit-backdrop-filter: var(--bar-blur);
  border-top: 1px solid var(--line-soft);
}
.approval-bar {
  margin: 0 12px; padding: 7px 10px; border-radius: var(--radius-block);
  background: var(--panel2); border: 1px solid var(--warn);
}
.approval-bar__row { display: flex; align-items: center; gap: 8px; width: 100%; }
.approval-bar__row svg { flex: none; }
.approval-bar__badge {
  font-size: var(--fs-micro); font-weight: 700; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 4px; padding: 1px 5px; flex: none;
}
.approval-bar__tool {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.approval-bar__more { font-size: var(--fs-micro); font-weight: 700; color: var(--warn); flex: none; }
.approval-bar__state { font-size: var(--fs-micro); color: var(--muted); flex: none; }
.approval-bar__btn { height: 26px; padding: 0 10px; border-radius: 7px; font-size: var(--fs-caption); flex: none; }
.approval-bar__btn--yes { background: var(--ok); color: var(--on-accent); }
.approval-bar__btn--no { background: var(--panel); color: var(--danger); border: 1px solid var(--danger-bd); }
.approval-bar__btn:disabled { opacity: 0.5; }
.approval-bar__desc {
  margin-top: 4px; font-size: var(--fs-micro); color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}

/* Live Dock 三态。 */
.live-dock { margin: 0 12px; }
.live-chip {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px;
  padding: 0 10px 0 12px; border-radius: var(--radius-block);
  background: var(--think-tint); color: var(--think); text-align: left;
}
.live-chip .chip-pulse { color: var(--think); }
.live-chip--flash { background: var(--ok-tint); color: var(--ok); }
.live-chip--flash .chip-pulse { display: none; }
.live-chip--flash .chip-text::before { content: "✓ "; }
.chip-text { flex: 1; min-width: 0; font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-meta { font-size: var(--fs-micro); color: var(--muted); flex: none; }
.chip-pulse {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
  animation: breathe 1.8s ease-in-out infinite;
}
.chip-chev { width: 14px; height: 14px; flex: none; }
.live-panel {
  border-radius: var(--radius-block); background: var(--panel); border: 1px solid var(--line);
  padding: 8px 0 0;
}
.live-panel__head { display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; color: var(--think); }
.live-panel__head .chip-pulse { color: var(--think); }
.live-panel__title { font-size: var(--fs-caption); font-weight: 700; color: var(--think); flex: none; }
.live-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px; color: var(--muted); flex: none;
}
.live-collapse:hover { background: var(--bg-fill); }
.live-dock-body {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 36vh; overflow-y: auto;
  padding: 8px 12px 10px;
}
.live-dock-body .mcard { padding: 10px; }

/* 直播气泡。 */
.live-msg--thinking .live-msg__label { font-size: var(--fs-micro); color: var(--think); }
.live-msg--message .live-msg__label { font-size: var(--fs-micro); color: var(--ok); }
.live-msg__label { display: inline-flex; align-items: center; gap: 4px; }
.live-msg__label svg { flex: none; }
.live-msg--thinking .live-msg__head { margin-bottom: 4px; }
.live-msg__text {
  padding: 8px 12px; border-radius: 3px 12px 12px 12px;
  background: var(--panel2); border: 1px solid var(--line);
  font-size: var(--fs-sub); line-height: 1.6; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.live-tool { padding: 7px 10px; }
.live-tool__brief { font-size: var(--fs-micro); color: var(--muted); padding: 0 0 4px; overflow-wrap: anywhere; }
.live-tool__out {
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--faint);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 96px; overflow-y: auto;
}
.live-tool__foot {
  margin-top: 4px; padding-top: 3px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--faint);
}

/* 子智能体卡。 */
.agent-card { padding: 7px 10px; }
.agent-card__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.agent-card__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.agent-card__type { font-size: 12px; font-weight: 700; color: var(--warn); flex: none; }
.agent-card__meta {
  font-size: var(--fs-micro); color: var(--faint); margin-left: auto; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.agent-status {
  font-size: var(--fs-micro); font-weight: 700; border-radius: 4px; padding: 1px 5px; flex: none;
  border: 1px solid var(--line); color: var(--muted);
}
.agent-status.is-running { color: var(--warn); border-color: var(--warn-bd); }
.agent-status.is-done { color: var(--ok); border-color: var(--ok-edge); }
.agent-status.is-failed { color: var(--danger); border-color: var(--danger-bd); }
.agent-status.is-cancelled { color: var(--muted); }
.agent-card__body { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.agent-card__action {
  font-family: var(--mono); font-size: var(--fs-caption); line-height: 1.5; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.agent-card__action.is-err { color: var(--danger); }

/* 系统持久卡 / 瞬态事件行。 */
.sys-card { padding: 6px 10px; }
.sys-card__head { display: flex; align-items: center; }
.sys-card--err { border-color: var(--danger-bd); }
.sys-card--warn { border-color: var(--warn-bd); }
.sys-card__text { margin-top: 3px; font-size: var(--fs-caption); color: var(--muted); overflow-wrap: anywhere; }
.sys-card--err .sys-card__text { color: var(--danger); }
.event-line {
  padding: 6px 10px; font-size: var(--fs-caption); color: var(--muted);
}
.event-line--err { color: var(--danger); border-color: var(--danger-bd); }

/* 接管条。 */
.takeover-bar {
  display: flex; align-items: center; gap: 8px; margin: 0 12px;
  padding: 6px 8px 6px 12px; border-radius: var(--radius-block);
  background: var(--accent-tint);
}
.takeover-bar__icon { color: var(--accent); display: inline-flex; flex: none; }
.takeover-bar__text { flex: 1; min-width: 0; font-size: var(--fs-caption); color: var(--accent); }
.takeover-bar__btn {
  padding: 6px 14px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-size: var(--fs-sub); font-weight: 500; flex: none;
}
.takeover-bar__btn:active { background: var(--accent-active); }

/* 附件芯片。 */
.attach-strip { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 6px 4px 4px; border-radius: var(--radius-block);
  background: var(--panel); border: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--text); max-width: 190px;
}
.attach-chip img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
.attach-chip__icon {
  width: 30px; height: 30px; border-radius: 6px; background: var(--sunk);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.attach-chip__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip__remove {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 14px;
}
.attach-chip__remove:hover { background: var(--panel2); color: var(--text); }

/* 输入区。 */
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 4px 12px 0; }
.attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-block); flex: none;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.attach-btn:disabled { opacity: 0.45; }
.attach-btn svg { width: 17px; height: 17px; }
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  padding: 8px 10px; border-radius: var(--radius-block);
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); font-size: var(--fs-sub); line-height: 1.5;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer textarea::placeholder { color: var(--faint); }
.send-btn {
  height: 34px; padding: 0 14px; border-radius: 8px; flex: none;
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-sub);
}
.send-btn:active { background: var(--accent-active); }
.send-btn:disabled { opacity: 0.45; }

/* 回到底部浮按钮。 */
.jump-bottom {
  position: fixed; right: 16px;
  bottom: calc(112px + env(safe-area-inset-bottom)); z-index: 8;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.jump-bottom:active { transform: scale(0.92); }
.jump-bottom svg { width: 18px; height: 18px; }

/* ══ 视图层：设置（Settings.ets）═══════════════════════════════════════ */
.settings-body { padding: 0 12px 32px; }
.settings-group { margin-bottom: 8px; }
.settings-group__label {
  margin: 16px 6px 8px; font-size: var(--fs-caption);
  font-weight: 500; color: var(--text-tertiary);
}
.settings-group__card {
  border-radius: var(--radius-card); background: var(--panel);
  border: 0.5px solid var(--line); overflow: hidden;
}
.lrow {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px 13px 16px; min-height: 52px;
  transition: transform 0.13s ease-out;
}
.lrow.is-clickable { cursor: pointer; }
.lrow.is-clickable:active { transform: scale(0.985); }
.lrow__icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent);
}
.lrow--danger .lrow__icon { background: var(--danger-tint); color: var(--danger); }
.lrow--danger .lrow__title { color: var(--danger); }
.lrow__title { flex: 1; min-width: 0; font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
.lrow__value {
  max-width: 168px; font-size: var(--fs-sub); color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none;
}
.lrow__trailing { display: inline-flex; align-items: center; flex: none; }
.lrow > svg { color: var(--text-quaternary); flex: none; }
.lrow-divider { height: 0.5px; background: var(--line); margin-left: 58px; }
.settings-note {
  margin-top: 16px; padding: 0 12px 0; text-align: center;
  font-size: var(--fs-micro); color: var(--text-tertiary); white-space: pre-wrap;
}

/* ══ 视图层：连接历史（SettingsHistory.ets）════════════════════════════ */
.navbar__count {
  font-size: var(--fs-caption); color: var(--text-tertiary);
  background: var(--bg-fill); border-radius: 999px; padding: 2px 8px; flex: none;
}
.history-body { padding: 0 12px 28px; }
.history-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 12px 14px; margin-bottom: 10px;
  border-radius: var(--radius-card); background: var(--panel);
  border: 0.5px solid var(--line); box-shadow: var(--shadow-card);
}
.history-card.is-current { border-color: var(--accent-bd); }
.history-card__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.history-card__host {
  font-size: var(--fs-body); font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.history-card__meta { font-size: var(--fs-caption); color: var(--text-tertiary); }
.history-card.is-current .history-card__meta { color: var(--accent); }
.history-card__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.history-card__actions .chip-btn { height: 28px; padding: 0 12px; font-size: var(--fs-caption); }

/* ══ 弹层（AppDialog / SheetPicker 形态）═══════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim); padding: 20px;
}
.modal-overlay--bottom { align-items: flex-end; padding: 0; }
.modal {
  width: min(86vw, 420px); padding: 20px;
  border-radius: var(--radius-sheet); background: var(--panel);
  animation: sheet-up 0.18s ease-out;
}
.modal--sheet { width: 100%; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; padding: 10px 20px 24px; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } }
.modal__title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.modal__msg {
  margin-top: 10px; font-size: var(--fs-sub); line-height: 1.5;
  color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere;
}
.modal__snippet {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-field);
  background: var(--sunk); font-family: var(--mono); font-size: var(--fs-caption);
  color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.modal__input {
  width: 100%; height: 44px; margin-top: 16px; padding: 0 12px;
  border-radius: var(--radius-field); border: 1px solid transparent;
  background: var(--bg-fill); color: var(--text); font-size: 14px;
}
.modal__input:focus { outline: none; border-color: var(--accent); }
.modal__quick { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; }
.modal__pick {
  flex: none; padding: 5px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent); font-size: var(--fs-caption);
}
.modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.modal__btn {
  flex: 1; height: 42px; border-radius: var(--radius-field);
  background: var(--bg-fill); color: var(--text-secondary); font-size: var(--fs-body);
}
.modal__btn--primary { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.modal__btn--primary:active { background: var(--accent-active); }
.modal__btn--primary--danger, .modal__btn--danger { background: var(--danger); color: var(--on-accent); font-weight: 500; }
.modal__btn:disabled { opacity: 0.45; pointer-events: none; }
.modal__choices { display: flex; flex-direction: column; margin-top: 12px; }
.modal__choice {
  display: flex; align-items: center; gap: 8px; min-height: 46px;
  padding: 8px 10px; border-radius: var(--radius-field); text-align: left;
}
.modal__choice:hover { background: var(--bg-fill); }
.modal__choice.is-selected { background: var(--accent-tint); }
.modal__choice-label { flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--text-primary); }
.modal__choice-sub { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* 底部弹层行（SheetPicker）。 */
.sheet__grabber-row { display: flex; justify-content: center; }
.sheet__grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--line); }
.sheet__title { margin-top: 12px; }
.sheet__subtitle { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-tertiary); }
.sheet__row {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 50px; text-align: left;
}
.sheet__row--danger .sheet__label { color: var(--danger); }
.sheet__label {
  flex: 1; min-width: 0; font-size: var(--fs-body); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet__row svg { color: var(--accent); flex: none; }
.sheet__cancel {
  width: 100%; height: 44px; margin-top: 8px; border-radius: var(--radius-field);
  background: var(--bg-fill); color: var(--text-secondary); font-size: var(--fs-body);
}

/* Toast（底部胶囊）。 */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.toast {
  max-width: min(86vw, 420px); padding: 9px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, #808080);
  border: 1px solid var(--line); color: var(--text);
  font-size: var(--fs-sub); box-shadow: var(--shadow-float);
  animation: toast-in 0.18s ease-out;
}
.toast--err { border-color: var(--danger-bd); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* 窄屏适配。 */
@media (max-width: 520px) {
  .view-head__title { font-size: 20px; }
  .navbar__title { font-size: 17px; }
}