/* XSAI FPGA 控制台 —— 演示级主题系统
 * 主题通过 <html data-theme="..."> 切换, 所有颜色走变量, 不重写组件样式 */

/* 主题 1: 深海（默认, 蓝青科技感） */
:root, [data-theme="deep"] {
  --bg0:#05070d; --bg1:#090d16; --panel:#0d131f; --panel2:#111928;
  --line:#1b2536; --line2:#26334a;
  --fg:#e8eef7; --dim:#93a1b5; --faint:#5d6b80;
  --acc:#3b82f6; --acc2:#22d3ee;
  --ok:#34d399; --warn:#fbbf24; --err:#f87171; --cyan:#67e8f9;
  --grad:linear-gradient(135deg,#3b82f6 0%,#22d3ee 100%);
  --glow:rgba(34,211,238,.28);
  --term-bg:#070b12; --term-fg:#e8eef7; --term-cursor:#22d3ee;
  --sb-thumb:#2a314a; --sb-thumb-hover:#3a4560; --sb-track:#0a0e17;
}
/* 主题 2: 香山（橙枫, 与香山 logo 呼应） */
[data-theme="xiangshan"] {
  --bg0:#0c0705; --bg1:#140d09; --panel:#1a110b; --panel2:#22160e;
  --line:#33211633; --line2:#3d2818;
  --fg:#f5ece5; --dim:#a89486; --faint:#6d5a4d;
  --acc:#e8642a; --acc2:#f5a524;
  --ok:#3ddc97; --warn:#fbbf24; --err:#f87171; --cyan:#ffb877;
  --grad:linear-gradient(135deg,#e8642a 0%,#f5a524 100%);
  --glow:rgba(245,165,36,.28);
  --term-bg:#0f0805; --term-fg:#f5ece5; --term-cursor:#f5a524;
  --sb-thumb:#41291a; --sb-thumb-hover:#5a3a24; --sb-track:#100804;
}
/* 主题 3: 极简（浅色, 投影/打印友好） */
[data-theme="light"] {
  --bg0:#eef1f6; --bg1:#ffffff; --panel:#ffffff; --panel2:#f4f6fa;
  --line:#dde3ec; --line2:#c9d2e0;
  --fg:#151b26; --dim:#5a6678; --faint:#8b97a8;
  --acc:#2563eb; --acc2:#0891b2;
  --ok:#059669; --warn:#d97706; --err:#dc2626; --cyan:#0e7490;
  --grad:linear-gradient(135deg,#2563eb 0%,#0891b2 100%);
  --glow:rgba(37,99,235,.22);
  --term-bg:#0d1117; --term-fg:#e8eef7; --term-cursor:#0891b2;
  --sb-thumb:#c3ccd9; --sb-thumb-hover:#a9b5c6; --sb-track:#f0f3f8;
}
:root {
  --r:14px; --rs:10px;
  /* 品牌色: 取自 logo 实测值(香山枫叶橙 / 思沃青绿) */
  --xs-orange:#e85020;  --xs-orange-2:#f86820;
  --siwo-teal:#40a0a0;  --siwo-teal-2:#48a8a0;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,"SF Pro Text","Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
}
/* 滚动条: 必须用主题变量 —— Chromium 121+ 的标准 scrollbar-color 会覆盖 ::-webkit-scrollbar,
 * 若在这里写死颜色, 非深色主题下就会露出一条突兀的黑线(近黑滑块+近黑轨道) */
*{box-sizing:border-box;scrollbar-width:thin;
  scrollbar-color:var(--sb-thumb) var(--sb-track)}
::selection{background:color-mix(in srgb, var(--acc) 35%, transparent)}
html,body{height:100%}
body{
  margin:0;color:var(--fg);font:14px/1.55 var(--sans);
  background:
    radial-gradient(1100px 500px at 85% -10%, color-mix(in srgb, var(--acc2) 8%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 60%),
    var(--bg0);
  display:flex;flex-direction:column;overflow:hidden;
  transition:background .35s, color .35s;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--sb-track)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;border:2.5px solid var(--sb-track)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
::-webkit-scrollbar-corner{background:var(--sb-track)}
.xterm .xterm-scrollable-element > .scrollbar{background:transparent!important}
.xterm .xterm-scrollable-element > .scrollbar > .slider{background:rgba(255,255,255,.14)!important;border-radius:6px}
.xterm .xterm-scrollable-element > .scrollbar > .slider:hover{background:rgba(255,255,255,.26)!important}

/* ---------- 顶栏 ---------- */
#topbar{
  display:flex;align-items:center;gap:18px;padding:0 20px;height:60px;flex:0 0 auto;
  background:color-mix(in srgb, var(--panel) 78%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);z-index:5;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo-img{height:30px;width:auto;flex:0 0 auto;object-fit:contain;border-radius:7px}
.logo-img.xs{height:32px}
/* 每个 logo 两版: 深色主题用亮色元素版, 浅色主题用原版(黑/深色元素) */
.only-light{display:none!important}
[data-theme="light"] .only-dark{display:none!important}
[data-theme="light"] .only-light{display:block!important}
.logo-sep{width:1px;height:24px;background:var(--line2);flex:0 0 auto}
.brand-txt h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
/* 标题双品牌色: XSAI 用香山枫叶橙, 思沃用思沃青绿(均为 logo 实测色)
 * & 保持中性: 它是连接符, 职责是退后让两侧品牌色各自成立;
 * 且单个 & 仅约 10px 宽, 渐变/双色在该尺寸会糊成一团(实测对比过), 故不加彩色 */
.brand-txt h1 .b-xs{color:var(--xs-orange)}
.brand-txt h1 .b-siwo{color:var(--siwo-teal)}
.brand-txt h1 .b-amp{color:var(--dim);font-weight:400}
.brand-txt h1 .b-rest{color:var(--fg)}
.brand-txt p{margin:2px 0 0;font-size:11px;color:var(--faint);letter-spacing:1.2px}
.theme-btn{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.chips{display:flex;gap:8px;align-items:center}
.chip{
  display:flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);
  font-size:12px;color:var(--dim);white-space:nowrap;
}
.chip b{color:var(--fg);font-weight:650;font-variant-numeric:tabular-nums}
.chip.ok b{color:var(--ok)} .chip.warn b{color:var(--warn)} .chip.err b{color:var(--err)}
#alert{
  font-size:12px;color:var(--dim);background:color-mix(in srgb, var(--dim) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--dim) 26%, transparent);border-radius:8px;padding:5px 12px;display:none;
  max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 需要留意的状态才用琥珀色; 中性状态(排队/等待取消)保持素色, 避免看起来像故障 */
#alert.warn{
  color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, transparent);
  border-color:color-mix(in srgb, var(--warn) 30%, transparent);
}

/* ---------- 主体布局 ---------- */
main{flex:1;display:flex;min-height:0}
#side{
  width:332px;flex:0 0 auto;padding:16px 14px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb, var(--bg1) 62%, transparent);border-right:1px solid var(--line);
}
.card{
  background:linear-gradient(180deg,color-mix(in srgb, var(--panel2) 78%, transparent),color-mix(in srgb, var(--panel) 78%, transparent));
  border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
}
.cap{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:10.5px;font-weight:650;letter-spacing:1.8px;color:var(--faint);
  text-transform:uppercase;margin-bottom:9px;
}
.cnt{color:var(--acc2);letter-spacing:0}

