/* 协作台 v2：仿 Open WebUI 手机版 */
:root{
  --bg:#fff; --fg:#111; --sub:#6b6b6b; --faint:#9a9a9a; --line:#ececec;
  --bubble:#f2f2f2; --side:#f7f7f7; --hover:#efefef; --card:#fff; --pop:#fff;
  --shadow:0 4px 24px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05);
  --send:#111; --sendfg:#fff; --danger:#d93025; --ok:#1a9a50; --code:#f5f5f5;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#171717; --fg:#ececec; --sub:#a3a3a3; --faint:#777; --line:#2a2a2a;
    --bubble:#2a2a2a; --side:#111; --hover:#262626; --card:#212121; --pop:#262626;
    --shadow:0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
    --send:#ececec; --sendfg:#111; --code:#1f1f1f; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#171717; --fg:#ececec; --sub:#a3a3a3; --faint:#777; --line:#2a2a2a;
  --bubble:#2a2a2a; --side:#111; --hover:#262626; --card:#212121; --pop:#262626;
  --shadow:0 4px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --send:#ececec; --sendfg:#111; --code:#1f1f1f; color-scheme:dark;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; }
body{ display:flex; background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.grow{ flex:1; }
.ib{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; color:var(--sub); flex:none; }
.ib:active,.ib:hover{ background:var(--hover); }

/* ---- 侧栏 ---- */
#side{ width:272px; flex:none; background:var(--side); display:flex; flex-direction:column; height:100%;
  padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.side-top{ display:flex; align-items:center; gap:6px; height:44px; }
.brand{ font-weight:600; }
.side-new{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:10px; margin:6px 0 10px; font-weight:500; }
.side-new:hover,.side-new:active{ background:var(--hover); }
.side-new svg{ width:20px; height:20px; }
#chats{ flex:1; overflow-y:auto; }
.grp{ font-size:12px; color:var(--faint); padding:12px 10px 4px; }
.ci{ display:flex; align-items:center; gap:6px; width:100%; text-align:left; padding:8px 10px; border-radius:10px; font-size:15px; }
.ci .t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci:hover{ background:var(--hover); }
.ci.on{ background:var(--hover); font-weight:500; }
.ci .badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; line-height:18px; text-align:center; }
.ci .busy{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation:blink 1.2s infinite; }
.side-foot{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--faint); padding:8px 10px 0; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.dot.off{ background:var(--danger); }
.scrim{ display:none; }
@media (max-width:899px){
  #side{ position:fixed; left:0; top:0; bottom:0; z-index:40; width:min(82vw, 300px); transform:translateX(-100%); transition:transform .22s ease; }
  body.side-open #side{ transform:none; box-shadow:0 0 40px rgba(0,0,0,.2); }
  body.side-open .scrim{ display:block; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.3); }
}
@media (min-width:900px){
  body:not(.side-hide) #menuBtn{ display:none; }
  body.side-hide #side{ display:none; }
}

/* ---- 主区 ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; height:100%; position:relative; }
.top{ display:flex; align-items:center; gap:2px; height:calc(52px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 8px 0; flex:none; }
.title{ font-size:17px; font-weight:500; padding:0 4px 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:55vw; }
.dots{ width:34px; }
#list{ flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.col{ max-width:780px; margin:0 auto; padding:12px 18px 24px; }
.down{ position:absolute; left:50%; bottom:150px; transform:translateX(-50%); width:36px; height:36px; border-radius:50%;
  background:var(--card); box-shadow:var(--shadow); display:none; align-items:center; justify-content:center; color:var(--sub); }
.down svg{ width:18px; height:18px; }
.down.show{ display:flex; }

/* ---- 消息 ---- */
.empty{ text-align:center; color:var(--faint); margin-top:30vh; font-size:15px; }
.empty b{ display:block; font-size:22px; color:var(--fg); font-weight:600; margin-bottom:6px; }
.me{ display:flex; flex-direction:column; align-items:flex-end; margin:22px 0; }
.me .bub{ max-width:82%; background:var(--bubble); border-radius:20px; padding:9px 16px; white-space:pre-wrap; word-break:break-word; }
.me .meta{ font-size:12px; color:var(--faint); margin:0 6px 4px; }
.ai{ margin:22px 0; }
.ai .name{ font-weight:500; display:flex; align-items:baseline; gap:8px; }
.ai .name small{ font-weight:400; color:var(--faint); font-size:12px; }
.ai .name .tag{ font-size:11px; color:var(--sub); border:1px solid var(--line); border-radius:6px; padding:0 5px; }
.ai .text{ white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.text code{ font:14px ui-monospace,Menlo,Consolas,monospace; background:var(--code); border-radius:5px; padding:1px 5px; }
.text pre{ font:13px/1.5 ui-monospace,Menlo,Consolas,monospace; background:var(--code); border-radius:10px; padding:10px 12px; overflow-x:auto; white-space:pre; margin:8px 0; }
.more{ color:var(--sub); font-size:14px; margin-top:4px; text-decoration:underline; }
.sys{ text-align:center; font-size:12px; color:var(--faint); margin:14px 0; }
.status{ display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--fg); }
.ai.work{ padding:10px 2px; }
.ai.work .name{ display:flex; align-items:baseline; gap:8px; }
.ai.work .name small{ color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.status-sub{ font-size:12.5px; color:var(--faint); margin-top:2px; }
.spinner{ width:13px; height:13px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--fg);
  animation:spin .8s linear infinite; flex:none; }
