/* ============================================================
   站长助手 · 运维操作台（public/js/views/assistant.js 专用）
   ------------------------------------------------------------
   · 只使用 style.css 里已有的设计令牌（--ink / --coral / --cream-2 /
     --card-border / --r-md / --r-xl / --e2 / --grad / --fs-sm …）
   · 同一套 DOM 两种排布：<900px 单列 + 抽屉，≥900px 左侧栏 + 主区
   · 不横向溢出：所有长内容（命令、URL、工具输出）都能断行，
     代码块只在块内部横向滚动
   ============================================================ */

/* ---------- 骨架 ---------- */
.ac-console { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; max-width: 100%; }
.ac-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.ac-main { min-width: 0; display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--card-border); border-radius: var(--r-md);
  box-shadow: var(--e1); overflow: hidden; }
.ac-dim { color: var(--ink-faint); font-size: var(--fs-xs); }

/* ---------- 手机顶部状态条 ---------- */
/* 顶部状态条：粘在顶栏下面。
   注意不能用 sticky —— 它是 grid 子项，sticky 的"容器"只有自己那一行那么高，
   等于没有滑动余量，一滚就跟着内容往上跑、钻进顶栏底下（实测重叠 17px，滚到底 top 变成 -39）。
   改成 fixed 钉在顶栏下面，永远不会被顶栏盖住。 */
.ac-status { position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 30;
  margin: 0 10px; display: flex; align-items: center;
  gap: var(--sp-2); padding: 8px 10px; min-height: 44px; min-width: 0;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border); border-radius: var(--r-md); box-shadow: var(--e1); }
.ac-status > b { font-size: var(--fs-xs); font-family: var(--mono); color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.ac-status > .ac-badge { flex: none; }
.ac-status-sp { flex: 1 1 auto; min-width: 2px; }
.ac-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 800;
  color: var(--ink-soft); background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; }