/* 可折叠卡片(任务/历史) */
details.fold > summary.cap{
  cursor:pointer;user-select:none;list-style:none;margin-bottom:0;
  transition:color .15s;
}
details.fold > summary.cap::-webkit-details-marker{display:none}
details.fold > summary.cap:hover{color:var(--dim)}
details.fold > summary.cap .chev{
  flex:0 0 auto;width:8px;height:8px;align-self:center;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
  transform:rotate(-45deg);transition:transform .18s ease;margin-left:6px;
}
details.fold[open] > summary.cap .chev{transform:rotate(45deg)}
details.fold > summary.cap{margin-bottom:2px}
details.fold > .queue,details.fold > .row2{margin-top:8px}
details.fold > .queue:empty{display:none}

select,input[type=number],input[type=text]{
  width:100%;background:var(--bg1);color:var(--fg);border:1px solid var(--line2);
  border-radius:var(--rs);padding:8.5px 11px;font:13px var(--sans);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
select:focus,input:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent)}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393a1b5' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;
}
.row2{display:flex;gap:8px;margin-top:9px}
.row2 input[type=text]{margin:0}
/* 本地上传: 自绘拖拽区 —— 原生 input[type=file] 未选文件时只是个灰方块,
 * 且各系统外观不一致, 不适合上电视的界面 */
