:root{
  --bg:#0b0f16; --bg2:#111823; --bg3:#161f2c; --line:#243044;
  --fg:#e6edf7; --fg2:#93a4bd; --fg3:#61738d;
  --acc:#4c8dff; --acc2:#2f6bd8; --ok:#31c48d; --warn:#f5a524; --bad:#f05252;
  --r:8px; --top:46px; --status:26px; --panel:200px; --side:190px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%}
@supports (height:100dvh){ body{height:100dvh} }
body{
  background:var(--bg); color:var(--fg);
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit}

/* ---------- 移动端辅助元素(桌面隐藏) ---------- */
.mob-only{display:none}
.actions{display:flex;align-items:center;gap:8px}
.side-backdrop{display:none}
.panel-grip{display:none}
.panel-toggle{display:none}

.topbar{
  flex:0 0 auto; height:var(--top); display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--bg2); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:7px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.sep{width:1px;height:20px;background:var(--line)}
.btn{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:6px 12px; border-radius:var(--r); transition:.15s; white-space:nowrap;
}
.btn:hover{background:#1c2838;border-color:#33435c}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.primary:disabled{background:var(--acc);opacity:.45}
.input{
  background:var(--bg3); border:1px solid var(--line); color:var(--fg);
  padding:5px 8px; border-radius:var(--r);
}
.sel{padding-right:4px}
.badge{
  font-size:11px; color:var(--fg2); background:var(--bg3);
  border:1px solid var(--line); padding:3px 8px; border-radius:20px; white-space:nowrap;
}
.badge.ok{color:var(--ok);border-color:#1d4d3c}
.badge.bad{color:var(--bad);border-color:#4d2020}
.badge.run{color:var(--acc);border-color:#1d3a63}

.main{flex:1 1 auto; display:flex; min-height:0}

/* ---------- 左侧文件树 ---------- */
.side{
  flex:0 0 var(--side); display:flex; flex-direction:column;
  background:var(--bg2); border-right:1px solid var(--line); min-height:0;
}
.side-hd{
  height:34px; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--fg3); border-bottom:1px solid var(--line);
}
.files{flex:1 1 auto; overflow:auto; padding:4px}
.fitem{
  display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:6px;
  cursor:pointer; font-size:12.5px; color:var(--fg2); white-space:nowrap;
}
.fitem:hover{background:var(--bg3);color:var(--fg)}
.fitem.on{background:#1b2740;color:var(--fg);box-shadow:inset 2px 0 0 var(--acc)}
.fitem .ic{font-size:11px;opacity:.85}
.fitem .nm{flex:1;overflow:hidden;text-overflow:ellipsis}
.fitem .del{opacity:0;font-size:11px;color:var(--fg3);padding:0 2px}
.fitem:hover .del{opacity:1}
.fitem .del:hover{color:var(--bad)}
.mini{
  background:transparent;border:0;color:var(--fg3);padding:2px 6px;border-radius:5px;font-size:13px;
}
.mini:hover{background:var(--bg3);color:var(--fg)}
.side-tip{
  padding:8px 10px; font-size:11px; line-height:1.7; color:var(--fg3);
  border-top:1px solid var(--line);
}

/* ---------- 右侧工作区 ---------- */
.work{flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0}
.tabbar{
  flex:0 0 auto; height:34px; display:flex; align-items:stretch;
  background:var(--bg2); border-bottom:1px solid var(--line);
}
.tabs{
  flex:1 1 auto; min-width:0; display:flex; align-items:stretch; gap:1px;
  background:var(--bg2); overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{height:0}
.tab{
  display:flex;align-items:center;gap:6px;padding:0 8px 0 14px;font-size:12.5px;color:var(--fg2);
  background:var(--bg2); border-right:1px solid var(--line); cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--fg)}
.tab.on{background:var(--bg);color:var(--fg);box-shadow:inset 0 -2px 0 var(--acc)}
.tab .dirty{width:6px;height:6px;border-radius:50%;background:var(--warn)}
/* 标签右侧的 ✕：关闭这个标签（文件不删，仍留在左侧列表） */
.tab .tx{
  display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:4px;font-size:11px;line-height:1;
  color:var(--fg2);opacity:.72;transition:opacity .12s,background .12s,color .12s;
}
.tab:hover .tx,.tab.on .tx{opacity:1}
.tab .tx:hover{background:var(--bg3);color:var(--fg);opacity:1}
/* 标签栏最右侧的 ＋：新建文件 */
.tab-add{
  flex:0 0 auto; width:34px; padding:0; cursor:pointer;
  border:0; border-left:1px solid var(--line);
  background:var(--bg2); color:var(--fg2); font-size:15px; line-height:1;
}
.tab-add:hover{background:var(--bg3);color:var(--fg)}
.tab-add:active{background:var(--acc);color:#fff}
/* 标签栏右侧的撤回 / 重做：撤销栈由 Monaco 维护，这两个按钮让手机上也能撤回
   （手机没有 Ctrl+Z）。没有可撤回/可重做的事时置灰。 */
.tab-act{
  flex:0 0 auto; width:38px; padding:0; cursor:pointer;
  border:0; border-left:1px solid var(--line);
  background:var(--bg2); color:var(--fg2); font-size:16px; line-height:1;
  transition:background .12s,color .12s;
}
.tab-act:hover:not(:disabled){background:var(--bg3);color:var(--fg)}
.tab-act:active:not(:disabled){background:var(--acc);color:#fff}
.tab-act:disabled{opacity:.3;cursor:default}
.editor-wrap{flex:1 1 auto; min-height:0; position:relative}
#editor{position:absolute;inset:0}
/* 标签页全关掉时给个提示，避免看起来像坏了 */
.editor-wrap.empty::after{
  content:'标签页已全部关闭 · 从左侧「文件」列表点一个文件即可重新打开';
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:13px;line-height:1.8;color:var(--fg2);
}

/* ---------- 底部面板 ---------- */
.panel{
  flex:0 0 var(--panel); display:flex; flex-direction:column;
  border-top:1px solid var(--line); background:var(--bg2); min-height:0;
}
.panel-tabs{
  flex:0 0 auto; height:32px; display:flex; align-items:center; gap:2px;
  padding:0 8px; border-bottom:1px solid var(--line);
}
.pt{
  background:transparent;border:0;color:var(--fg3);padding:5px 10px;border-radius:6px;
  font-size:12px; display:flex; align-items:center; gap:5px;
}
.pt:hover{background:var(--bg3);color:var(--fg)}
.pt.on{color:var(--fg);background:var(--bg3)}
.spacer{flex:1}
.pill{
  min-width:16px; text-align:center; font-size:10.5px; padding:0 5px; border-radius:9px;
  background:var(--bg3); color:var(--fg2);
}
.pill.err{background:#4d2020;color:#ffb4b4}
.panel-body{flex:1 1 auto; min-height:0; position:relative}
.pane{position:absolute; inset:0; margin:0; overflow:auto}
.out{
  padding:10px 12px; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#cfe0f5; white-space:pre-wrap; word-break:break-all; -webkit-user-select:text; user-select:text;
}
.out .ok{color:var(--ok)} .out .er{color:#ff8888} .out .dim{color:var(--fg3)} .out .wa{color:var(--warn)}
.in{
  background:var(--bg); border:0; color:var(--fg); padding:10px 12px; resize:none;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  -webkit-user-select:text; user-select:text;
}
.prob{padding:6px 8px}
.pitem{
  display:flex; gap:8px; align-items:flex-start; padding:7px 9px; border-radius:6px;
  cursor:pointer; font-size:12.5px; line-height:1.5;
}
.pitem:hover{background:var(--bg3)}
.pitem .sev{flex:0 0 auto; font-size:11px; padding:1px 6px; border-radius:5px; margin-top:1px}
.pitem.error .sev{background:#4d2020;color:#ffb4b4}
.pitem.warning .sev{background:#4d3a10;color:#ffd88a}
.pitem.note .sev{background:#1d3a63;color:#a9c9ff}
.pitem .loc{color:var(--fg3); font-family:ui-monospace,Menlo,monospace; font-size:11.5px}
.pitem .msg{flex:1; color:var(--fg)}
.pempty{padding:16px; color:var(--fg3); font-size:12.5px; text-align:center}

/* ---------- 交互终端 ---------- */
.pane[hidden]{display:none!important}
.pane.con,.pane.ai{display:flex;flex-direction:column;overflow:hidden}
.con-out{
  flex:1 1 auto;min-height:0;overflow:auto;padding:8px 12px;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#cfe0f5;white-space:pre-wrap;word-break:break-word;
  -webkit-user-select:text;user-select:text;
}
.con-o{color:#cfe0f5}
.con-e{color:#ff8888}
.con-i{color:#7ee2b8}
.con-note{color:#61738d;margin:4px 0;font-size:11.5px}
.con-inrow{
  flex:0 0 auto;display:flex;gap:6px;align-items:flex-end;
  padding:6px 8px;border-top:1px solid var(--line);background:var(--bg2);
}
#conIn{
  flex:1 1 auto;min-width:0;height:30px;max-height:96px;resize:none;overflow:auto;
  background:var(--bg);border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:6px 8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  -webkit-user-select:text;user-select:text;
}
#conIn:focus{outline:none;border-color:var(--acc)}
.con-send,.con-stop{flex:0 0 auto;padding:6px 12px;align-self:stretch}
.con-ent{
  flex:0 0 auto;align-self:stretch;padding:0 8px;font-size:11px;line-height:1.15;
  white-space:nowrap;color:var(--fg3);
}
.con-ent.on{color:#ffd479;border-color:#5c4a1f;background:#2a2313}
/* 运行中：输入行给个提示色，不用聚焦也能看出可以输入 */
.con-inrow.live{border-top-color:var(--acc)}
.con-inrow.live #conIn{border-color:#2b4a7a;background:#0d1420}
.con-stop{background:#3a1d1d;border-color:#5e2020;color:#ffb4b4;font-weight:700}

/* ---------- AI 帮助 ---------- */
.ai-quick{
  flex:0 0 auto;display:flex;gap:6px;flex-wrap:wrap;
  padding:7px 8px;border-bottom:1px solid var(--line);
}
.ai-quick .mini{padding:5px 10px;font-size:12px;border:1px solid var(--line)}
.ai-msgs{flex:1 1 auto;min-height:0;overflow:auto;padding:8px 10px;display:flex;flex-direction:column;gap:8px}
.amsg{display:flex;gap:8px;align-items:flex-start}
.amsg .abub{
  flex:0 0 auto;font-size:11px;padding:2px 7px;border-radius:9px;
  background:var(--bg3);color:var(--fg2);margin-top:2px;
}
.amsg.user .abub{background:#1d3a63;color:#a9c9ff}
.amsg.ai .abub{background:#1f4d3a;color:#9df0cd}
.amsg .abody{
  flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.65;color:var(--fg);
  word-break:break-word;-webkit-user-select:text;user-select:text;
}
.amsg .abody .er{color:#ff8888}
.acode{margin:6px 0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.acode pre{
  margin:0;padding:8px 10px;overflow:auto;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;
  color:#cfe0f5;white-space:pre;max-height:260px;
}
.acode-actions{display:flex;gap:6px;padding:5px 6px;border-top:1px solid var(--line);background:var(--bg2)}
.acode-actions .mini{padding:4px 10px;font-size:11.5px}
.acode-actions .mini.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.ai-inrow{
  flex:0 0 auto;display:flex;gap:6px;align-items:flex-end;
  padding:6px 8px;border-top:1px solid var(--line);background:var(--bg2);
}
#aiIn{
  flex:1 1 auto;min-width:0;height:34px;max-height:96px;resize:none;overflow:auto;
  background:var(--bg);border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:7px 9px;font-size:12.5px;
  -webkit-user-select:text;user-select:text;
}
#aiIn:focus{outline:none;border-color:var(--acc)}
.ai-fix-hint{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-bottom:4px;flex-wrap:wrap}
.ai-fix-hint .dim{color:var(--fg3);font-size:11.5px}

/* 轻提示 */
.ctoast{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:200;
  background:#1a2433;border:1px solid var(--line);border-radius:20px;
  padding:7px 16px;font-size:12.5px;box-shadow:0 8px 24px #0007;
}
.ctoast.ok{border-color:#1f5e46;color:#9df0cd}
.ctoast.err{border-color:#5e2020;color:#ffb4b4}

/* ---------- 状态栏 ---------- */
.statusbar{
  flex:0 0 auto; height:var(--status); display:flex; align-items:center; gap:14px;
  padding:0 12px; background:var(--bg2); border-top:1px solid var(--line);
  font-size:11.5px; color:var(--fg3);
}
.statusbar .ok{color:var(--ok)} .statusbar .bad{color:var(--bad)} .statusbar .wa{color:var(--warn)}

/* ---------- 移动端 ---------- */
@media (max-width:760px){
  :root{--panel:34vh; --bbar:57px}

  body{font-size:14px}

  /* 顶栏：两行 —— 品牌/示例 + 状态/标准；操作按钮移到底部 */
  .topbar{
    flex-wrap:wrap; height:auto; min-height:0;
    gap:6px 8px; padding:6px 8px;
    padding-top:calc(6px + env(safe-area-inset-top,0px));
  }
  .brand{order:1; font-size:13.5px}
  .brand span.txt{display:inline}
  #examples{order:2; display:block; flex:1 1 110px; min-width:0; height:38px}
  .tb-actions{order:3; flex:1 1 100%; margin-left:0; gap:6px; flex-wrap:wrap}
  .tb-actions .sep{display:none}
  .tb-actions .badge{order:1; margin-right:auto}
  #stdSel{order:2; flex:0 0 auto; height:38px}
  #runScope{order:3; flex:0 0 auto; height:38px}

  /* 底部固定操作栏：拇指可达 */
  .actions{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    display:flex; align-items:center; gap:6px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    background:var(--bg2); border-top:1px solid var(--line);
    box-shadow:0 -8px 20px rgba(0,0,0,.35);
  }
  .actions .btn{flex:1 1 0; min-width:0; min-height:44px; padding:0 6px; font-size:14px}
  .actions .btn.primary{flex:1.4 1 0}
  .actions .mob-only{display:inline-flex; align-items:center; justify-content:center}

  /* 状态栏：贴在操作栏上方 */
  .statusbar{
    position:fixed; left:0; right:0; z-index:49;
    bottom:calc(var(--bbar) + env(safe-area-inset-bottom,0px));
    height:22px; padding:0 10px; font-size:11px;
    background:var(--bg2); border-top:1px solid var(--line);
  }
  #stTip{display:none}

  /* 给两条固定栏留出空间 */
  .main{padding-bottom:calc(var(--bbar) + 23px + env(safe-area-inset-bottom,0px))}

  /* 文件树 → 左侧抽屉 */
  .side{
    display:flex; position:fixed; top:0; bottom:0; left:0; z-index:60;
    flex-basis:auto; width:min(78vw,300px);
    transform:translateX(-102%); visibility:hidden;
    transition:transform .22s ease, visibility .22s ease;
    box-shadow:0 0 32px rgba(0,0,0,.55);
    padding-top:env(safe-area-inset-top,0px);
  }
  .side.open{transform:none; visibility:visible}
  .side-backdrop{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(0,0,0,.5); opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  .side-backdrop.show{opacity:1; pointer-events:auto}
  .side-hd{height:42px}
  .fitem{padding:11px 10px; font-size:14px}
  .fitem .del{opacity:1; padding:4px 8px}

  /* 标签栏 */
  .tabbar{height:40px}
  .tab{padding:0 8px 0 12px; font-size:13.5px}
  .tab .tx{width:22px;height:22px;font-size:13px;opacity:.8}
  .tab-add{width:42px;font-size:17px}
  .tab-act{width:40px;font-size:17px}

  /* 输出面板：可拖拽高度 + 可收起 */
  .panel{flex:0 0 var(--panel); min-height:36px}
  /* 面板高度调节：加高拖拽条 + 文字提示，解决"看不清、抓不住" */
  .panel-grip{
    display:flex; flex:0 0 24px; align-items:center; justify-content:center; gap:8px;
    cursor:ns-resize; touch-action:none;
    background:var(--bg3); border-bottom:1px solid var(--line);
  }
  .grip-bar{
    width:52px; height:5px; border-radius:3px; background:var(--fg3); opacity:.85;
    transition:background .15s, opacity .15s;
  }
  .grip-hint{font-size:10.5px; color:var(--fg3); letter-spacing:.3px; white-space:nowrap}
  .panel-grip:active .grip-bar{background:var(--acc); opacity:1}
  .panel-grip:active .grip-hint{color:var(--fg2)}
  .panel-toggle{
    display:inline-flex; align-items:center; gap:3px;
    border:1px solid var(--line); background:var(--bg3); color:var(--fg2);
    padding:4px 9px; border-radius:6px; font-size:11.5px; white-space:nowrap;
  }
  .panel-toggle:active{background:var(--acc); border-color:var(--acc); color:#fff}
  /* 收起后只剩标签栏，这个按钮是唯一的展开入口，高亮它 */
  .panel.collapsed .panel-toggle{background:var(--acc); border-color:var(--acc); color:#fff}
  .panel.collapsed{flex-basis:36px!important; height:36px!important; overflow:hidden}
  .panel.collapsed .panel-grip,
  .panel.collapsed .panel-body{display:none}
  .panel-tabs{height:36px}
  .pt{padding:8px 12px; font-size:13px}
  .out,.in{font-size:12.5px}
  .pitem{padding:9px 10px; font-size:13px}

  /* 交互终端 / AI 帮助（手机端放大触控目标） */
  .con-out{font-size:12.5px;padding:8px 10px}
  #conIn,#aiIn{font-size:13px}
  #conIn{height:34px}
  .con-send,.con-stop{min-height:40px;padding:6px 10px}
  .con-ent{padding:0 6px;font-size:10.5px}
  .ai-quick{gap:5px;padding:6px}
  .ai-quick .mini{min-height:34px}
  .ai-msgs{padding:8px}
  .acode pre{max-height:180px;font-size:11.5px}
  .ctoast{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
}

/* 横屏 / 矮屏：进一步压缩纵向占用 */
@media (max-width:900px) and (max-height:520px){
  :root{--panel:30vh}
  .topbar{padding-top:4px; padding-bottom:4px}
  .main{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .panel-grip{flex-basis:20px}
  .grip-hint{display:none}
}

/* 手机端（≤760px）：长按弹出的编辑器菜单由 Monaco 提供，它默认 13px 字号、
   26px 行高，手指点不准，这里放大到 15px / 42px。Monaco 的菜单 CSS 是运行时
   注入到菜单容器内部的（比本文件靠后），所以必须用 !important 才能盖住。 */
@media (max-width: 760px) {
  .monaco-menu { font-size: 15px !important; min-width: 208px !important; }
  .monaco-menu .monaco-action-bar.vertical .action-menu-item { height: 42px !important; }
  .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
  .monaco-menu .monaco-action-bar.vertical .keybinding {
    font-size: 15px !important; padding: 0 14px !important;
  }
  .monaco-menu .monaco-action-bar.vertical .menu-item-check { width: 28px !important; }
}