/* AI 设计助手面板 —— 沿用宿主页面的配色变量（带默认值，宿主没有定义时也能用） */
#agentBtn{position:relative}
#agentFab{display:none;position:absolute;right:14px;bottom:16px;z-index:5;width:52px;height:52px;border-radius:50%;border:0;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:22px;box-shadow:0 8px 20px -4px rgba(181,101,58,.55),0 2px 4px rgba(0,0,0,.08);cursor:pointer;transition:bottom .2s}
main:has(#fab.show) #agentFab{bottom:84px}
main.is3d #agentFab{bottom:100px}
#agentBtn.ext::after,#agentFab.ext::after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#3aa76d;box-shadow:0 0 0 2px var(--panel)}
/* docked along the right edge, under the header and over the side panel: the whole height, so a conversation has room and nothing half-covers the panel */
.ag-pane{position:fixed;z-index:25;right:8px;top:calc(env(safe-area-inset-top) + var(--hd, 52px) + 8px);bottom:calc(env(safe-area-inset-bottom) + 36px);width:min(400px,calc(100vw - 16px));
  display:flex;flex-direction:column;background:var(--panel);border-radius:var(--r-lg, 14px);
  box-shadow:var(--sh-3, 0 18px 50px rgba(40,30,20,.22));overflow:hidden;animation:agIn .2s cubic-bezier(.3,.7,.3,1)}
@keyframes agIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.ag-pane[hidden]{display:none}
.ag-head{display:flex;align-items:center;gap:2px;padding:10px 8px 10px 16px;border-bottom:1px solid var(--line)}
.ag-head .btn{width:32px;min-height:32px;padding:0;border-radius:8px;color:var(--ink-2, #57514a)}
.ag-head .btn.on{background:var(--accent-soft);color:var(--accent-ink, var(--accent))}
.ag-title{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ag-title b{font-size:14px;font-weight:600}
.ag-title span{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;-webkit-user-select:text;user-select:text;overscroll-behavior:contain}
.ag-body[hidden]{display:none}
.ag-msg{max-width:90%;padding:9px 13px;border-radius:14px;line-height:1.6;word-break:break-word}
.ag-msg.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px;white-space:pre-wrap}
.ag-msg.bot{align-self:flex-start;background:var(--surface, #fff);box-shadow:var(--sh-1, 0 0 0 1px var(--line));border-bottom-left-radius:5px}
.ag-msg p{margin:0 0 6px}.ag-msg p:last-child{margin:0}
.ag-msg ul,.ag-msg ol{margin:2px 0 6px;padding-left:20px}
.ag-msg code{font:12px ui-monospace,Menlo,monospace;background:var(--sunken, #f2ece2);border-radius:4px;padding:0 4px}
.ag-sys{align-self:center;color:var(--muted);font-size:12px;text-align:center;max-width:95%}
.ag-sys.err{color:var(--danger, #b3372a);background:var(--danger-soft, #fbeeea);border-radius:10px;padding:8px 12px;text-align:left;line-height:1.55}
.ag-tool{align-self:flex-start;max-width:95%;font-size:12px}
.ag-tool summary{list-style:none;display:flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;background:var(--sunken, #faf6ef);cursor:pointer;color:var(--ink-2, var(--ink))}
.ag-tool summary:hover{background:var(--hover, #f2ece2)}
.ag-tool summary::-webkit-details-marker{display:none}
.ag-tool summary small{color:var(--muted)}
.ag-tool summary em{font-style:normal;color:var(--teal);font-weight:600}
.ag-tool i{width:7px;height:7px;border-radius:50%;flex:none;background:#c9bfae}
.ag-tool.run i{background:var(--accent);animation:agPulse 1s ease-in-out infinite}
.ag-tool.ok i{background:#3aa76d}.ag-tool.err i{background:#c4452f}
.ag-tool pre{margin:6px 0 0;max-height:220px;overflow:auto;background:var(--surface, #fff);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:11px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.ag-shot{display:block;margin-top:6px;max-width:100%;border:1px solid var(--line);border-radius:10px}
@keyframes agPulse{50%{opacity:.35}}
.ag-think{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface, #fff);box-shadow:var(--sh-1, 0 0 0 1px var(--line))}
.ag-think span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:agPulse 1.1s infinite}
.ag-think span:nth-child(2){animation-delay:.18s}.ag-think span:nth-child(3){animation-delay:.36s}
.ag-foot{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.ag-foot .btn{min-height:28px;border:1px solid var(--line-2, var(--line));background:var(--surface, #fff);font-size:12px;padding:0 10px;color:var(--ink)}
.ag-foot .btn:hover{background:var(--hover, #f2ece2)}
.ag-use{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ag-progress{align-self:flex-start;max-width:92%;font-size:12px;color:var(--muted);padding-left:10px;border-left:2px solid var(--line);line-height:1.5}
.ag-empty{color:var(--ink-2, var(--muted));font-size:13px;line-height:1.6}
.ag-empty p{margin:0 0 12px}
.ag-warn{color:var(--warn, #8a5f10);background:var(--warn-soft, #fbf3e4);border-radius:10px;padding:8px 12px;font-size:12.5px}
.ag-chips{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ag-chip{text-align:left;border:1px solid var(--line);background:var(--surface, #fff);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink);line-height:1.5;transition:border-color .12s,box-shadow .12s}
.ag-chip:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ag-input{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid var(--line);background:var(--panel)}
.ag-input[hidden]{display:none}
.ag-input textarea{flex:1;resize:none;border:1px solid var(--line-2, var(--line));border-radius:12px;padding:9px 12px;background:var(--surface, #fff);max-height:160px;line-height:1.5;font:inherit;outline:none;
  -webkit-user-select:text;user-select:text;transition:border-color .12s,box-shadow .12s}
.ag-input textarea:focus{border-color:var(--accent);box-shadow:var(--ring, 0 0 0 3px rgba(181,101,58,.25))}
.ag-input .btn{min-height:40px;padding:0 16px;border-radius:12px;font-weight:600}
.ag-input .btn.danger{background:var(--danger, #b3372a);color:#fff}
/* settings */
#agSettings section{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:6px}
#agSettings h4{margin:0 0 10px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em}
.ag-seg{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:12px;padding:3px;border-radius:10px;background:var(--sunken, #f4f1eb)}
.ag-seg .btn{flex:1 1 auto;min-height:30px;border-radius:7px;font-size:12px;padding:0 10px}
.ag-seg .btn.on{background:var(--surface, #fff);color:var(--ink);box-shadow:var(--sh-1, 0 1px 2px rgba(0,0,0,.08));font-weight:600}
.ag-f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12px;color:var(--ink-2, var(--muted));font-weight:500}
.ag-f input,.ag-f select{min-height:34px;border:1px solid var(--line-2, var(--line));border-radius:8px;padding:0 10px;background:var(--surface, #fff);width:100%;color:var(--ink);font-weight:400;outline:none;transition:border-color .12s,box-shadow .12s}
.ag-f select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background:var(--surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%238c8478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center/16px}
.ag-f input:focus,.ag-f select:focus{border-color:var(--accent);box-shadow:var(--ring, 0 0 0 3px rgba(181,101,58,.25))}
.ag-f small{font-size:11.5px;color:var(--muted);font-weight:400;line-height:1.5}
.ag-test{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.ag-test .btn{align-self:flex-start}
.ag-test-st{margin:0;font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.ag-test-st.ok{color:var(--ok, #2f7d4f)}
.ag-test-st.bad{color:var(--danger, #b3372a)}
.ag-test-st .err,.ag-test-st .hint{display:block;margin-top:2px;color:var(--ink)}
.ag-test-st .hint{color:var(--warn, #7a5a2c);background:var(--warn-soft, #fbf2e3);border-radius:8px;padding:6px 8px;margin-top:6px}
.ag-models{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 12px}
.ag-models .btn{min-height:28px;padding:0 10px;font-size:12px;border:1px solid var(--line-2, var(--line));background:var(--surface, #fff)}
.ag-models-st{font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;flex:1 1 140px;min-width:0}
.ag-models-st.ok{color:var(--ok, #2f7d4f)}.ag-models-st.bad{color:var(--danger, #b3372a)}
.ag-relay{background:var(--warn-soft, #fbf2e3);border-radius:10px;padding:8px 12px;color:var(--warn, #7a5a2c);line-height:1.55}
.ag-c{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;margin:2px 0 10px;line-height:1.5;cursor:pointer}
.ag-c input{margin-top:2px;accent-color:var(--accent)}
.ag-st{font-size:12px;margin:4px 0}
.ag-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#c9bfae;vertical-align:0}
.ag-dot.connected{background:#3aa76d}.ag-dot.connecting{background:var(--accent)}.ag-dot.error{background:#c4452f}
.ag-note{font-size:11.5px;color:var(--muted);margin:6px 0;line-height:1.55}
.ag-note code,.ag-how pre{font:11px ui-monospace,Menlo,monospace}
.ag-how summary{cursor:pointer;font-size:12px;color:var(--teal)}
.ag-how pre{background:var(--surface, #fff);border:1px solid var(--line);border-radius:8px;padding:8px;white-space:pre-wrap;word-break:break-all}
#agSettings .btn.primary{min-height:34px;padding:0 14px}
html.native #fullscreen{display:none}
@media (pointer:coarse){
  .ag-input textarea,.ag-f input,.ag-f select{font-size:16px}
  .ag-tool summary{padding:7px 12px}
  .ag-head .btn{width:40px;min-height:40px}
}
/* 手机 / 窄屏：全屏面板 */
@media (max-width:720px){
  .ag-pane{inset:0;width:auto;height:auto;border-radius:0;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  #agentBtn{padding-left:10px;padding-right:10px}
}
/* ---------- 手机（竖屏窄 / 横屏矮）：对话按钮改为画面上的悬浮按钮（页面布局由宿主应用决定） ---------- */
@media (max-width:900px), (max-height:500px) and (pointer:coarse){
  #agentBtn{display:none}
  #agentFab{display:flex}
  .ag-pane{bottom:calc(env(safe-area-inset-bottom) + 8px)}
}
/* 窄屏抽屉收起时完全移出屏幕：横屏刘海机型的侧边安全区比 110% 位移更宽，会露出一条 */
@media (max-width:1100px){
  aside.lib:not(.open){transform:translateX(calc(-100% - env(safe-area-inset-left) - 16px))}
  aside.right:not(.open){transform:translateX(calc(100% + env(safe-area-inset-right) + 16px))}
}