.drop{
  display:flex;align-items:center;gap:9px;margin-top:9px;padding:0 11px;min-height:40px;
  border:1.5px dashed var(--line2);border-radius:var(--rs);background:var(--bg1);
  color:var(--faint);font-size:12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.drop:hover{border-color:var(--acc);color:var(--dim);background:var(--panel2)}
.drop.over{border-color:var(--acc);color:var(--fg);background:color-mix(in srgb,var(--acc) 11%,transparent)}
.drop.has{
  border-style:solid;border-color:color-mix(in srgb,var(--acc) 45%,transparent);
  color:var(--fg);background:color-mix(in srgb,var(--acc) 7%,transparent);
}
.drop input{display:none}
.dico{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.dtxt{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtxt b{font-weight:650}
.dtxt i{font-style:normal;color:var(--faint);margin-left:7px;font-size:10.5px}
.drop.has .dico{color:var(--acc)}
#upbtn{
  flex:0 0 auto;display:none;padding:4.5px 12px;font-size:11.5px;font-weight:650;border-radius:7px;
  color:#fff;background:var(--acc);box-shadow:0 2px 8px color-mix(in srgb,var(--acc) 32%,transparent);
}
#upbtn:hover:not(:disabled){filter:brightness(1.08)}
#upbtn:disabled{opacity:.6;filter:none}

/* 比特流分段 */

/* 按钮 */
button{
  border:0;cursor:pointer;font-family:var(--sans);border-radius:var(--rs);
  transition:transform .1s, box-shadow .2s, opacity .15s, background .15s;
}
button:active{transform:scale(.985)}
button:disabled{opacity:.45;cursor:default;transform:none}
/* 开始烧录: 香山品牌橙(取 logo 实测色 #e85020), 与顶栏品牌标识呼应 */
#run{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 10px;font-size:15px;font-weight:750;letter-spacing:2px;color:#fff;
  background:linear-gradient(135deg,var(--xs-orange) 0%,var(--xs-orange-2) 100%);
  box-shadow:0 4px 22px rgba(232,80,32,.30), inset 0 1px 0 rgba(255,255,255,.24);
}
#run:hover:not(:disabled){
  box-shadow:0 6px 32px rgba(232,80,32,.46), inset 0 1px 0 rgba(255,255,255,.24);
  filter:brightness(1.05);
}
#run:disabled{background:var(--panel2);box-shadow:none;color:var(--faint);filter:none}
/* 按钮上的香山 logo: 白色单色版(实测 30px 才看清山形+枫叶) */
.runlogo{height:34px;width:auto;flex:0 0 auto;margin-top:-2px;filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.26))}
.stop{
  flex:1;padding:13px 10px;font-size:14px;font-weight:650;letter-spacing:2px;display:none;
  color:var(--err);background:color-mix(in srgb, var(--err) 10%, transparent);border:1px solid color-mix(in srgb, var(--err) 42%, transparent);
}
.stop:hover{background:color-mix(in srgb, var(--err) 18%, transparent)}
.actions{display:flex;gap:9px}
.ghost{
  background:var(--panel2);border:1px solid var(--line2);color:var(--dim);
  padding:7px 13px;font-size:12px;font-weight:600;
}
.ghost:hover:not(:disabled){color:var(--fg);border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent)}
.ghost.sm{padding:5.5px 11px;font-size:11.5px;border-radius:8px}

