/* ============================================================
   代理人 — chat box
   Windows 98 messenger styling, trimmed to a single window.
   ============================================================ */
:root{
  --teal:#008080;
  --silver:#c0c0c0;
  --silver-light:#dfdfdf;
  --silver-dark:#808080;
  --silver-darkest:#404040;
  --navy:#000080;
  --ink:#000;
  --font:"Pixelated MS Sans Serif",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Fixedsys","Cascadia Mono","Consolas",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font:12px/1.4 var(--font);
  color:var(--ink);
  background:var(--teal);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}
button{font-family:var(--font)}
img{-webkit-user-drag:none}

/* hidden attribute must win over display rules */
[hidden]{display:none !important}

/* ---------- stage ---------- */
.stage{
  height:100%;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--teal);
}
body.fullscreen .stage{padding:0}

/* ---------- window ---------- */
.win{
  display:flex;flex-direction:column;
  width:100%;max-width:780px;height:100%;max-height:780px;
  background:var(--silver);
  border-top:1px solid var(--silver-light);
  border-left:1px solid var(--silver-light);
  border-right:1px solid var(--silver-darkest);
  border-bottom:1px solid var(--silver-darkest);
  box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 var(--silver-dark),
             0 14px 44px rgba(0,0,0,.45);
}
.win.max{max-width:none;max-height:none}
.win.min{height:auto;max-height:none}
.win.min .win-body{display:none}