.waiting{ width:11px; height:11px; border-radius:50%; border:2px solid var(--faint); opacity:.6; flex:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .spinner{ animation-duration:2.4s; } }
.cursor{ display:inline-block; width:2px; height:1.1em; background:var(--line); margin-top:6px; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.gallery{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.me .gallery{ justify-content:flex-end; }
.gallery img{ max-width:220px; max-height:220px; border-radius:14px; object-fit:cover; cursor:zoom-in; }
.filecard{ display:inline-flex; align-items:center; gap:10px; margin-top:6px; padding:8px 12px; border:1px solid var(--line); border-radius:14px; color:inherit; text-decoration:none; max-width:280px; }
.filecard .fn{ font-size:14px; word-break:break-all; }
.filecard .fs{ font-size:12px; color:var(--faint); }

/* ---- 输入卡片 ---- */
.composer{ flex:none; padding:4px 12px max(10px, env(safe-area-inset-bottom)); text-align:center; }
.composer .card{ text-align:left; }
.stopall{ display:none; align-items:center; gap:6px; margin:0 auto 8px; padding:7px 16px 7px 12px; border-radius:18px;
  background:var(--card); box-shadow:var(--shadow); color:var(--danger); font-size:15px; }
.stopall svg{ width:16px; height:16px; fill:currentColor; stroke:none; }
.stopall.show{ display:inline-flex; }
.card{ max-width:780px; margin:0 auto; background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:10px 10px 8px; }
#input{ display:block; width:100%; border:0; outline:0; resize:none; background:transparent; color:var(--fg); font:inherit; font-size:16px;
  padding:6px 10px 4px; max-height:40vh; min-height:34px; }
#input::placeholder{ color:var(--faint); }
.tools{ display:flex; align-items:center; gap:2px; margin-top:6px; }
.sep{ width:1px; height:22px; background:var(--line); margin:0 4px; }
.model{ display:inline-flex; align-items:center; gap:4px; padding:6px 8px 6px 10px; border-radius:10px; color:var(--sub); font-size:15px; max-width:46vw; }
.model span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model svg{ width:18px; height:18px; }
.model:hover,.model:active{ background:var(--hover); }
.send{ width:38px; height:38px; border-radius:50%; background:var(--send); color:var(--sendfg); display:inline-flex; align-items:center; justify-content:center; margin-left:6px; flex:none; }
.send svg{ width:20px; height:20px; stroke-width:2.2; }
.send .stop{ display:none; fill:currentColor; stroke:none; }
.send.stopping .up{ display:none; }
.send.stopping .stop{ display:block; }
.send:disabled{ opacity:.35; }
.atts{ display:flex; flex-wrap:wrap; gap:6px; padding:0 4px; }
.atts:empty{ display:none; }
.atts .chip{ position:relative; display:flex; align-items:center; gap:8px; padding:6px 28px 6px 6px; border:1px solid var(--line); border-radius:12px; font-size:12px; max-width:220px; margin-bottom:6px; }
.atts .chip img{ width:40px; height:40px; object-fit:cover; border-radius:8px; }
.atts .chip .cn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.atts .chip .cp{ color:var(--faint); }
.atts .chip.err .cp{ color:var(--danger); }
.atts .chip .x{ position:absolute; right:4px; top:4px; width:20px; height:20px; border-radius:50%; font-size:11px; color:var(--sub); }
.drop{ display:none; position:absolute; inset:10px; border:2px dashed var(--faint); border-radius:20px; background:var(--bg); opacity:.92;
  align-items:center; justify-content:center; font-size:18px; color:var(--sub); z-index:20; }
.drop.show{ display:flex; }

/* ---- 弹出菜单 ---- */
.pop{ display:none; position:fixed; z-index:60; min-width:180px; background:var(--pop); border-radius:16px; box-shadow:var(--shadow); padding:6px; }
.pop.open{ display:block; }
.pop button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:10px; font-size:15px; }
.pop button:hover,.pop button:active{ background:var(--hover); }
.pop button svg{ width:18px; height:18px; }
.pop .danger{ color:var(--danger); }
.pop button span{ flex:1; display:flex; flex-direction:column; line-height:1.35; }
.pop small{ color:var(--faint); font-size:12px; }
.pop .chk{ font-style:normal; visibility:hidden; }
.pop .on .chk{ visibility:visible; }