/* 进度 */
#bar{height:7px;background:var(--bg1);border-radius:99px;overflow:hidden;margin-top:12px;border:1px solid var(--line)}
#barfill{
  height:100%;width:0;border-radius:99px;background:var(--grad);
  transition:width .5s cubic-bezier(.3,.7,.3,1);position:relative;
}
#barfill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
#barlabel{font-size:11.5px;color:var(--dim);margin-top:7px;min-height:16px;letter-spacing:.3px}

/* 队列/历史 */
.queue{font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.qrow{display:flex;align-items:center;gap:9px;padding:5px 7px;border-radius:8px}
.qrow:hover{background:color-mix(in srgb, var(--acc) 7%, transparent)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--faint)}
.dot.running{background:var(--ok);animation:pulse 1.8s infinite}
.dot.pending{background:var(--warn)}
.dot.canceling{background:var(--err)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent)}
  70%{box-shadow:0 0 0 7px color-mix(in srgb, var(--ok) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent)}
}
.qtitle{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);cursor:pointer}
.qtitle:hover{color:var(--fg)}
.qrow .stat{font-size:11px;flex:0 0 auto}
.qrow a{color:var(--faint);text-decoration:none;padding:0 4px;font-size:14px;line-height:1}
.qrow a:hover{color:var(--err)}
.qempty{color:var(--faint);font-size:12px;padding:4px 7px}

/* 选项 */
.sw{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:12.5px;padding:4px 0;cursor:pointer;user-select:none}
.sw:hover{color:var(--fg)}
.sw input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}
.adv summary{cursor:pointer;color:var(--faint);font-size:11.5px;user-select:none}
.adv summary:hover{color:var(--dim)}

/* 比特流: 纵向整行 —— 单行三分栏只有 79px, 放不下 "昆明湖v2+8Tops AME"(需 134px),
 * 硬塞会缩到 9px 不可读; 整行 262px 可让主名 12.5px + 规格 11px 都清晰 */
.bitlist{display:flex;flex-direction:column;gap:6px}
.bit{
  display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:var(--rs);cursor:pointer;
  background:var(--bg1);border:1px solid var(--line2);color:var(--dim);
  font-size:12.5px;font-weight:600;transition:all .15s;position:relative;
}
.bit:hover{color:var(--fg);background:var(--panel2)}
.bit.on{
  color:var(--fg);border-color:color-mix(in srgb, var(--acc) 65%, transparent);
  background:color-mix(in srgb, var(--acc) 14%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent), inset 0 0 18px color-mix(in srgb, var(--acc2) 7%, transparent);
}
.bit input{display:none}
.bit .dot{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line2);background:var(--bg0);transition:all .15s;
}
.bit:hover .dot{border-color:var(--dim)}
.bit.on .dot{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 2.5px var(--bg1)}
.bit .nm{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bit .sp{
  flex:0 0 auto;font-size:11px;font-weight:500;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bit.on .sp{color:var(--acc2)}

/* 选项开关并排(省一行高度) */
.swrow{display:flex;gap:14px;flex-wrap:wrap}
.swrow .sw{flex:0 0 auto}

/* ---------- 右侧终端区 ---------- */
#termwrap{flex:1;display:flex;flex-direction:column;min-width:0}
.tabs{
  display:flex;align-items:center;gap:2px;padding:0 14px;height:46px;flex:0 0 auto;
  background:color-mix(in srgb, var(--bg1) 62%, transparent);border-bottom:1px solid var(--line);
}
.tab{
  position:relative;padding:0 18px;height:100%;display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--dim);cursor:pointer;letter-spacing:1px;user-select:none;
  transition:color .15s;
}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg);font-weight:650}
.tab.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2.5px;
  background:var(--grad);border-radius:3px 3px 0 0;box-shadow:0 0 12px var(--glow);
}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--ok);opacity:0;transition:opacity .3s;box-shadow:0 0 8px var(--ok)}
.tdot.on{opacity:1}
.tabside{margin-left:auto;display:flex;align-items:center;gap:8px}
.tsep{width:1px;height:16px;background:var(--line2);flex:0 0 auto;margin:0 2px}
.pill{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);
  background:var(--bg1);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.pill.live::before{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.pill.wait::before{background:var(--warn);animation:pulse 1.8s infinite}
.pill.err::before{background:var(--err)}
.pill.hist::before{background:var(--cyan)}

#status{
  padding:5px 18px;font-size:11.5px;color:var(--dim);min-height:26px;flex:0 0 auto;
  background:var(--bg1);border-bottom:1px solid var(--line);
  display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  letter-spacing:.3px;
}
.pane{flex:1;min-height:0;padding:8px 12px 10px;display:none;position:relative}
.pane.on{display:flex;flex-direction:column}
.pane > div:first-child{flex:1 1 auto;min-height:0;height:100%}

