/* ============================================================
   MUZHI · AGENT CONSOLE SHARED MODULES · Agent 平台控制台共享模块
   ------------------------------------------------------------
   被 2 个以上 Agent 平台页面使用的样式才放在这里；只服务单个
   页面的样式请留在该页面的 <style> 内（见 MODULES.md 第 5 章）。

   依赖：muzhi/tokens.css → muzhi/modules.css → 本文件
   页面壳：<body data-shell="console" data-agent-shell>
   全部颜色走令牌，明暗双主题自动成立。
   ============================================================ */

/* ============ A · 布局增强 ============ */
.stack{display:flex;flex-direction:column;gap:16px}
.stack-sm{display:flex;flex-direction:column;gap:10px}
.row-flex{display:flex;align-items:center;gap:10px}
.row-flex .sp{margin-left:auto}
.wrap-flex{flex-wrap:wrap}
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split-side{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.muted{color:var(--fg-3)}
.mono{font-family:var(--mono)}
.fs-12{font-size:12px}
.fs-13{font-size:13px}
.nowrap{white-space:nowrap}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none !important}

/* ============ B · 标签页 ============ */
.tabs{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);margin:-4px 0 4px}
.tab{position:relative;border:none;background:transparent;color:var(--fg-3);font-family:var(--font);font-size:13px;padding:9px 14px;cursor:pointer;border-radius:8px 8px 0 0;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--seed-fg);background:color-mix(in oklab,var(--seed-fg) 5%,transparent)}
.tab.on{color:var(--acc)}
.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--acc);border-radius:2px}
.tab .n{font-family:var(--mono);font-size:10.5px;color:var(--fg-3);background:color-mix(in oklab,var(--seed-fg) 7%,transparent);padding:1px 7px;border-radius:99px;margin-left:6px}
.tab.on .n{color:var(--acc);background:var(--acc-soft)}
.tabpanel{display:none}
.tabpanel.on{display:block}

/* ============ C · 开关 ============ */
.switch{position:relative;display:inline-flex;width:36px;height:20px;flex:none;cursor:pointer;vertical-align:middle}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:color-mix(in oklab,var(--seed-fg) 14%,transparent);border:1px solid var(--line-2);border-radius:99px;transition:all .18s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--fg-3);transition:all .18s}
.switch input:checked + i{background:var(--acc-soft);border-color:var(--acc-line)}
.switch input:checked + i::after{transform:translateX(16px);background:var(--acc)}
.switch input:disabled + i{opacity:.45;cursor:not-allowed}
.switch input:focus-visible + i{box-shadow:0 0 0 3px var(--acc-glow)}

/* ============ D · 表单控件 ============ */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12px;color:var(--fg-3);font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase}
.field .hint{font-size:11.5px;color:var(--fg-3);line-height:1.5}
.input,.select,.textarea{
  width:100%;font-family:var(--font);font-size:13px;color:var(--seed-fg);
  background:color-mix(in oklab,var(--seed-fg) 5%,transparent);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;
  transition:border-color .15s,background .15s;outline:none;
}
.input::placeholder,.textarea::placeholder{color:var(--fg-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--acc-line);background:var(--acc-soft)}
.textarea{resize:vertical;min-height:96px;line-height:1.65;font-family:var(--mono);font-size:12.5px}
.select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.select option{background:var(--seed-surface);color:var(--seed-fg)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.form-grid .span-2{grid-column:1 / -1}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
.checks{display:flex;flex-wrap:wrap;gap:10px 18px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;background:color-mix(in oklab,var(--seed-fg) 4%,transparent)}
.seg button{border:none;background:transparent;color:var(--fg-3);font-family:var(--font);font-size:12.5px;padding:6px 14px;cursor:pointer;transition:all .15s}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--seed-fg)}
.seg button.on{background:var(--acc-soft);color:var(--acc);font-weight:500}

