/* 万能智能体系统 · 前台样式 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#f4f6fa; --card:#fff; --line:#e6e9f0; --txt:#1a1d24; --sub:#7a8194;
  --pri:#3b6ef5; --pri-d:#2f59cc; --ok:#12a150; --warn:#e8890c; --err:#e5484d;
  --radius:14px; --shadow:0 2px 14px rgba(20,30,60,.07);
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--txt); font-size:15px; line-height:1.6;
}
.hide{ display:none !important; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:15px; }

/* ---------- 登录 ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:380px; background:var(--card); border-radius:20px; padding:36px 28px; box-shadow:var(--shadow); }
.auth-logo{
  width:56px; height:56px; margin:0 auto 14px; border-radius:16px;
  background:linear-gradient(135deg,var(--pri),#6a8cff); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;
}
.auth-title{ text-align:center; font-size:21px; font-weight:700; }
.auth-sub{ text-align:center; color:var(--sub); font-size:13px; margin:6px 0 22px; }
.tabs{ display:flex; gap:6px; background:#f0f2f7; padding:4px; border-radius:10px; margin-bottom:18px; }
.tab{ flex:1; padding:9px; border-radius:8px; font-size:14px; color:var(--sub); font-weight:600; }
.tab.on{ background:#fff; color:var(--pri); box-shadow:0 1px 4px rgba(0,0,0,.07); }
.auth-form{ display:flex; flex-direction:column; gap:11px; }
.auth-form input{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fafbfd; outline:none;
}
.auth-form input:focus{ border-color:var(--pri); background:#fff; }
.btn-primary{ padding:12px; border-radius:10px; background:var(--pri); color:#fff; font-size:15px; font-weight:600; margin-top:4px; }
.btn-primary:active{ background:var(--pri-d); }
.btn-primary:disabled{ opacity:.55; }
.auth-tip{ text-align:center; margin-top:16px; font-size:13px; }
.auth-tip a{ color:var(--sub); text-decoration:none; }
.auth-tip a:hover{ color:var(--pri); }

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  background:#fff; border-bottom:1px solid var(--line); padding:0 14px; height:54px;
}
.tb-logo{ font-weight:700; font-size:16px; color:var(--pri); cursor:pointer; white-space:nowrap; }
.tb-nav{ display:flex; gap:2px; margin-left:auto; }
.tb-btn{ padding:6px 12px; border-radius:8px; font-size:14px; color:var(--sub); font-weight:500; }
.tb-btn.on{ background:#eef2ff; color:var(--pri); }
.tb-right{ display:flex; align-items:center; gap:8px; }
.coin-chip{ font-size:13px; color:var(--warn); background:#fff6e8; padding:4px 10px; border-radius:20px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
/* 顶栏积分圆饼：橙色=已耗占比，浅色轨道=剩余 */
.pie{ width:15px; height:15px; flex-shrink:0; }
.pie-track{ fill:none; stroke:#ecdcbc; stroke-width:5; }
.pie-fg{ fill:none; stroke:var(--warn); stroke-width:5; stroke-linecap:round; }
.tb-out{ font-size:13px; color:var(--sub); padding:5px 9px; border-radius:8px; }
.tb-out:hover{ background:#f0f2f7; }

.view{ max-width:1000px; margin:0 auto; padding:16px 14px 40px; }

/* ---------- 广场 ---------- */
.notice{
  background:#fff8e6; border:1px solid #ffe0a3; color:#8a5a00; padding:10px 14px;
  border-radius:10px; font-size:13px; margin-bottom:14px; white-space:pre-wrap;
}
.guest-banner{ background:#eef4ff; border-color:#c9ddff; color:#234a9c; }
.guest-banner a{ color:#234a9c; font-weight:600; }
.guest-banner b{ color:#e5484d; }
/* 思考过程（可折叠） */
.reasoning{ max-width:78%; margin:6px 0 2px; }
.reasoning summary{
  cursor:pointer; font-size:12px; color:var(--sub); user-select:none;
  background:#f3f5fa; border:1px solid var(--line); border-radius:10px;
  padding:6px 12px; display:inline-block; list-style:none;
}
.reasoning summary::before{ content:'🤔 '; }
.reasoning[open] summary{ border-bottom-left-radius:2px; border-bottom-right-radius:2px; }
.reasoning .r-body{
  background:#f9fafc; border:1px solid var(--line); border-top:none;
  border-radius:0 10px 10px 10px; padding:10px 12px;
  font-size:12.5px; color:var(--sub); line-height:1.8; white-space:pre-wrap;
  max-height:260px; overflow-y:auto;
}
.cat-bar{ display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; margin-bottom:4px; }
.cat-bar::-webkit-scrollbar{ display:none; }
.cat-chip{
  padding:6px 14px; border-radius:20px; background:#fff; border:1px solid var(--line);
  font-size:13px; white-space:nowrap; color:var(--sub);
}
.cat-chip.on{ background:var(--pri); border-color:var(--pri); color:#fff; font-weight:600; }

.agent-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.agent-card{
  background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
  cursor:pointer; transition:transform .12s, box-shadow .12s; border:1px solid transparent;
}
.agent-card:hover{ transform:translateY(-2px); box-shadow:0 6px 22px rgba(20,30,60,.11); }
.agent-card.locked{ opacity:.62; }
.ag-top{ display:flex; gap:11px; align-items:flex-start; margin-bottom:10px; }
.ag-av{
  width:44px; height:44px; border-radius:12px; flex-shrink:0; font-size:22px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600;
}
.ag-name{ font-weight:700; font-size:15px; margin-bottom:2px; }
.ag-cat{ font-size:12px; color:var(--sub); }
.ag-desc{ font-size:13px; color:var(--sub); min-height:38px; margin-bottom:11px; }
.ag-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.bdg{ font-size:11px; padding:2px 8px; border-radius:20px; }
.bdg-free{ background:#e8f7ee; color:var(--ok); }
.bdg-cost{ background:#eef2ff; color:var(--pri); }
.bdg-kn{ background:#f5f0ff; color:#7c4ddb; }
.bdg-plat{ background:#fff2e8; color:var(--pri); }
.bdg-lock{ background:#f2f3f7; color:var(--sub); }

.empty{ text-align:center; color:var(--sub); padding:60px 0; font-size:14px; }

/* ---------- 对话 ---------- */
.chat-head{
  position:sticky; top:54px; z-index:20; display:flex; align-items:center; gap:12px;
  background:#fff; border-bottom:1px solid var(--line); padding:10px 14px;
}
.back-btn{ font-size:13px; color:var(--sub); }
.chat-agent{ display:flex; gap:10px; align-items:center; flex:1; min-width:0; }
.ca-avatar{
  width:34px; height:34px; border-radius:10px; color:#fff; font-size:17px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:600;
}
.ca-name{ font-weight:700; font-size:15px; }
.ca-cost{ font-size:12px; color:var(--sub); }
.hist-btn{ font-size:13px; color:var(--pri); padding:5px 10px; border-radius:8px; background:#eef2ff; }

.chat-body{ padding:16px 14px 8px; min-height:50vh; }
/* 对话视图撑满一屏，输入条贴屏幕最底（含 iPhone 底部安全区） */
#viewChat{
  display:flex; flex-direction:column;
  min-height:calc(100vh - 54px);   /* 54px = 顶栏高度 */
  padding-bottom:0;
}
#viewChat .chat-body{ flex:1 1 auto; min-height:0; }
#viewChat .composer{ margin-top:auto; padding-bottom:max(10px, env(safe-area-inset-bottom, 0px)); }
.msg{ display:flex; gap:9px; margin-bottom:16px; }
.msg.user{ flex-direction:row-reverse; }
.m-av{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:#fff; }
.msg.user .m-av{ background:#9aa2b4; }
/*
 * 气泡宽度：必须给 flex-shrink:0 + 最小宽度，否则中文会被压成竖排一列。
 * 原因：.m-bubble 在 .msg（display:flex）里默认 flex:0 1 auto ——
 *「1」代表允许收缩，而 max-width 只是上限不是下限，
 * 空间不够时浏览器会把气泡压到最小，中文没有空格可断，就一个字一行。
 * min-width 用 fit-content 让气泡至少跟内容一样宽（不会过窄），
 * 配合 max-width:78% 又不会撑太宽。
 */
.m-bubble{
  flex: 0 0 auto;
  min-width: fit-content;
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 15px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.msg.user .m-bubble{ background:var(--pri); color:#fff; border-top-right-radius:4px; }
.msg.ai .m-bubble{ background:#fff; border:1px solid var(--line); border-top-left-radius:4px; box-shadow:var(--shadow); }
.m-meta{ font-size:11px; color:var(--sub); margin-top:5px; }
.m-err{ color:var(--err); }
.typing i{ display:inline-block; width:6px; height:6px; background:#b6bcc9; border-radius:50%; margin-right:3px; animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
/* 轻量 Markdown */
.m-bubble p{ margin:0 0 8px; } .m-bubble p:last-child{ margin:0; }
.m-bubble pre{ background:#f5f6fa; padding:10px; border-radius:8px; overflow-x:auto; font-size:13px; margin:8px 0; }
.m-bubble code{ background:#f0f2f7; padding:1px 5px; border-radius:4px; font-size:13px; }
.m-bubble pre code{ background:none; padding:0; }
.m-bubble ul,.m-bubble ol{ margin:6px 0 6px 20px; }
.m-bubble strong{ font-weight:700; }

/* ===== 底部输入区（豆包式）===== */
.composer{
  position:sticky; bottom:0; z-index:5;
  padding:6px 12px 10px;
  background:linear-gradient(to top, var(--bg) 75%, transparent);
}
/* ＋菜单（手机端底部弹层，桌面居中） */
.menu-mask{ position:fixed; inset:0; background:rgba(15,20,35,.4); z-index:60; }
.plus-menu{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:420px; z-index:61;
  background:#fff; border-radius:18px 18px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -4px 24px rgba(20,30,60,.18);
}
.pm-title{ font-size:12px; color:var(--sub); padding:0 10px 8px; }
.pm-item{
  display:block; width:100%; text-align:left; padding:13px 12px;
  font-size:15px; color:var(--txt); border-radius:12px; cursor:pointer;
}
.pm-item:active{ background:#f4f6fa; }
.pm-item.on{ color:var(--pri); font-weight:600; }
.pm-item.on::after{ content:'✓'; float:right; font-weight:600; }
/* 二级页导航：输出质量档位选择 */
.pm-nav{ font-weight:500; }
.pm-arrow{ float:right; color:#a6adc0; font-size:17px; }
.pm-back{
  display:inline-block; padding:4px 10px 8px 0; background:none;
  color:#52607e; font-size:14px; cursor:pointer;
}
.pm-page.hide{ display:none; }
.pm-cancel{
  display:block; width:100%; margin-top:8px; padding:13px;
  border-radius:12px; background:#f4f6fa; color:#52607e;
  font-size:15px; font-weight:500; cursor:pointer;
}
/* 胶囊输入条：相机 | 输入 | 语音/发送 */
.input-capsule{
  display:flex; align-items:center; gap:4px;
  background:#fff; border:1px solid var(--line); border-radius:26px;
  padding:5px 6px; box-shadow:0 2px 14px rgba(20,30,60,.08);
}
.input-capsule textarea{
  flex:1 1 auto; min-width:0; resize:none; max-height:120px;
  padding:9px 4px; border:none; outline:none; background:transparent;
  line-height:1.5; font-size:15px;
}
.cap-btn{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#45506a; cursor:pointer;
}
.cap-btn:active{ background:#f0f3fa; }
.cap-btn svg{ width:22px; height:22px; display:block; }
.cap-send{
  flex-shrink:0; height:36px; padding:0 18px; margin-left:2px;
  border-radius:18px; background:var(--pri); color:#fff;
  font-weight:600; font-size:14px; cursor:pointer;
}
.cap-send:disabled{ opacity:.5; }
.attach-prev{ display:flex; gap:8px; flex-wrap:wrap; padding:8px 4px 0; }
.attach-prev:empty{ display:none; }
.ap-tip{ width:100%; font-size:12px; color:#c2640c; background:#fff7ed; padding:5px 8px; border-radius:8px; }
.ap-item{ position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.ap-item img{ width:100%; height:100%; object-fit:cover; }
.ap-x{ position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:13px; line-height:18px; padding:0; cursor:pointer; }

/* 语音状态提示 */
.mic-status{ padding:8px 14px; background:#fff7ed; color:#c2640c; font-size:13px; }
.mic-status.hide{ display:none; }

/* 用户消息内的图片 */
.m-imgs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
/* AI 画图结果 */
.md-img{ max-width:100%; max-height:360px; border-radius:12px; display:block; margin:2px 0 6px; cursor:pointer; }
/* 画图模式提示条 */
.draw-chip{
  margin:8px 4px 0; padding:7px 12px; border-radius:10px;
  background:#eef3ff; color:var(--pri); font-size:12px; font-weight:500;
  cursor:pointer; text-align:center;
}
.draw-chip.hide{ display:none; }
.m-imgs img{ width:96px; height:96px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:pointer; }

/* ---------- 统计 ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:22px; }
.stat-card{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.stat-num{ font-size:22px; font-weight:700; color:var(--pri); }
.stat-lab{ font-size:12px; color:var(--sub); margin-top:2px; }
.sec-title{ font-size:15px; margin-bottom:12px; }
.log-list{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.log-item{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.log-item:last-child{ border:none; }
.log-q{ flex:1; min-width:0; }
.log-t{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-s{ font-size:11px; color:var(--sub); margin-top:2px; }
.log-c{ font-size:13px; font-weight:600; color:var(--warn); white-space:nowrap; }
.log-c.free{ color:var(--ok); }

/* ---------- 抽屉 ---------- */
.drawer-mask{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:80; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(340px,86vw); background:#fff; z-index:90;
  display:flex; flex-direction:column; box-shadow:-4px 0 20px rgba(0,0,0,.12);
}
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; }
.drawer-head button{ font-size:22px; color:var(--sub); line-height:1; }
.hist-list{ flex:1; overflow-y:auto; }
.hist-item{ padding:12px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.hist-item:hover{ background:#fafbfd; }
.hist-t{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist-s{ font-size:11px; color:var(--sub); margin-top:3px; display:flex; justify-content:space-between; }
.hist-del{ color:var(--err); font-size:12px; }
/* 收藏/导出操作 */
.hist-ops{ display:flex; gap:10px; align-items:center; }
.hist-star{ color:#9aa2b5; font-size:12px; }
.hist-star-on{ color:var(--warn); margin-right:2px; }
.hist-item.starred .hist-t{ font-weight:600; }
.hist-exp{ color:var(--pri); font-size:12px; }

/* Toast */
#toast{
  position:fixed; left:50%; top:80px; transform:translateX(-50%); z-index:200;
  background:rgba(25,30,42,.93); color:#fff; padding:10px 18px; border-radius:10px;
  font-size:14px; max-width:86vw; text-align:center; display:none;
}

@media (max-width:560px){
  .tb-nav .tb-btn{ padding:6px 8px; font-size:13px; }
  /* 移动端放宽上限，但 flex/min-width 必须重申 ——
     否则这条 max-width 会把前面 .m-bubble 的设置覆盖掉，
     气泡又会被压回竖排。 */
  .m-bubble{ flex:0 0 auto; min-width:fit-content; max-width:86%; }
  .agent-grid{ grid-template-columns:1fr; }
  /* 顶栏紧凑化：logo + 3 个导航 + 余额/登录 都要塞进一行 */
  .topbar{ padding:0 10px; gap:6px; }
  .tb-logo{ font-size:14px; }
  .tb-right{ gap:5px; }
  .coin-chip{ padding:3px 8px; font-size:12px; }
  .tb-out{ padding:5px 9px; font-size:12px; }
  /* 对话页头部与输入区紧凑化 */
  .chat-head{ padding:10px 12px; }
  .hist-btn{ padding:5px 8px; font-size:12px; }
  .send-btn{ padding:10px 14px; }
  /* 手机端：胶囊条已是豆包式单行（相机|输入|语音/发送/加号），无需额外断行 */
  .composer{ padding:6px 8px 8px; }
  .coin-chip{ max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notice{ font-size:12px; padding:9px 11px; }
}