/* 终端面板: xterm 永远是深色(终端惯例), 容器也用 term-bg 使面板成为完整深色区域;
 * 提示文字用固定浅色而非主题变量 —— 否则浅色主题下会"浅字压深底"而不可见 */
#pane-term{background:var(--term-bg);border-radius:var(--rs);margin:8px 0 0}
#pane-job{background:var(--term-bg);border-radius:var(--rs);margin:8px 0 0}
.hint{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;color:#7b8a9e;pointer-events:none;padding:30px;text-align:center;
  background:radial-gradient(600px 300px at 50% 40%, color-mix(in srgb, var(--acc2) 6%, transparent), transparent 70%);
}
.hint svg{width:46px;height:46px;opacity:.55}
.hint p{margin:0;font-size:13px;line-height:1.9;color:#9fb0c4}
.hint b{color:#e8eef7}
.hint span{font-size:11.5px;color:#6b7a8d}
.hint.off{display:none}

/* "回到最新" 浮动提示: 用户往上翻看历史输出时出现 */
#tobottom,#tobottom-job{
  position:absolute;right:22px;bottom:22px;display:none;z-index:3;
  padding:6px 13px;font-size:11.5px;font-weight:600;border-radius:999px;
  color:var(--fg);background:color-mix(in srgb, var(--panel2) 92%, transparent);
  border:1px solid var(--line2);box-shadow:0 4px 16px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;
}
#tobottom:hover,#tobottom-job:hover{border-color:var(--acc);color:var(--acc2)}
#tobottom.show,#tobottom-job.show{display:block}

/* ---------- 对话页签: 把 UART 交互渲染成聊天 ---------- */
.chatwrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
.chatlist{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 4px 6px;
  display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;position:relative;
}
/* 消息行: 用户靠右(品牌橙), 板卡靠左(浅色卡片)
 * 板卡回复不再用深色终端块: 浅色主题下那是突兀的黑框, 且当时设了 max-height -> 必然出滚动条。
 * 现改为"跟随主题的弱底色卡片", 高度自适应(内容多长就多长, 由外层列表统一滚动, 不出现二级滚动条)。 */
.msg{display:flex;flex-direction:column;max-width:88%;min-width:0}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.bot{align-self:flex-start;align-items:flex-start}
.bubble{
  padding:9px 13px;border-radius:var(--rs);font-size:13px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;position:relative;min-width:0;
}
.msg.me .bubble{
  color:#fff;background:linear-gradient(135deg,var(--xs-orange) 0%,var(--xs-orange-2) 100%);
  border-bottom-right-radius:4px;font-family:var(--mono);box-shadow:0 2px 10px rgba(232,80,32,.22);
}
.msg.bot .bubble{
  font-family:var(--mono);font-size:12.5px;color:var(--fg);
  background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:4px;
  /* 不设 max-height: 长输出完整展开, 滚动交给 #chatlist 统一处理, 避免"框内还有滚动条" */
  overflow-x:auto;
}
.msg.bot .bubble::-webkit-scrollbar{height:8px}
.msg.bot .bubble.sys{background:var(--panel2);color:var(--dim);font-family:var(--sans);font-size:12px}
.msg.bot .bubble.err{background:color-mix(in srgb,var(--err) 12%,transparent);border-color:color-mix(in srgb,var(--err) 40%,transparent);color:var(--err);font-family:var(--sans);font-size:12px}
.msg .meta{font-size:10.5px;color:var(--faint);margin:4px 4px 0;letter-spacing:.3px}
.msg .meta b{color:var(--dim);font-weight:600}
/* 运行中: 气泡右下角显示脉冲点 */
.msg.bot.streaming .bubble::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;
  background:var(--acc2);animation:pulse 1.4s infinite;vertical-align:middle;
}
/* 聊天空态: 跟随主题(终端空态是深色终端底上的固定浅色, 这里不能沿用) */
.chatempty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:30px;text-align:center;pointer-events:none;color:var(--faint);
}
.chatempty svg{width:44px;height:44px;opacity:.55}
.chatempty p{margin:0;font-size:13px;color:var(--dim);line-height:1.8;max-width:620px}
.chatempty p.sub{font-size:11.5px;color:var(--faint)}
.chatempty code{
  font-family:var(--mono);background:var(--panel2);padding:1px 5px;border-radius:4px;color:var(--fg);
  border:1px solid var(--line);
}
.chatempty.off{display:none}
/* 对话模式切换 + 模型选择 */
.chatmode{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.modeseg{display:flex;background:var(--bg1);border:1px solid var(--line2);border-radius:9px;padding:2px}
.modeseg button{
  padding:5px 13px;font-size:12px;font-weight:600;border-radius:7px;
  background:none;color:var(--dim);border:0;
}
.modeseg button:hover{color:var(--fg)}
.modeseg button.on{background:var(--panel2);color:var(--fg);box-shadow:0 1px 4px rgba(0,0,0,.12)}
#aimodel{width:auto;min-width:190px;font-size:11.5px;padding:5px 26px 5px 9px}
.aimstate{font-size:11px;color:var(--faint);white-space:nowrap}

/* 预填充演示按钮组 */
.chipgroup{font-size:11px;color:var(--faint);align-self:center;margin-left:4px}
.pfbtn{
  border-color:color-mix(in srgb, var(--acc) 45%, transparent)!important;
  color:var(--acc2)!important;
}
.pfbtn:hover{background:color-mix(in srgb, var(--acc) 12%, transparent)!important;color:var(--fg)!important}

/* ---- Agent 行动过程与结果卡片 ---- */
.agentsteps{display:flex;flex-direction:column;gap:3px;margin:2px 0 6px}
.astep{
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);
  font-family:var(--sans);
}
.astep i{
  width:5px;height:5px;border-radius:50%;background:var(--acc2);flex:0 0 auto;
  box-shadow:0 0 6px var(--acc2);
}
.astep.dim{color:var(--faint)} .astep.dim i{background:var(--faint);box-shadow:none}
.astep.ok{color:var(--ok)} .astep.ok i{background:var(--ok);box-shadow:0 0 6px var(--ok)}