/* ---- 底部弹层 ---- */
.sheet-bg{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:70; }
.sheet-bg.show{ display:block; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:71; max-width:560px; margin:0 auto; max-height:80vh; overflow-y:auto;
  background:var(--card); border-radius:22px 22px 0 0; padding:8px 18px max(18px, env(safe-area-inset-bottom));
  transform:translateY(105%); transition:transform .22s ease; visibility:hidden; }
.sheet.show{ transform:none; visibility:visible; }
.sheet-h{ display:flex; align-items:center; gap:8px; height:48px; font-size:17px; }
.sheet-h .x{ margin-left:auto; }
.sheet-h .num{ color:var(--faint); font-size:14px; }
.label{ color:var(--sub); font-size:13px; margin:6px 0 8px; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; padding:10px 0; border-radius:12px; background:var(--hover); font-size:15px; }
.seg button.on{ background:var(--send); color:var(--sendfg); }
.logout{ width:100%; margin-top:22px; padding:12px 0; border-radius:12px; background:var(--hover); color:var(--danger); font-size:15px; }
.task-title{ font-weight:500; }
.bar{ height:6px; border-radius:3px; background:var(--hover); margin:10px 0 6px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--ok); width:0; transition:width .3s; }
.steps{ list-style:none; margin:0; padding:0; }
.steps li{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px; }
.steps li:last-child{ border-bottom:0; }
.steps .ic{ width:18px; text-align:center; flex:none; color:var(--faint); }
.steps .st-done .ic{ color:var(--ok); }
.steps .st-doing .ic{ color:#e8a400; }
.steps .st-blocked .ic{ color:var(--danger); }
.steps .st-done .nm{ color:var(--sub); }
.steps .nt{ display:block; font-size:12px; color:var(--faint); }
/* 每个任务一张卡片：这个对话的在前，其他对话的折起来 */
.plan{ padding:4px 0 10px; border-bottom:1px solid var(--line); }
.plan:last-child{ border-bottom:0; }
.plan-h{ display:flex; align-items:center; gap:6px; width:100%; text-align:left; padding:10px 0 0; color:inherit; }
.plan-h .task-title{ flex:1; min-width:0; }
.plan-h .num{ color:var(--faint); font-size:13px; flex:none; }
.plan .sub{ font-size:12px; color:var(--faint); margin-top:2px; display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; }
.plan-del{ margin-left:auto; padding:2px 10px; border-radius:8px; border:1px solid var(--line); color:var(--danger); font-size:12px; }
.plan-del:active,.plan-del:hover{ background:var(--hover); }
.plan .st{ display:inline-block; font-size:11px; border-radius:6px; padding:0 5px; margin-right:4px; border:1px solid var(--line); color:var(--sub); }
.plan .st.run{ color:#e8a400; border-color:#e8a40066; }
.plan .st.ok{ color:var(--ok); border-color:#1a9a5066; }
.plan .st.bad{ color:var(--danger); border-color:#d9302566; }
.plan.fold .steps{ display:none; }
.plan-sep{ font-size:12px; color:var(--faint); padding:16px 0 0; }
.plans-empty{ color:var(--faint); font-size:14px; padding:12px 0 20px; }

/* ---- 对话列表：每行右侧删除按钮 ---- */
.crow{ display:flex; align-items:center; gap:2px; border-radius:11px; }
.crow:hover,.crow.on{ background:var(--hover); }
.crow .ci{ flex:1; width:auto; min-width:0; background:none; padding:9px 4px 9px 10px; }
.crow .ci:hover,.crow .ci.on{ background:none; }
.ci-del{ flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-right:4px;
  border-radius:9px; color:var(--faint); opacity:.7; transition:opacity .15s, background .15s, color .15s; }
.ci-del svg{ width:17px; height:17px; }
.ci-del:hover,.ci-del:active{ opacity:1; color:var(--danger); background:rgba(217,48,37,.1); }
@media (hover:hover){ .ci-del{ opacity:0; } .crow:hover .ci-del,.crow.on .ci-del{ opacity:.75; } }

/* ---- 删除确认弹窗 ---- */
.dlg-bg{ display:none; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.42); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:24px; }
.dlg-bg.show{ display:flex; animation:fadein .16s ease; }
.dlg{ width:100%; max-width:330px; background:var(--card); border-radius:24px; padding:26px 22px 18px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04); animation:popin .2s cubic-bezier(.2,.9,.3,1.1); }
.dlg-ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(217,48,37,.1); color:var(--danger); }
.dlg-ic svg{ width:25px; height:25px; }
.dlg-t{ font-size:17px; font-weight:600; letter-spacing:.2px; }
.dlg-d{ font-size:13.5px; line-height:1.55; color:var(--sub); margin:8px 0 20px; }
.dlg-d b{ color:var(--fg); font-weight:600; word-break:break-all; }
.dlg-b{ display:flex; gap:10px; }
.dlg-b button{ flex:1; height:44px; border-radius:14px; font-size:15px; font-weight:500; transition:transform .1s, filter .15s; }
.dlg-b button:active{ transform:scale(.97); }
.dlg-no{ background:var(--hover); color:var(--fg); }
.dlg-yes{ background:var(--danger); color:#fff; box-shadow:0 6px 16px rgba(217,48,37,.28); }
@keyframes fadein{ from{ opacity:0 } }
@keyframes popin{ from{ opacity:0; transform:scale(.92) translateY(8px) } }
@media (prefers-reduced-motion:reduce){ .dlg-bg.show,.dlg{ animation:none; } }
/* 输入框上方常驻的细进度条，点开看详情 */
.tbar{ display:block; width:100%; text-align:left; margin:0 0 8px; padding:7px 12px 2px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--sub); font-size:13px; }
.tbar[hidden]{ display:none; }
.tbar .tt{ display:flex; gap:8px; }
.tbar #tbarName{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbar b{ font-weight:500; color:var(--fg); flex:none; }
.tbar .bar{ display:block; height:4px; margin:6px 0 5px; }

/* ---- 看大图 / 登录 ---- */
.viewer{ display:none; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); align-items:center; justify-content:center; }
.viewer.show{ display:flex; }
.viewer img{ max-width:100%; max-height:100%; }
.login{ display:none; position:fixed; inset:0; z-index:100; background:var(--bg); align-items:center; justify-content:center; padding:16px; }
.login.show{ display:flex; }
.login form{ width:100%; max-width:320px; text-align:center; }
.login-ic{ width:56px; height:56px; border-radius:14px; }
.login h2{ margin:10px 0 4px; }
.login p{ color:var(--sub); font-size:14px; margin:0 0 18px; }
.login input{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px; font-size:18px; text-align:center; letter-spacing:4px; background:var(--card); color:var(--fg); outline:0; }
.login .go{ width:100%; margin-top:12px; padding:12px 0; border-radius:14px; background:var(--send); color:var(--sendfg); font-size:16px; }
.login .err{ color:var(--danger); font-size:14px; margin-top:10px; min-height:20px; }

/* progress percentage */
.barrow{ display:flex; align-items:center; gap:8px; }
.barrow .bar{ flex:1; margin:10px 0 6px; }
.pct{ font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:36px; text-align:right; }