.ac-badge.warn { background: #FFF6E8; border-color: #EBD3AE; color: #8A5A16; }
.ac-badge.err { background: #FDECEC; border-color: #F0C4C4; color: #A33B3B; }
.ac-badge.ok { background: #E7F3EC; border-color: #BCE0CC; color: #21704F; }

.ac-tbtn { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 12px; font-size: 1rem;
  color: var(--ink-soft); cursor: pointer; transition: background var(--tr), border-color var(--tr), transform var(--tr); }
.ac-tbtn.sm { min-width: 34px; height: 34px; font-size: .8rem; border-radius: 10px; }
.ac-tbtn:hover { border-color: var(--orange); color: var(--coral); background: var(--cream-2); }
.ac-tbtn:active { transform: scale(.94); }
.ac-tbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--orange); }
.ac-tbtn.danger { color: #B44A3A; border-color: #EFC9C2; background: #FFF7F6; }
.ac-tbtn.danger:hover { color: #9A3A2A; border-color: #E0A79C; background: #FDECEC; }

/* 状态点 */
.ac-sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.ac-sdot.ok { background: #34A853; }
.ac-sdot.run { background: var(--orange); animation: acPulse 1.1s infinite; }
.ac-sdot.warn { background: #D98324; animation: acPulse 1.8s infinite; }
.ac-sdot.err { background: #D05353; }
.ac-sdot.off { background: #C2CCD4; }
@keyframes acPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

/* ---------- 主区头部 ---------- */
.ac-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, var(--cream-2)); }
.ac-headic { width: 34px; height: 34px; border-radius: 11px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 17px; flex: none; }
.ac-headtxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ac-headtxt b { font-size: var(--fs-md); font-weight: 800; }
.ac-headtxt span { font-size: .68rem; color: var(--ink-faint); overflow-wrap: anywhere; }

/* ---------- 时间线 ---------- */
.ac-timeline { flex: 1; min-height: 300px; height: min(54vh, 520px); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding: var(--sp-3); display: flex; flex-direction: column; gap: 10px; }
.ac-timeline::-webkit-scrollbar { width: 8px; }
.ac-timeline::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.ac-task { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-taskhead { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px;
  border: 1px solid var(--card-border); border-radius: var(--r-md); background: linear-gradient(180deg, #fff, var(--cream-2)); }
.ac-tasktitle { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ac-tasktitle b { font-size: var(--fs-md); font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.ac-tdot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink-faint); }
.ac-tdot.ok { background: #34A853; }
.ac-tdot.run { background: var(--orange); animation: acPulse 1.1s infinite; }
.ac-tdot.wait { background: #D98324; animation: acPulse 1.8s infinite; }
.ac-tdot.err { background: #D05353; }
.ac-tdot.off { background: #C2CCD4; }
.ac-taskmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ac-taskmeta .ac-dim { overflow-wrap: anywhere; }
.ac-pill { font-size: .66rem; font-weight: 800; border-radius: var(--r-pill); padding: 3px 9px; flex: none;
  background: #F1F3F5; color: #8A9299; border: 1px solid transparent; }
.ac-pill-ok, .ac-pill.ok { background: #E7F3EC; color: #21704F; border-color: #BCE0CC; }
.ac-pill-run, .ac-pill.run { background: #EAF1F6; color: var(--emp); border-color: #C9DEEB; }
.ac-pill-wait, .ac-pill.wait { background: #FFF6E8; color: #8A5A16; border-color: #EBD3AE; }
.ac-pill-err, .ac-pill.err { background: #FDECEC; color: #A33B3B; border-color: #F0C4C4; }
.ac-pill-off, .ac-pill.off { background: #F1F3F5; color: #8A9299; }
.ac-pill.warn { background: #FFF6E8; color: #8A5A16; border-color: #EBD3AE; }
.ac-toolcount { font-size: .66rem; font-weight: 800; color: var(--coral); background: var(--tint-strong);
  border-radius: var(--r-pill); padding: 3px 9px; flex: none; }
/* 任务卡里的「取消任务」：触控目标 ≥40px */
.ac-cancel { min-height: 40px; padding: 6px 12px; border-radius: 12px; font-size: .72rem; font-weight: 800;
  color: #B44A3A; background: #FFF7F6; border: 1px solid #EFC9C2; cursor: pointer; flex: none;
  transition: background var(--tr), border-color var(--tr), transform var(--tr); }
.ac-cancel:hover { background: #FDECEC; border-color: #E0A79C; }
.ac-cancel:active { transform: scale(.96); }
.ac-cancel:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- 步骤卡 ---------- */
.ac-steps { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ac-nostep { padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-md); }
.ac-step { border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr); }
.ac-step.ok { border-left: 3px solid #6FB589; }
.ac-step.err { border-left: 3px solid #D05353; background: #FFFBFB; }
.ac-step.run { border-left: 3px solid var(--orange); background: #FFFCF6; animation: acPulse 1.6s infinite; }
.ac-step.open { box-shadow: var(--e1); border-color: var(--hairline); }
.ac-stephead { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 11px;
  text-align: left; background: none; cursor: pointer; color: inherit; }
.ac-stephead:hover { background: var(--tint); }
.ac-stephead:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.ac-stepic { flex: none; font-size: .9rem; }
.ac-steptool { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--emp); flex: none; }
.ac-stepbrief { flex: 1 1 120px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-soft);
  overflow-wrap: anywhere; }
.ac-stepms { flex: none; font-size: .66rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ac-stepmore { flex: none; font-size: .66rem; font-weight: 800; color: var(--coral); }
.ac-stepbody { padding: 0 11px 11px; border-top: 1px dashed var(--line); }
.ac-detail-h { font-size: .66rem; font-weight: 800; color: var(--ink-faint); margin: 8px 0 4px; }

/* ---------- 等宽块：只在块内部滚动 ---------- */
.ac-pre { max-width: 100%; overflow: auto; max-height: 300px;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  margin: 0; font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; -webkit-overflow-scrolling: touch; }
.ac-pend-pre { max-width: 100%; overflow: auto; max-height: 260px;
  background: #FFFDF7; border: 1px solid #EBD3AE; border-radius: 10px; padding: 9px 11px; margin: 0 0 10px;
  font-family: var(--mono); font-size: .72rem; line-height: 1.6; color: #6E5222;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.ac-pre-args { max-height: 190px; }
.ac-pre-res { max-height: 320px; }
/* 命令行可以横向滚（只在块内部），普通输出换行更省事 */
.ac-pre-args { white-space: pre; word-break: normal; overflow-wrap: normal; }

/* ---------- 回答 ---------- */
.ac-answerbox { border: 1px solid var(--card-border); border-radius: var(--r-md); background: #fff;
  padding: 10px 12px; box-shadow: var(--e1); min-width: 0; }
.ac-answerbox.run { background: var(--cream-2); border-style: dashed; box-shadow: none; }
.ac-answerhead { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ac-answerhead b { font-size: var(--fs-sm); flex: 1; min-width: 0; }
.ac-md { font-size: var(--fs-sm); line-height: 1.8; color: var(--ink); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ac-md p { margin: 0 0 6px; }
.ac-md p:last-child { margin-bottom: 0; }
.ac-md b, .ac-md strong { font-weight: 800; }
.ac-md ul, .ac-md ol { margin: 5px 0 7px; padding-left: 19px; }
.ac-md li { margin: 3px 0; }
.ac-md code { font-family: var(--mono); font-size: .84em; background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; word-break: break-word; }
.ac-md .ac-h { font-weight: 800; margin: 8px 0 4px; }
.ac-md .ac-gap { height: 7px; }
.ac-md .ac-hr { border: none; border-top: 1px dashed var(--line); margin: 9px 0; }
.ac-md .ac-tablewrap { max-width: 100%; overflow-x: auto; margin: 8px 0; }
.ac-md .ac-table { width: 100%; border-collapse: collapse; font-size: .88em; }
.ac-md .ac-table th, .ac-md .ac-table td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.ac-md .ac-table th { background: var(--cream-2); font-weight: 800; }

.ac-thinking { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: var(--fs-xs); flex-wrap: wrap; }
.ac-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: .35; animation: acTyping 1.1s infinite; }
.ac-thinking i:nth-child(2) { animation-delay: .16s; }
.ac-thinking i:nth-child(3) { animation-delay: .32s; }
@keyframes acTyping { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.ac-errbox { background: #FDECEC; border: 1px solid #F0C4C4; color: #A33B3B; border-radius: var(--r-sm);
  padding: 9px 12px; font-size: var(--fs-xs); line-height: 1.7; overflow-wrap: anywhere; }

/* ---------- 确认卡 ---------- */
.ac-pend { background: linear-gradient(180deg, #FFF9EF, #FDF3E4); border: 1px solid #EBD3AE;
  border-radius: var(--r-md); padding: 12px; box-shadow: var(--e1); min-width: 0; }
.ac-pend-top { font-weight: 800; color: #96631F; font-size: var(--fs-sm); }
.ac-pend-desc { color: #7C5A28; font-size: var(--fs-sm); margin: 5px 0 10px; line-height: 1.7; overflow-wrap: anywhere; }
.ac-pend-desc code { font-family: var(--mono); font-size: .84em; background: #FFF6E4; border: 1px solid #EBD3AE;
  border-radius: 6px; padding: 1px 5px; }
.ac-pend-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-pend-btns .btn { min-height: 42px; }
.ac-pend-hint { font-size: .68rem; color: #8A6A38; margin-top: 8px; line-height: 1.6; }

/* ---------- 追问卡 ---------- */
.ac-ask { background: linear-gradient(180deg, #F4F9FC, #E9F2F8); border: 1px solid #C9DEEB;
  border-radius: var(--r-md); padding: 12px; min-width: 0; }
.ac-ask-top { font-weight: 800; color: #2F6485; font-size: var(--fs-sm); }
.ac-ask-q { font-size: var(--fs-sm); color: var(--ink); margin: 5px 0 10px; line-height: 1.7; overflow-wrap: anywhere; }
.ac-ask-opts { display: flex; flex-direction: column; gap: 7px; }
.ac-ask-opt { display: flex; align-items: center; gap: 9px; text-align: left; width: 100%; min-height: 44px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr); }
.ac-ask-opt:hover { border-color: var(--orange); box-shadow: var(--e1); }
.ac-ask-opt:active { transform: scale(.99); }
.ac-ask-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--orange); }
.ac-ask-opt.rec { border-color: #9CC3DA; background: linear-gradient(180deg, #fff, #F3F9FC); }
.ac-ask-no { width: 22px; height: 22px; border-radius: 7px; background: var(--grad-soft); color: var(--emp);
  display: grid; place-items: center; font-size: .7rem; font-weight: 900; flex: none; }
.ac-ask-tx { flex: 1; min-width: 0; font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ac-ask-rec { font-size: .62rem; font-weight: 800; color: #2F6485; background: #E2EFF6; border-radius: var(--r-pill);
  padding: 2px 7px; flex: none; }
.ac-ask-free { display: flex; gap: 8px; margin-top: 9px; }
.ac-ask-free .input { flex: 1; min-width: 0; padding: 9px 11px; font-size: var(--fs-sm); }
.ac-ask-free .btn { flex: none; min-height: 42px; }

/* ---------- 空状态 ---------- */
.ac-empty { margin: auto; text-align: center; max-width: 480px; padding: var(--sp-3) 0; }
.ac-empty-ic { font-size: 40px; margin-bottom: 8px; animation: floaty 3s infinite; }
.ac-empty > b { display: block; color: var(--ink); font-size: var(--fs-lg); margin-bottom: 6px; }
.ac-empty > p { font-size: var(--fs-sm); line-height: 1.8; overflow-wrap: anywhere; }
.ac-examples { display: grid; gap: 8px; margin: 14px 0 10px; text-align: left; }
.ac-ex { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 9px 12px;
  border: 1px solid var(--card-border); border-radius: var(--r-sm); background: #fff; cursor: pointer;
  box-shadow: var(--e1); transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr); }
.ac-ex:hover { transform: translateY(-2px); border-color: var(--orange); box-shadow: var(--e2); }
.ac-ex:active { transform: translateY(0) scale(.99); }
.ac-ex:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.ac-ex-ic { font-size: 1.15rem; flex: none; }
.ac-ex-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-ex-tx b { font-size: var(--fs-sm); font-weight: 800; }
.ac-ex-tx i { font-style: normal; font-size: .68rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.ac-ex-go { flex: none; font-size: .68rem; font-weight: 800; color: var(--coral); background: var(--tint-strong);
  border-radius: var(--r-pill); padding: 3px 9px; }
.ac-empty-foot { font-size: .7rem; color: var(--ink-faint); line-height: 1.7; }

/* ---------- 输入条（手机吸底） ---------- */
.ac-composer { position: sticky; bottom: 0; z-index: 15; border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ac-quick { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 8px 10px 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ac-quick::-webkit-scrollbar { display: none; }
.ac-chips-row { flex-wrap: nowrap; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line); background: var(--cream-2); border-radius: var(--r-pill); font-size: var(--fs-xs);
  font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; max-width: 76vw;
  transition: border-color var(--tr), background var(--tr), transform var(--tr), color var(--tr); }
.ac-chip > span { overflow: hidden; text-overflow: ellipsis; }
.ac-chip:hover { border-color: var(--orange); color: var(--coral); background: #fff; }
.ac-chip:active { transform: scale(.96); }
.ac-chip:focus-visible { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.ac-chip-ic { flex: none; }
.ac-chip-tx { min-width: 0; }
/* 桌面侧栏里的模板：竖排换行 */
.ac-tpls-rail { display: flex; flex-direction: column; gap: 6px; }
.ac-tpls-rail .ac-chip { width: 100%; max-width: 100%; justify-content: flex-start; border-radius: 12px; white-space: normal; }
.ac-tpls-rail .ac-chip > span { overflow-wrap: anywhere; }

.ac-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 4px; }
/* 注意：style.css 里有 `textarea.input{min-height:110px}`，这里必须用同等特指度压过去 */
textarea.input.ac-ta, .ac-ta { flex: 1; min-width: 0; resize: none; width: 100%;
  min-height: 60px; height: 60px; max-height: 132px; padding: 9px 13px;
  font-size: 16px; line-height: 1.6; border-radius: var(--r-sm); }
.ac-send { flex: none; min-width: 46px; height: 46px; padding: 0 16px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ac-send-i { display: none; }
.ac-stop { flex: none; min-height: 46px; padding: 0 14px; border-radius: var(--r-sm); font-weight: 800;
  color: #A33B3B; background: #FDECEC; border: 1px solid #F0C4C4; }
.ac-stop:active { transform: scale(.97); }
.ac-chint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 12px 9px; min-height: 22px; }
.ac-statewrap { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 700; color: var(--ink-soft);
  min-width: 0; overflow-wrap: anywhere; }
.ac-statewrap.run { color: #8A5A16; }
.ac-statewrap.ok { color: #21704F; }
.ac-statewrap.err { color: #A33B3B; }
.ac-statewrap.wait { color: #8A5A16; }
.ac-kbdhint { margin-left: auto; font-size: .66rem; color: var(--ink-faint); }
.ac-kbd { border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; background: var(--cream-2); font-size: .64rem; }

/* ---------- 桌面侧栏 ---------- */
.ac-rail { display: none; }
.ac-rail-in { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ac-railblock { border: 1px solid var(--card-border); border-radius: var(--r-md); background: #fff;
  box-shadow: var(--e1); padding: 10px; min-width: 0; }
.ac-railhead { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800;
  color: var(--ink-soft); margin-bottom: 8px; }
.ac-railhead > span { flex: 1; min-width: 0; }
.ac-jobs { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; min-width: 0; }
.ac-jobrow { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 7px 9px;
  border: 1px solid transparent; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  transition: background var(--tr), border-color var(--tr); }
.ac-jobrow:hover { background: var(--tint-strong); }
.ac-jobrow.on { background: var(--tint-strong); border-color: var(--hairline); }
.ac-jobrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ac-jdot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ink-faint); }
.ac-jdot.ok { background: #34A853; }
.ac-jdot.run { background: var(--orange); animation: acPulse 1.1s infinite; }
.ac-jdot.wait { background: #D98324; }
.ac-jdot.err { background: #D05353; }
.ac-jdot.off { background: #C2CCD4; }
.ac-jobtx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ac-jobtx b { font-size: var(--fs-xs); font-weight: 700; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ac-jobtx i { font-style: normal; font-size: .64rem; color: var(--ink-faint); margin-top: 2px; }
.ac-railbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-soft); cursor: pointer; }
.ac-railbtn:hover { border-color: var(--orange); color: var(--coral); background: var(--cream-2); }
.ac-railbtn:active { transform: scale(.98); }
.ac-railtip { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; }
.ac-inforow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fff; font-size: .68rem; }
.ac-inforow > span { color: var(--ink-faint); flex: none; min-width: 48px; }
.ac-inforow > b { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.ac-inforow > b.ok { color: #21704F; }
.ac-inforow > b.bad { color: #B44A3A; }

/* ---------- 抽屉（手机底部抽屉 / 桌面右侧抽屉） ---------- */
.ac-mask { position: fixed; inset: 0; z-index: 88; background: rgba(30, 45, 60, .38);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--tr); }
.ac-mask.on { opacity: 1; }
.ac-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 89; max-height: 82vh;
  display: flex; flex-direction: column; background: var(--cream-2); border-top: 1px solid var(--card-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3);
  transform: translateY(102%); transition: transform var(--tr-slow);
  padding-bottom: env(safe-area-inset-bottom); }
.ac-drawer.on { transform: translateY(0); }
.ac-drawer-bar { width: 42px; height: 4px; border-radius: 999px; background: var(--line); margin: 8px auto 2px; flex: none; }
.ac-drawer-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px 10px; border-bottom: 1px solid var(--line); flex: none; }
.ac-drawer-head b { font-size: var(--fs-md); }
.ac-drawer-head .ac-dim { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ac-drawer-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 18px; }
.ac-drawer-body .ac-jobs { max-height: none; }

/* ---------- 设置表单 ---------- */
.ac-set { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ac-field > span { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.ac-field .input { padding: 10px 12px; font-size: var(--fs-sm); min-height: 44px; border-radius: 12px; }
.ac-field2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ac-sub { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft); }
.ac-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.ac-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-sw { width: 42px; height: 24px; border-radius: 999px; background: #D5DEE5; position: relative;
  transition: background var(--tr); flex: none; }
.ac-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--tr); }
.ac-switch input:checked + .ac-sw { background: var(--grad); }
.ac-switch input:checked + .ac-sw::after { transform: translateX(18px); }
.ac-switch input:focus-visible + .ac-sw { box-shadow: var(--focus-ring); }
.ac-switch input:disabled + .ac-sw { opacity: .45; }
.ac-switch input:disabled ~ b { opacity: .5; }
.ac-switch b { font-size: var(--fs-sm); font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.ac-tip { font-size: .68rem; color: var(--ink-faint); line-height: 1.7; }
.ac-setacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ac-setacts .btn { min-height: 44px; }
.ac-danger { color: var(--coral); }
.ac-testout { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.7; overflow-wrap: anywhere; }

/* ---------- 安全 / 快照回滚 ---------- */
.ac-snaplist { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 2px; }
.ac-snaprow { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; min-width: 0;
  transition: border-color var(--tr), background var(--tr); }
.ac-snaprow:hover { border-color: var(--orange); background: var(--cream-2); }
.ac-snaprow:active { transform: scale(.99); }
.ac-snapkind { flex: none; font-size: .62rem; font-weight: 800; border-radius: 6px; padding: 2px 6px;
  background: var(--tint-strong); color: var(--emp); }
.ac-snapkind.db { background: #FBEFE4; color: #A8632C; }
.ac-snapmeta { flex: none; font-size: .68rem; font-weight: 800; color: var(--emp); font-family: var(--mono); }
.ac-snapnote { flex: 1; min-width: 0; font-size: .68rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-roll { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 8px; align-items: end; margin-top: 10px; }
.ac-roll-n .input { min-height: 44px; }
.ac-rollbtn { min-height: 46px; font-weight: 800; color: #8A5A16; background: #FFF6E8;
  border: 1px solid #EBD3AE; border-radius: 12px; }
.ac-rollbtn:hover { background: #FFEFD9; border-color: #D9A85E; }
.ac-rollbtn:active { transform: scale(.98); }
.ac-rollbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ac-fold { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.ac-fold > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft); }
.ac-fold > summary::-webkit-details-marker { display: none; }
.ac-fold > summary::after { content: "▾"; margin-left: auto; color: var(--ink-faint); }
.ac-fold[open] > summary::after { content: "▴"; }
.ac-foldbody { padding-top: 4px; }
.ac-toolgroup { margin-bottom: 10px; }
.ac-toolhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .68rem; font-weight: 800;
  color: var(--ink-soft); margin-bottom: 6px; }
.ac-toolhead > b { margin-left: auto; font-weight: 600; color: var(--ink-faint); font-size: .64rem; }
.ac-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.ac-tool { font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--emp); background: var(--cream-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; overflow-wrap: anywhere; max-width: 100%; }
.ac-tool.dg { color: #96631F; background: #FFF9EF; border-color: #EBD3AE; }

/* ---------- 载入 / 无权限 ---------- */
.ac-boot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px;
  color: var(--ink-faint); font-size: var(--fs-sm); }
.ac-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--orange); animation: acSpin .8s linear infinite; }
@keyframes acSpin { to { transform: rotate(360deg); } }
.ac-nologin { text-align: center; padding: 40px 18px; }
.ac-nologin .big { font-size: 42px; margin-bottom: 8px; }

/* ============================================================
   ≥900px：左侧栏 + 主区
   ============================================================ */
@media (min-width: 900px) {
  .ac-console { gap: var(--sp-5); }
  .ac-status { display: none; }              /* 桌面不需要顶部状态条 */
  .ac-body { grid-template-columns: 292px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  /* 侧栏：外层撑满整行 + 给一个最小高度，内层做 sticky。
     关键：sticky 元素必须比它的**内容盒**矮才有滑动余量 —— 之前内层和容器一样高（还给外层加了
     padding，反而把内容盒压得更矮），滚到底就被顶出容器、上半截钻进顶栏下面（实测重叠 292×64px）。 */
  .ac-rail { display: block; min-width: 0; position: static; align-self: stretch; min-height: 660px; }
  .ac-rail-in { position: sticky; top: calc(var(--topbar-h, 64px) + 10px);
    max-height: min(560px, calc(100vh - var(--topbar-h, 64px) - 40px)); overflow-y: auto; overscroll-behavior: contain; }
  .ac-jobs { max-height: 340px; }
  .ac-main { border-radius: var(--r-xl); }
  .ac-head { padding: 13px 16px; }
  .ac-headic { width: 40px; height: 40px; border-radius: 13px; font-size: 20px; }
  .ac-headtxt b { font-size: var(--fs-lg); }
  .ac-headtxt span { font-size: var(--fs-xs); }
  .ac-head #acHeadSet { display: none; }      /* 设置入口在侧栏 */
  .ac-timeline { height: clamp(380px, calc(100vh - 380px), 760px); min-height: 340px; padding: var(--sp-4); }
  .ac-composer { position: static; }         /* 桌面：输入条跟着卡片走，不吸底 */
  .ac-quick { padding: 10px 16px 2px; }
  .ac-input { padding: 10px 16px 4px; gap: 10px; }
  .ac-chint { padding: 0 16px 12px; }
  .ac-send { min-width: 92px; }
  .ac-send-t { display: inline; }
  .ac-send-i { display: none; }
  textarea.input.ac-ta, .ac-ta { min-height: 46px; height: 46px; max-height: 160px; }
  .ac-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-stepbrief { flex: 1 1 auto; }
  /* 桌面抽屉：右侧滑出 */
  .ac-drawer { left: auto; right: 0; top: 0; bottom: 0; width: min(440px, 92vw); max-height: none;
    border-radius: var(--r-xl) 0 0 var(--r-xl); border-left: 1px solid var(--card-border); border-top: none;
    transform: translateX(102%); padding-bottom: 0; }
  .ac-drawer.on { transform: translateX(0); }
  .ac-drawer-head { padding-top: 14px; }
  .ac-field2 { grid-template-columns: 1fr 120px; }
}

@media (max-width: 899px) {
  .ac-rail { display: none; }
  /* 手机：底部输入条吸底。助手页已经让开了手机底部导航（body.tabbar-off），
     所以这里不再需要预留 74px —— 之前正是因为两边都留/都占，导致输入条和底部导航叠在一起互相遮挡 */
  .ac-timeline { height: auto; min-height: 260px; max-height: none; overflow: visible; }
  .ac-main { overflow: visible; }
  .ac-console { padding-bottom: calc(210px + env(safe-area-inset-bottom));
    /* 状态条改成 fixed 了，正文顶部给它留出位置（高度 56px + 上下间距） */
    padding-top: 64px; }
  .ac-composer { position: fixed; left: 0; right: 0; z-index: 44;
    bottom: 0;
    border: 1px solid var(--card-border); border-bottom: none;
    border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: 0 -10px 30px -18px rgba(74, 110, 140, .45);
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  /* 万一哪天又让底部导航显示出来（没设 tabbar-off），输入条自动抬高，绝不叠在一起 */
  body:not(.tabbar-off) .ac-composer { bottom: calc(74px + env(safe-area-inset-bottom)); padding-bottom: 8px; }
  body:not(.tabbar-off) .ac-console { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  .ac-quick { padding: 8px 10px 0; }
  .ac-chip { max-width: 68vw; }
  .ac-statewrap { flex: 1 1 auto; }
  .ac-kbdhint { margin-left: 0; flex: 1 1 100%; }
}
/* iPhone SE 这种 320~360 宽：再压一点 */
@media (max-width: 430px) {
  .ac-status { gap: 6px; padding: 7px 9px; }
  .ac-status > b { max-width: 26vw; }
  .ac-badge { padding: 3px 7px; font-size: .62rem; }
  .ac-timeline { padding: 10px; }
  .ac-answerbox, .ac-pend, .ac-ask { padding: 10px; }
  .ac-chip { max-width: 62vw; }
  .ac-send { min-width: 46px; width: 46px; padding: 0; border-radius: 50%; }
  .ac-send-t { display: none; }
  .ac-send-i { display: block; }
  .ac-examples { grid-template-columns: 1fr; }
  .ac-stepbrief { flex: 1 1 100%; }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .ac-sdot.run, .ac-tdot.run, .ac-tdot.wait, .ac-step.run, .ac-empty-ic, .ac-spin,
  .ac-thinking i { animation: none !important; }
  .ac-drawer, .ac-mask { transition: none !important; }
}

/* 深色（系统偏好）下不要出现"白得刺眼"的块 */
@media (prefers-color-scheme: dark) {
  .ac-status, .ac-composer { background: rgba(255, 255, 255, .96); }
}