.agentcard{
  border:1px solid var(--line);border-left:2.5px solid var(--acc);
  border-radius:9px;background:var(--bg1);padding:9px 11px;margin:2px 0 6px;
  font-size:12px;max-width:100%;overflow-x:auto;
}
.agentcard .chead{color:var(--fg);font-weight:600;margin-bottom:6px;font-size:12.5px}
.agentcard .chead b{color:var(--acc2)}
.agentcard .crow{display:flex;align-items:center;gap:8px;padding:2.5px 0;color:var(--fg)}
.agentcard .crow.dim{color:var(--faint)}
.agentcard .crow .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.agentcard .crow .dot.running{background:var(--ok)} .agentcard .crow .dot.pending{background:var(--warn)}
.agentcard .crow .dot.canceling{background:var(--err)}
.agentcard .ctitle{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:11.5px;
}
.agentcard .cscope{flex:0 0 auto;color:var(--faint);font-size:11px}
.agentcard .csep{margin-top:7px;padding-top:6px;border-top:1px solid var(--line);color:var(--faint);font-size:10.5px;margin-bottom:3px}

.agentconfirm{
  border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background:color-mix(in srgb, var(--warn) 9%, transparent);
  border-radius:9px;padding:9px 11px;margin:2px 0 6px;font-size:12px;
}
.agentconfirm p{margin:0 0 8px;color:var(--fg)}
.agentconfirm .cbtns{display:flex;gap:8px}
.agentconfirm button{
  padding:5px 14px;font-size:12px;font-weight:600;border-radius:7px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--dim);
}
.agentconfirm button.ok{background:var(--acc);color:#fff;border-color:transparent}
.agentconfirm button:hover{filter:brightness(1.08);color:var(--fg)}
.agentconfirm button.ok:hover{color:#fff}

/* Agent: 本机回退时的来源警示(很重要 —— 否则会把 Mac 数据误当成板卡结果) */
.agentcard .csrcline{
  font-size:11px;color:var(--warn);margin:0 0 6px;
  background:color-mix(in srgb, var(--warn) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius:6px;padding:4px 8px;
}
.agentcard .csrcline b{color:var(--warn)}

/* Agent 命令/输出展示 */
.agentcard .chost{color:var(--faint);font-size:10.5px;font-weight:400;margin-left:6px}
.agentcard .cout{
  margin:6px 0 0;padding:8px 10px;border-radius:7px;background:var(--term-bg);color:var(--term-fg);
  font:11.5px/1.65 var(--mono);white-space:pre-wrap;word-break:break-word;
  max-height:280px;overflow:auto;
}
.agentcard .csrc{margin-top:7px}
.agentcard .csrc summary{
  cursor:pointer;font-size:11px;color:var(--faint);user-select:none;
}
.agentcard .csrc summary:hover{color:var(--dim)}
.agentcard .ccode{
  margin:6px 0 0;padding:8px 10px;border-radius:7px;background:var(--panel2);
  border:1px solid var(--line);color:var(--dim);
  font:10.5px/1.6 var(--mono);white-space:pre-wrap;max-height:200px;overflow:auto;
}

/* ---- 推理指标条 ---- */
.metrics{
  display:flex;flex-wrap:wrap;gap:6px;margin:7px 2px 0;
}
.mchip{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:3px 9px;border-radius:7px;font-size:11px;
  background:var(--bg1);border:1px solid var(--line);
}
.mchip i{font-style:normal;color:var(--faint);font-size:10px;letter-spacing:.2px}
.mchip b{
  color:var(--acc2);font-weight:700;font-size:12.5px;
  font-variant-numeric:tabular-nums;font-family:var(--mono);
}
.mchip u{text-decoration:none;color:var(--faint);font-size:9.5px}

/* 输入区 */
.chatbar{flex:0 0 auto;padding:10px 4px 2px;border-top:1px solid var(--line)}
.chatchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.chatchips button{
  padding:4px 10px;font-size:11.5px;border-radius:999px;font-family:var(--mono);
  color:var(--dim);background:var(--panel2);border:1px solid var(--line2);
}
.chatchips button:hover:not(:disabled){color:var(--fg);border-color:var(--acc)}
.chatinput{display:flex;gap:8px}
.chatinput input{
  flex:1;font-family:var(--mono);font-size:13px;padding:10px 12px;
}
.chatinput input:disabled{opacity:.55;cursor:not-allowed}
#chatsend{
  flex:0 0 auto;padding:0 20px;font-size:13.5px;font-weight:650;color:#fff;
  background:linear-gradient(135deg,var(--xs-orange),var(--xs-orange-2));border-radius:var(--rs);
}
#chatsend:hover:not(:disabled){filter:brightness(1.07)}
#chatsend:disabled{background:var(--panel2);color:var(--faint);filter:none}
.chatfoot{
  display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-size:11px;color:var(--faint);min-height:15px;
}
.chatfoot #chatstate::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--faint);margin-right:6px;vertical-align:middle;
}
.chatfoot #chatstate.live::before{background:var(--ok);box-shadow:0 0 7px var(--ok)}
.chatfoot #chatstate.wait::before{background:var(--warn);animation:pulse 1.8s infinite}
/* 页签工具栏在聊天页收起 */
.tabside.hide{display:none}
/* 文字型小按钮(清空对话) */
.linkbtn{
  background:none;border:0;padding:0;font-size:11px;color:var(--faint);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.linkbtn:hover{color:var(--dim)}

/* 高级设置里的小字提示 */
.hintline{font-size:10.5px;line-height:1.6;color:var(--faint);margin-top:5px}
/* 启动参数: 所选负载 cmdline 解析框 */
.cmdinfo{
  margin-top:7px;font:10.5px/1.6 var(--mono);color:var(--faint);
  background:var(--bg1);border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  word-break:break-all;max-height:120px;overflow-y:auto;
}
.cmdinfo .cur{color:var(--dim);display:block;margin-bottom:3px}
.cmdinfo .ok{color:var(--ok)} .cmdinfo .warn{color:var(--warn)} .cmdinfo .err{color:var(--err)}
.cmdinfo b{color:var(--cyan);font-weight:600}

/* ---------- 底栏 / toast ---------- */
#foot{
  height:30px;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:11px;color:var(--faint);
  background:color-mix(in srgb, var(--bg1) 72%, transparent);border-top:1px solid var(--line);letter-spacing:.5px;
}
/* 中间署名绝对居中: 左右两段文字长度不等, 用 space-between 会把中段推偏。
   绝对定位 + translateX(-50%) 才能真居中(与左右段长度无关)。 */
#footcenter{
  position:absolute;left:50%;transform:translateX(-50%);
  color:var(--faint);white-space:nowrap;pointer-events:none;
}
@media (max-width:700px){ #footcenter{display:none} }   /* 极窄屏优先保左侧流水线状态 */
#footlink a{color:var(--acc2);text-decoration:none}
#toasts{position:fixed;right:18px;bottom:44px;display:flex;flex-direction:column;gap:9px;z-index:50}
.toast{
  background:color-mix(in srgb, var(--panel2) 96%, transparent);border:1px solid var(--line2);border-left:3px solid var(--acc);
  color:var(--fg);font-size:12.5px;border-radius:10px;padding:10px 16px;max-width:360px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);animation:tin .25s cubic-bezier(.2,.9,.3,1.2);
}
.toast.err{border-left-color:var(--err)}
.toast.ok{border-left-color:var(--ok)}
.toast.out{opacity:0;transform:translateY(6px);transition:all .3s}
@keyframes tin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