/* ============ E · 弹层 ============ */
.mask{position:fixed;inset:0;background:color-mix(in oklab,var(--seed-bg) 72%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;transition:opacity .18s}
.mask.show{opacity:1}
.modal{
  width:100%;max-width:640px;max-height:86vh;display:flex;flex-direction:column;
  background:var(--seed-surface);border:1px solid var(--line-2);border-radius:calc(var(--seed-radius) + 4px);
  box-shadow:0 24px 64px color-mix(in oklab,var(--seed-bg) 60%,transparent);
  transform:translateY(10px) scale(.99);transition:transform .18s;
}
.mask.show .modal{transform:none}
.modal.wide{max-width:880px}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:15px;font-weight:600}
.modal-h .x{margin-left:auto;width:28px;height:28px;border:none;background:transparent;color:var(--fg-3);font-size:20px;line-height:1;cursor:pointer;border-radius:7px}
.modal-h .x:hover{color:var(--seed-fg);background:color-mix(in oklab,var(--seed-fg) 7%,transparent)}
.modal-b{padding:20px 22px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line)}
.btn-danger{background:var(--red);color:#2a0508;font-weight:600}
.btn-danger:hover{filter:brightness(1.1)}
.btn-sm{height:28px;padding:0 12px;font-size:12px}

/* 抽屉 */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);z-index:210;
  background:var(--seed-surface);border-left:1px solid var(--line-2);
  box-shadow:-20px 0 60px color-mix(in oklab,var(--seed-bg) 50%,transparent);
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .24s cubic-bezier(.32,.72,.3,1);
}
.drawer.show{transform:none}
.drawer-h{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:15px;font-weight:600}
.drawer-h .x{margin-left:auto;width:28px;height:28px;border:none;background:transparent;color:var(--fg-3);font-size:20px;line-height:1;cursor:pointer;border-radius:7px}
.drawer-h .x:hover{color:var(--seed-fg);background:color-mix(in oklab,var(--seed-fg) 7%,transparent)}
.drawer-b{flex:1;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.drawer-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line)}

/* ============ F · Toast ============ */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;max-width:520px;
  padding:10px 18px;border-radius:99px;font-size:13px;
  background:var(--seed-surface);border:1px solid var(--line-2);color:var(--seed-fg);
  box-shadow:0 12px 32px color-mix(in oklab,var(--seed-bg) 46%,transparent);
  animation:toast-in .22s ease-out;
}
.toast .ic{width:17px;height:17px;flex:none}
.toast.ok{border-color:color-mix(in oklab,var(--green) 42%,transparent)}
.toast.ok .ic{color:var(--green)}
.toast.warn{border-color:color-mix(in oklab,var(--amber) 42%,transparent)}
.toast.warn .ic{color:var(--amber)}
.toast.err{border-color:color-mix(in oklab,var(--red) 42%,transparent)}
.toast.err .ic{color:var(--red)}
.toast.info .ic{color:var(--acc)}
.toast.out{animation:toast-out .2s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ============ G · 列表行 ============ */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);transition:background .15s}
.row:last-child{border-bottom:none}
.row:hover{background:color-mix(in oklab,var(--seed-fg) 3%,transparent)}
.row.sel{background:var(--acc-soft)}
.row .ava{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--acc-soft);border:1px solid var(--acc-line)}
.row-main{min-width:0;flex:1}
.row-main .t1{font-size:13.5px;color:var(--seed-fg);font-weight:500;display:flex;align-items:center;gap:8px}
.row-main .t2{font-size:11.5px;color:var(--fg-3);font-family:var(--mono);margin-top:3px}
.row-actions{display:flex;gap:6px;opacity:0;transition:opacity .15s;flex:none}
.row:hover .row-actions{opacity:1}
.ibtn{width:28px;height:28px;border:1px solid var(--line-2);background:transparent;border-radius:8px;color:var(--fg-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:12px;font-family:var(--font)}
.ibtn:hover{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
.ibtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn.danger:hover{color:var(--red);border-color:color-mix(in oklab,var(--red) 40%,transparent);background:color-mix(in oklab,var(--red) 10%,transparent)}

/* ============ H · 进度条 ============ */
.bar{height:6px;border-radius:99px;background:color-mix(in oklab,var(--seed-fg) 9%,transparent);overflow:hidden;min-width:60px}
.bar > i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .3s}
.bar.ok > i{background:var(--green)}
.bar.warn > i{background:var(--amber)}
.bar.err > i{background:var(--red)}

/* ============ I · 空态 ============ */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 20px;color:var(--fg-3);text-align:center}
.empty svg{width:40px;height:40px;stroke:var(--fg-3);fill:none;stroke-width:1.3;opacity:.6}
.empty b{font-size:14px;color:var(--fg-2);font-weight:500}
.empty p{font-size:12.5px;max-width:340px;line-height:1.6}