.win-titlebar{
  display:flex;align-items:center;gap:4px;
  height:22px;padding:2px 3px;flex:none;
  background:linear-gradient(90deg,var(--navy),#1084d0);
  color:#fff;font-weight:700;font-size:12px;
}
.win-titlebar .wt-ico{
  width:15px;height:15px;object-fit:cover;flex:none;
  background:#fff;border:1px solid var(--silver-darkest);
}
.win-titlebar .wt-title{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.02em;padding-left:2px;
}
.wt-btns{display:flex;gap:2px}
.wt-btn{
  width:18px;height:16px;padding:0;display:grid;place-items:center;
  background:var(--silver);border:1px solid;
  border-color:var(--silver-light) var(--silver-darkest) var(--silver-darkest) var(--silver-light);
  font:bold 10px var(--mono);color:var(--ink);line-height:1;cursor:default;
}
.wt-btn:active{border-color:var(--silver-darkest) var(--silver-light) var(--silver-light) var(--silver-darkest)}

.win-body{
  flex:1;min-height:0;margin:2px;
  border:1px solid var(--silver-dark);
  background:#fff;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* ---------- beveled buttons ---------- */
.btn{
  background:var(--silver);
  border:1px solid;
  border-color:var(--silver-light) var(--silver-darkest) var(--silver-darkest) var(--silver-light);
  box-shadow:inset 1px 1px 0 #fff;
  font-family:var(--font);
  cursor:default;
}
.btn:active{
  border-color:var(--silver-darkest) var(--silver-light) var(--silver-light) var(--silver-darkest);
  box-shadow:inset 1px 1px 0 var(--silver-dark);
}
.btn:disabled{color:#808080;text-shadow:none}

/* ---------- chat ---------- */
.chat-body{
  flex:1;min-height:0;overflow-y:auto;padding:10px;
  background:#f5f4f0;
  display:flex;flex-direction:column;gap:10px;
}
.chat-empty{margin:auto;text-align:center;color:#808080;padding:20px}
.chat-empty img{
  width:64px;height:64px;object-fit:contain;margin-bottom:8px;
  border:1px solid var(--silver-dark);background:#fff;padding:4px;
}
.chat-empty div{font:bold 14px var(--font);color:#404040}
.chat-empty span{font-size:11px}

.chat-msg{display:flex;flex-direction:column;max-width:85%}
.chat-msg.chat-user{align-self:flex-end;align-items:flex-end}
.chat-msg.chat-bot{align-self:flex-start;align-items:flex-start}
.chat-bubble{
  padding:7px 10px;border:1px solid;
  border-color:var(--silver-light) var(--silver-darkest) var(--silver-darkest) var(--silver-light);
  box-shadow:inset 1px 1px 0 #fff;
  white-space:pre-wrap;word-break:break-word;
  font:12px/1.5 var(--font);color:var(--ink);
  max-width:100%;user-select:text;-webkit-user-select:text;
}
.chat-msg.chat-user .chat-bubble{background:#d8efd8;border-color:#9cc79c}
.chat-msg.chat-bot .chat-bubble{background:#fff}
.chat-bubble.chat-pending{color:#808080;font-style:italic;min-width:60px}
.chat-bubble.chat-err{background:#ffecec;color:#c00;border-color:#e0b4b4}

/* ---------- pre-rendered opener (baked into the HTML, no API call) ---------- */
.chat-ca{
  display:block;width:100%;text-align:left;appearance:none;-webkit-appearance:none;
  font:11px/1.45 var(--mono);letter-spacing:.2px;word-break:break-all;
  color:#0b3d0b;background:#eef7ee;cursor:pointer;
  border:1px solid;border-color:#7fae7f #cfe3cf #cfe3cf #7fae7f;
  padding:5px 7px;margin:0 0 6px;
}
.chat-ca:hover{background:#e2f2e2}
.chat-ca:active{transform:translateY(1px)}
.chat-ca.chat-ca-done{background:#d8efd8;text-align:center;font-weight:bold;letter-spacing:.6px}
.chat-ca-chain{
  font:10px var(--mono);color:#5c7a5c;letter-spacing:.6px;text-transform:uppercase;
  margin:0 0 6px;
}
.chat-ca-note{font:12px/1.5 var(--font);white-space:pre-wrap}
.chat-meta{font:10px var(--mono);color:#808080;margin-top:2px;padding:0 2px}
.chat-thinking{
  font-size:10.5px;color:#3f5c3f;font-style:italic;
  margin-bottom:4px;border-left:2px solid #008080;padding-left:8px;
}

/* ---------- composer ---------- */
.chat-composer{
  display:flex;align-items:flex-end;gap:4px;padding:6px 8px;
  border-top:1px solid #d4d0c8;background:var(--silver);flex:none;
}
.chat-composer textarea{
  flex:1;min-width:0;
  border:1px solid var(--silver-darkest);
  background:#fff;color:var(--ink);padding:5px 6px;
  font:12px var(--font);outline:none;resize:none;
  height:28px;max-height:110px;overflow-y:auto;
  user-select:text;-webkit-user-select:text;
}
.chat-composer .btn{height:28px;padding:0 14px;font-size:12px}
.chat-composer #clearBtn{padding:0 9px}

/* ---------- footer ---------- */
.chat-foot{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:3px 6px;border-top:1px solid var(--silver-dark);
  font:11px var(--mono);color:#404040;background:var(--silver);
}
.chat-foot .grow{flex:1}
.chat-foot .chat-tokens{white-space:nowrap}
.chat-status{white-space:nowrap}
.chat-status .ok{color:#008000;font-weight:700}
.chat-status .bad{color:#c00;font-weight:700}

/* ---------- reopen ---------- */
.reopen{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;
  background:var(--silver);color:var(--ink);
  font:bold 12px var(--font);cursor:default;
  border:1px solid;
  border-color:var(--silver-light) var(--silver-darkest) var(--silver-darkest) var(--silver-light);
  box-shadow:inset 1px 1px 0 #fff;
}
.reopen img{width:18px;height:18px;object-fit:cover;border:1px solid var(--silver-darkest);background:#fff;padding:1px}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .stage{padding:0}
  .win{max-width:none;max-height:none}
  .chat-msg{max-width:92%}
  .chat-foot #mpStatus{display:none}
}