@media (max-width:1180px){ #side{width:290px} }
@media (max-width:1020px){ .brand-txt p{display:none} }

/* ---------- 运行中锁定运行配置 ----------
 * 任务跑起来后, 负载/比特流/交互模式/启动参数都不该再改(改了也不会生效, 只会让人以为生效了)。
 * 置灰 + 屏蔽点击, 只留「停止」; 演示模式开关是显示偏好, 保持可用(见 .keep-live)。 */
#side.locked .cfg select,
#side.locked .cfg .bitlist,
#side.locked .cfg details.adv,
#side.locked .cfg .swrow label:not(.keep-live) {
  opacity: .45;
  pointer-events: none;
}
#side.locked .cfg ul,
#side.locked .cfg .cap { }
#side.locked #card-workload .cap,
#side.locked #card-bit .cap {
  opacity: .6;
}
#side.locked .cfg select,
#side.locked .cfg input[type="number"],
#side.locked .cfg input[type="text"] {
  cursor: not-allowed;
}

/* 运行中锁定提示: 明确告诉用户"为什么点不动、要怎么做" */
#side .lockhint {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  pointer-events: none;
}

/* 步骤进行中: 用转圈指示器代替静态圆点(表示"正在做", 而不是已完成) */
.astep.run i{
  width:9px;height:9px;border-radius:50%;
  background:transparent;
  border:1.5px solid color-mix(in srgb, var(--acc2) 30%, transparent);
  border-top-color:var(--acc2);
  box-shadow:none;
  animation:astep-spin .7s linear infinite;
}
@keyframes astep-spin{to{transform:rotate(360deg)}}

/* 代码气泡: 等宽字体 + 浅底, 让"这是代码"一眼可辨 */
.bubble.code{
  font-family:var(--mono);font-size:12.5px;line-height:1.55;
  background:color-mix(in srgb, var(--panel2) 88%, transparent);
  border:1px solid var(--line);
}