/* ============ J · 代码块 ============ */
.code{
  font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--fg-2);
  background:color-mix(in oklab,var(--seed-bg) 55%,transparent);
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  overflow:auto;max-height:420px;white-space:pre-wrap;word-break:break-word;
}
.code .k{color:var(--acc)}
.code .s{color:var(--green)}
.code .c{color:var(--fg-3)}
.code .n{color:var(--amber)}

/* ============ K · 瓷砖网格 ============ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.tile{
  display:flex;flex-direction:column;gap:9px;padding:15px 16px;cursor:pointer;
  background:color-mix(in oklab,var(--seed-fg) 4%,transparent);
  border:1px solid var(--line);border-radius:var(--seed-radius);transition:all .18s;
}
.tile:hover{border-color:var(--acc-line);background:var(--acc-soft);transform:translateY(-1px)}
.tile.sel{border-color:var(--acc-line);background:var(--acc-soft)}
.tile.off{opacity:.55}
.tile .th{display:flex;align-items:center;gap:9px}
.tile .th .em{font-size:16px;width:24px;text-align:center;flex:none}
.tile .th b{font-size:13.5px;font-weight:500;color:var(--seed-fg)}
.tile .th .go{margin-left:auto;display:flex;gap:4px;align-items:center}
.tile p{font-size:12px;color:var(--fg-3);line-height:1.6;flex:1}
.tile .tf{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--fg-3);font-family:var(--mono)}

/* ============ L · 命令面板 ============ */
.palette-mask{position:fixed;inset:0;background:color-mix(in oklab,var(--seed-bg) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:260;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.palette{
  width:100%;max-width:620px;display:flex;flex-direction:column;overflow:hidden;
  background:var(--seed-surface);border:1px solid var(--line-2);border-radius:calc(var(--seed-radius) + 4px);
  box-shadow:0 30px 80px color-mix(in oklab,var(--seed-bg) 62%,transparent);
  animation:pal-in .16s ease-out;
}
@keyframes pal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.palette-in{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid var(--line)}
.palette-in svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}
.palette-in .neo-ico{
  width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;border:none;color:var(--fg-3);
}
.palette-in input{flex:1;border:none;background:transparent;color:var(--seed-fg);font-family:var(--font);font-size:14.5px;outline:none}
.palette-in input::placeholder{color:var(--fg-3)}
.palette-in kbd{font-family:var(--mono);font-size:10px;color:var(--fg-3);border:1px solid var(--line-2);border-radius:5px;padding:2px 7px}
.palette-list{max-height:min(52vh,460px);overflow:auto;padding:7px}
.palette-group{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--fg-3);text-transform:uppercase;padding:10px 13px 5px}
.palette-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer}
.palette-item.sel{background:color-mix(in oklab,var(--acc) 10%,transparent)}
.palette-item .em{width:20px;text-align:center;font-size:13px;flex:none}
.palette-item .ico{
  width:34px;height:34px;border-radius:8px;
  background:color-mix(in oklab,var(--seed-fg) 4%,transparent);
  border:1px solid var(--line);color:var(--fg-2);
}
.palette-item.sel .ico{
  color:var(--acc);
  background:color-mix(in oklab,var(--acc) 12%,transparent);
  border-color:color-mix(in oklab,var(--acc) 28%,transparent);
  box-shadow:none;
}
.palette-item .ico svg{width:17px;height:17px}
.palette-item .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.palette-item .nm{font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--seed-fg)}
.palette-item .ds{font-size:12px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-empty{padding:34px 20px;text-align:center;color:var(--fg-3);font-size:13px}

/* ============ M · 树形 ============ */
.tree{font-size:13px}
.tree-node{position:relative;padding-left:16px}
.tree-node::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line)}
.tree-node:last-child::before{bottom:calc(100% - 15px)}
.tree-node > .tn-head{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer}
.tree-node > .tn-head::before{content:"";position:absolute;left:-11px;top:16px;width:11px;height:1px;background:var(--line)}
.tree-node > .tn-head:hover{background:color-mix(in oklab,var(--seed-fg) 5%,transparent)}
.tree-node > .tn-head.on{background:var(--acc-soft);color:var(--acc)}
.tree-node .caret{width:12px;flex:none;color:var(--fg-3);font-size:9px;transition:transform .15s}
.tree-node.closed .caret{transform:rotate(-90deg)}
.tree-node.closed > .tn-children{display:none}
.tn-children{padding-left:6px}

/* ============ N · 键值表 ============ */
.kv{display:grid;grid-template-columns:190px 1fr;gap:0;font-size:13px}
.kv > div{padding:9px 2px;border-bottom:1px solid var(--line)}
.kv > div:nth-child(odd){color:var(--fg-3);font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase}
.kv > div:nth-last-child(-n+2){border-bottom:none}
.kv .val{color:var(--seed-fg);font-family:var(--font)}

/* ============ O · 工具条 ============ */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar .grow{flex:1;min-width:150px}
.mini-input{height:32px;font-size:12.5px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;background:color-mix(in oklab,var(--seed-fg) 5%,transparent);color:var(--seed-fg);font-family:var(--font);outline:none;min-width:0}
.mini-input:focus{border-color:var(--acc-line)}
.mini-input::placeholder{color:var(--fg-3)}

/* ============ P · 徽章扩展 ============ */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-family:var(--font);font-weight:500;letter-spacing:0;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-3);line-height:1.3}
.pill.acc{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)}
.pill.ok{color:var(--green);border-color:color-mix(in oklab,var(--green) 38%,transparent);background:color-mix(in oklab,var(--green) 10%,transparent)}
.pill.warn{color:var(--amber);border-color:color-mix(in oklab,var(--amber) 38%,transparent);background:color-mix(in oklab,var(--amber) 10%,transparent)}
.pill.err{color:var(--red);border-color:color-mix(in oklab,var(--red) 38%,transparent);background:color-mix(in oklab,var(--red) 10%,transparent)}

/* ============ R · 响应式 ============ */
@media (max-width:1100px){
  .split-2,.split-side{grid-template-columns:1fr}
}
@media (max-width:760px){
  .form-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv > div:nth-child(odd){border-bottom:none;padding-bottom:0}
  .tiles{grid-template-columns:1fr}
  .row-actions{opacity:1}
}

/* ============ Q · 内嵌模式（agent-platform.html 门户 iframe 内） ============
   body 由 agent-ui.js 自动打上 data-embed：隐藏外壳，只留内容区 */
body[data-embed]{overflow:auto;height:auto;min-height:100%}
body[data-embed] .app{grid-template-columns:1fr;min-height:0;height:auto;display:block}
body[data-embed] .app > aside{display:none}
body[data-embed] .app > main{display:block;min-height:0}
body[data-embed] .topbar{display:none}
body[data-embed] .content{padding:16px 20px 28px;overflow:visible}
body[data-embed] .page-head{align-items:center;flex-wrap:wrap;row-gap:10px}
body[data-embed] .page-head .actions{margin-left:auto;flex-wrap:wrap}
body[data-embed] .foot-note{margin-bottom:8px}

/* 综合平台嵌入 Agent 功能门户：保留侧栏，铺满父 iframe */
body[data-platform-embed]{overflow:hidden;height:100%;min-height:100%}
html:has(body[data-platform-embed]),html[data-product="platform"]:has(body[data-platform-embed]){height:100%}
body[data-platform-embed] .app{
  height:100%;min-height:0;
  grid-template-columns:220px minmax(0,1fr)!important;
}
body[data-platform-embed] .app > aside,
body[data-platform-embed][data-shell="console"] aside{
  display:flex!important;
  position:relative!important;
  top:auto!important;
  height:100%;
  overflow:auto;
}
body[data-platform-embed] .topbar{display:none}
body[data-platform-embed] .portal{height:100%;min-height:0}
body[data-platform-embed] .portal-bar .btn[href="agent-platform.html"]{display:none}
body[data-platform-embed] aside .brand{pointer-events:none}
body[data-platform-embed] .prod-badge{background:var(--acc-soft);color:var(--acc);border-color:var(--acc-line)}
