/* ====== CSS Variables & Theme ====== */
:root {
  --p: #7c39ed;
  --ph: #6a2fd4;
  --pl: #e8e0ff;
  --pt: #a78bfa;
  --bg: #f8f7fc;
  --bg2: #ffffff;
  --bg3: #f5f3ff;
  --bg-input: #f9f8fd;
  --t: #1a1a2e;
  --t2: #4a4758;
  --t3: #7c7a8f;
  --bd: #e8e6f0;
  --bs: 0 1px 3px rgba(0,0,0,0.04);
  --bsm: 0 4px 16px rgba(0,0,0,0.06);
  --r: 10px;
  --font: "Lexend",-apple-system,sans-serif;
}
[data-theme=dark] {
  --bg: #0f0f1a;
  --bg2: #1a1a2e;
  --bg3: #242238;
  --bg-input: #1e1d30;
  --t: #e8e6f0;
  --t2: #bebccd;
  --t3: #8a889a;
  --bd: #2a2840;
  --bs: 0 1px 3px rgba(0,0,0,0.3);
  --bsm: 0 4px 16px rgba(0,0,0,0.4);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--t);display:flex;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:#d4d0e0;border-radius:2px}
[data-theme=dark] ::-webkit-scrollbar-thumb{background:#3a3850}

/* ====== App Layout ====== */
.app{display:flex;height:100vh;width:100vw}

/* ====== Sidebar ====== */
.sb{width:280px;min-width:280px;flex:0 0 280px;background:linear-gradient(180deg,rgba(124,57,237,0.18) 0%,rgba(124,57,237,0.08) 20%,rgba(124,57,237,0.03) 42%,var(--bg2) 72%),var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;overflow:hidden;transition:width .3s ease,min-width .3s ease,flex-basis .3s ease}
/* ====== 桌面端折叠规则（≥769px 才生效，手机端用抽屉式不干扰）====== */
@media(min-width:769px){
  .sb.o{width:0;min-width:0;flex-basis:0;border-right:none;padding:0}
  .sb.o .sb-h .cls{transform:rotate(180deg)}
  .sb-exp{display:none;position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:99;width:26px;height:60px;background:#7c3aed;border:1.5px solid #6d28d9;border-left:none;border-radius:0 14px 14px 0;cursor:pointer;color:#fff;align-items:center;justify-content:center;transition:background .2s,transform .2s}
  .sb-exp:hover{background:#6d28d9;transform:translateY(-50%) scale(1.1)}
  .sb-exp svg{width:20px;height:20px}
  .sb.o .sb-exp{display:flex}
}
.sb-h{padding:12px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bd);flex-shrink:0}
.sb-h .lg{width:30px;height:30px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-h .lg img{width:100%;height:100%;object-fit:contain;display:block}
.sb-h .nm{font-weight:700;font-size:13px;color:var(--t);letter-spacing:.2px}
.sb-h .tg{font-size:9px;color:var(--t3);margin-top:1px}
.sb-h .nm .ver-pill{display:inline-block;margin-left:7px;padding:1px 6px;font-size:10px;font-weight:700;line-height:1.5;border-radius:6px;color:#fff;background:linear-gradient(135deg,#ff7a45,#ff2e63 45%,#7a5cff 75%,#2ec5ff);vertical-align:middle;letter-spacing:.4px;box-shadow:0 1px 5px rgba(122,92,255,.4);transform:translateY(-1px)}
.sb-h .cls{margin-left:auto;background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:4px;border-radius:6px}
.sb-h .cls:hover{background:var(--bg3)}

.sb-acts{padding:8px 10px;display:flex;gap:6px;flex-shrink:0}
.sb-acts .new{flex:1;padding:6px 0;border-radius:7px;border:none;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.sb-acts .new:hover{background:linear-gradient(135deg,var(--ph),#9333ea)}
.sb-acts .hi{width:30px;height:30px;border-radius:7px;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}

.sb-tabs{display:flex;padding:6px 10px;gap:6px;flex-shrink:0}
.sb-tabs button{padding:9px 12px;border:none;background:var(--bg3);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;border-radius:8px;flex:1;transition:all.2s;letter-spacing:.3px}
.sb-tabs button:hover{background:var(--pl);color:var(--p);transform:translateY(-1px)}
.sb-tabs button.act{background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(124,57,237,0.25)}
.sb-tabs button .hot{font-size:8px;background:#fef3c7;color:#d97706;padding:1px 5px;border-radius:10px;margin-left:4px;font-weight:600}

.sb-cats{display:flex;padding:6px 10px;gap:4px;overflow-x:auto;flex-shrink:0;border-bottom:1px solid var(--bd)}
.sb-cats::-webkit-scrollbar{height:0}
.sb-cats button{padding:4px 7px;border-radius:12px;border:1.5px solid transparent;background:transparent;color:var(--t2);font-size:10px;cursor:pointer;white-space:nowrap;font-family:inherit;font-weight:500;transition:all.2s}
.sb-cats button:hover{border-color:var(--pt);color:var(--p);background:var(--pl)}
.sb-cats button.act{background:var(--p);color:#fff;border-color:var(--p);font-weight:700}

.sb-s{padding:4px 10px 8px;flex-shrink:0}
.sb-s input{width:100%;padding:7px 10px;border:1px solid var(--bd);border-radius:7px;background:var(--bg);color:var(--t);font-size:12px;font-family:inherit;outline:none}
.sb-s input:focus{border-color:var(--pt)}
.sb-s input::placeholder{color:var(--t3)}

.sb-m{flex:1;overflow-y:auto;padding:0 6px}
.mc{display:flex;gap:8px;padding:8px 8px;border-radius:10px;cursor:pointer;margin-bottom:2px;border:1.5px solid transparent;transition:all .2s ease;position:relative}
.mc:hover{background:var(--bg3);border-color:rgba(124,57,237,0.15);transform:translateX(2px)}
.mc.act{background:linear-gradient(135deg,var(--pl),rgba(124,57,237,0.06));border-color:var(--p);box-shadow:0 1px 4px rgba(124,57,237,0.1)}
.mc.act::after{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--p)}
.mc .l{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:600}
.mc .l svg{width:20px;height:20px}
.mc .i{flex:1;min-width:0}
.mc .n{font-size:12px;font-weight:500;color:var(--t)}
.mc .d{font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc .r{flex-shrink:0}
.mc.act .r{background:var(--p);color:#fff}

.sb-f{border-top:1px solid var(--bd);padding:8px 12px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.sb-f .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--p),#a855f7);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:600;cursor:pointer}
.sb-f .nn{font-size:11px;color:var(--t);flex:1;font-weight:500}
.sb-f .bl{font-size:10px;color:var(--t3)}

/* ====== Top Bar ====== */
.top{display:flex;align-items:center;padding:6px 14px;border-bottom:1px solid var(--bd);background:rgba(255,255,255,0.7);backdrop-filter:blur(12px);gap:4px;flex-shrink:0;z-index:10;min-height:44px}
[data-theme=dark] .top{background:rgba(26,26,46,0.8)}
.top .ms{height:28px;display:flex;align-items:center;padding:4px 10px;border-radius:7px;border:none;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;flex-shrink:0;transform:translateY(7px)}
.top .srch{padding:4px 10px;border-radius:7px;background:var(--bg3);color:var(--t3);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:4px}
.top .sp{flex:1}
.top .ic{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--t2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.top .ic:hover{background:var(--bg3)}
.top .rch{padding:4px 12px;border-radius:7px;border:none;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.top .usr{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--p),#a855f7);display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:600;cursor:pointer}
/* ====== Top bar promo ticker & promo buttons ====== */
.top-center{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;height:28px}
.promo-ticker{white-space:nowrap;overflow:hidden;position:relative;width:100%;max-width:480px;height:28px;display:flex;align-items:center;line-height:1;border:1px solid var(--bd);border-radius:6px;padding:0 8px}
.promo-ticker-inner{display:inline-flex;white-space:nowrap;animation:promoScroll 45s linear infinite}
.promo-ticker-inner a{color:var(--p);text-decoration:none;font-size:11px;font-weight:500;margin-right:40px;cursor:pointer;transition:color .15s;white-space:nowrap}
.promo-ticker-inner a:hover{color:#ff2e63}
@keyframes promoScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.top .promo-btn{padding:4px 12px;border-radius:7px;border:none;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:3px;flex-shrink:0;letter-spacing:.3px;line-height:1;height:28px}
.top .promo-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.top .promo-btn.gw{background:linear-gradient(135deg,#ff2e63,#ff7a45);color:#fff}
.top .promo-btn.gw:hover{background:linear-gradient(135deg,#e62856,#e86a38)}
.top .promo-btn.client{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}
.top .promo-btn.client:hover{background:linear-gradient(135deg,#6d28d9,#9333ea)}
/* ====== Sidebar provider navigation ====== */
.sb-pnav{border-top:1px solid var(--p);padding:6px 10px 8px;flex-shrink:0;max-height:160px;overflow-y:auto;background:var(--bg2)}
.sb-pnav-title{font-size:10px;color:#fff;font-weight:700;padding:4px 4px;text-align:center;letter-spacing:.6px;text-transform:uppercase;background:linear-gradient(135deg,var(--p),#a855f7);border-radius:6px;margin-bottom:6px}
.sb-pnav-list{display:flex;flex-wrap:wrap;gap:2px}
.sb-pnav-btn{display:flex;align-items:center;gap:3px;padding:4px 8px;border-radius:6px;border:1px solid transparent;background:var(--bg3);color:var(--t2);font-size:10px;cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap}
.sb-pnav-btn:hover{border-color:var(--pt);color:var(--p);background:var(--pl)}
.sb-pnav-btn.act{background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;border-color:transparent}
.sb-pnav-btn .icon{width:14px;height:14px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.sb-pnav-btn .icon svg{width:14px;height:14px;display:block}

/* ====== Main Content ====== */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

.chat{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg2);position:relative}
.chat-t{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;flex-shrink:0}
.chat-t .l{display:flex;align-items:center;gap:10px}
.chat-t .tbs{display:flex;gap:2px;padding:3px;border-radius:7px;background:var(--bg3)}
.chat-t .tbs button{padding:4px 10px;border-radius:5px;border:none;background:transparent;color:var(--t2);font-size:11px;cursor:pointer;font-family:inherit;font-weight:500}
.chat-t .tbs button.act{background:var(--bg2);color:var(--t)}
.chat-t .r{display:flex;gap:3px}
.chat-t .r button{padding:4px 8px;border-radius:5px;border:none;background:transparent;color:var(--t2);font-size:11px;cursor:pointer;font-family:inherit}
.chat-t .r button:hover{background:var(--bg3)}

.chat-b{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;align-items:center;background:var(--bg2)}

/* ====== Model Hero (大屏) ====== */
.wlc{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:24px 16px;text-align:center;position:relative;overflow:auto}
.wlc::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -12%,rgba(124,57,237,.12),transparent 60%);pointer-events:none}
.wlc .hero{position:relative;max-width:760px;width:100%;display:flex;flex-direction:column;align-items:center}
.wlc .hero-ic{width:96px;height:96px;border-radius:28px;display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:18px;box-shadow:0 12px 30px rgba(124,57,237,.22);border:1px solid rgba(255,255,255,.25)}
.wlc .hero-ic svg{width:52px;height:52px}
.wlc .hero-name{font-size:30px;font-weight:700;letter-spacing:.2px;margin-bottom:12px;background:linear-gradient(135deg,var(--t),var(--p));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wlc .hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wlc .hero-badge{padding:5px 12px;border-radius:20px;background:var(--bg3);color:var(--t2);font-size:11px;font-weight:600;letter-spacing:.5px}
.wlc .hero-chip{padding:5px 12px;border-radius:20px;border:1px solid var(--bd);color:var(--t2);font-size:11px;font-weight:500}
.wlc .hero-chip b{color:var(--p);font-weight:600}
.wlc .hero-tag{font-size:14px;color:var(--t2);margin-bottom:18px;font-weight:500}
.wlc .hero-desc{border:1px solid var(--bd);border-radius:16px;padding:18px 20px;width:100%;max-width:640px;background:var(--bg2);text-align:left;box-shadow:0 4px 18px rgba(0,0,0,.04);transition:border-color .2s}
.wlc .hero-desc:hover{border-color:var(--pt)}
.wlc .hero-desc .t{font-size:14px;color:var(--t);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.wlc .hero-desc .t::before{content:'';width:4px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--p),#a855f7)}
.wlc .hero-desc .p{font-size:13.5px;color:var(--t2);line-height:1.85}
.wlc .hero-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0}
.wlc .ht{padding:5px 14px;border-radius:20px;background:var(--pl);color:var(--p);font-size:11px;font-weight:600;border:1px solid var(--pt)}

/* ====== Role Bar (单排横滑 · 无背景 · 细线图标 · 选中态) ====== */
.roles-bar{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:9px 14px 11px;max-width:90%;margin:0 auto;background:transparent;position:relative}
.roles-lbl{flex-shrink:0;font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.3px;user-select:none}
.roles-scroll{flex:1;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.roles-scroll::-webkit-scrollbar{height:0;display:none}
.roles-list{display:flex;gap:8px;padding:2px 4px;flex-shrink:0}
.roles-list .rp{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:16px;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);font-size:11.5px;cursor:pointer;white-space:nowrap;transition:all .16s;line-height:1;user-select:none;flex-shrink:0}
.roles-list .rp:hover{border-color:var(--pt);color:var(--p);background:var(--pl)}
.roles-list .rp.act{background:linear-gradient(135deg,var(--p),#a855f7);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(124,57,237,0.28)}
.roles-list .rp .ri{width:14px;height:14px;flex-shrink:0;display:inline-flex;color:var(--t3);transition:color .16s}
.roles-list .rp .ri svg{width:14px;height:14px;display:block}
.roles-list .rp:hover .ri{color:var(--p)}
.roles-list .rp.act .ri{color:#fff}
.roles-fade{position:absolute;right:52px;top:9px;bottom:11px;width:34px;background:linear-gradient(90deg,transparent,var(--bg2));pointer-events:none;border-radius:16px;transition:opacity .2s}
[data-theme=dark] .roles-fade{background:linear-gradient(90deg,transparent,var(--bg2))}
.roles-more{flex-shrink:0;width:32px;height:32px;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--p);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:all .16s;position:relative;z-index:3}
.roles-more:hover{background:var(--p);color:#fff;border-color:transparent;transform:scale(1.06)}
.roles-more svg{width:16px;height:16px;display:block;transition:transform .2s}
.roles-more.end svg{transform:rotate(180deg)}

/* ====== 汉堡按钮（历史抽屉触发） ====== */
.chat-t .l .hm{padding:4px 9px;border-radius:6px;border:1px solid var(--bd);background:var(--bg3);color:var(--t);font-size:13px;cursor:pointer;margin-right:6px;line-height:1;transition:all .15s}
.chat-t .l .hm:hover{background:var(--pl);color:var(--p);border-color:var(--pt)}

/* ====== 历史抽屉（可视化区域） ====== */
.hist-back{position:absolute;inset:0;background:rgba(8,8,12,.42);opacity:0;visibility:hidden;transition:opacity .22s;z-index:40}
.hist-back.open{opacity:1;visibility:visible}
.hist-drawer{position:absolute;top:0;left:0;bottom:0;width:300px;max-width:84%;background:var(--bg);border-right:1px solid var(--bd);transform:translateX(-100%);transition:transform .25s ease;z-index:41;display:flex;flex-direction:column;box-shadow:6px 0 30px rgba(0,0,0,.18)}
.hist-drawer.open{transform:translateX(0)}
.hist-head{padding:13px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd);font-weight:600;color:var(--t);font-size:13px;flex-shrink:0}
.hist-x{background:none;border:none;cursor:pointer;font-size:14px;color:var(--t2);padding:2px 4px}
.hist-x:hover{color:var(--p)}
.hist-list{flex:1;overflow-y:auto;padding:10px}
.hist-empty{padding:24px 12px;text-align:center;color:var(--t2);font-size:12px;line-height:1.7}
.hist-item{position:relative;padding:10px 34px 10px 12px;border-radius:10px;border:1px solid var(--bd);margin-bottom:8px;cursor:pointer;transition:all .15s;background:var(--bg2)}
.hist-item:hover{border-color:var(--pt);background:var(--pl)}
.hist-item .t{font-size:13px;color:var(--t);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item .s{font-size:10.5px;color:var(--t2);margin-top:4px}
.hist-item .del{position:absolute;top:8px;right:8px;font-size:11px;opacity:.5;cursor:pointer}
.hist-item .del:hover{opacity:1}
.hist-foot{padding:10px 12px;border-top:1px solid var(--bd);flex-shrink:0}
.hist-clear{width:100%;padding:8px;border:1px solid var(--bd);background:var(--bg2);border-radius:8px;color:var(--t2);cursor:pointer;font-size:12px;transition:all .15s}
.hist-clear:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.08)}

/* ====== 消息卡片底部：时间 / 费用 / token ====== */
.mf .sp{flex:1}
.mf .time{font-size:10px;color:var(--t3);margin-left:2px}
.mf .cost{font-size:10px;color:var(--p);font-weight:600;margin-left:6px}
.mf .tok{font-size:10px;color:var(--t3);margin-left:6px}

/* ====== 全局搜索 ====== */
.search-trigger{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:9px;border:1px solid var(--bd);background:var(--bg3);color:var(--t2);cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s;min-width:190px}
@media(max-width:768px){.search-trigger{min-width:0;max-width:130px;flex:1;font-size:10px;padding:0 8px;gap:3px}}
.search-trigger:hover{border-color:var(--p);color:var(--p)}
.search-trigger svg{flex-shrink:0;opacity:.7}
.search-trigger span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-search{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;padding-top:8vh;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dn-search.s{display:flex;animation:dnFade .15s ease}
@keyframes dnFade{from{opacity:0}to{opacity:1}}
.search-card{width:min(640px,92vw);max-height:76vh;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.search-bar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.search-ic{color:var(--t3);flex-shrink:0}
.search-input{flex:1;border:none;background:none;outline:none;color:var(--t);font-size:15px;font-family:inherit;min-width:0}
.search-input::placeholder{color:var(--t3)}
.search-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:16px;padding:4px 8px;border-radius:8px;flex-shrink:0}
.search-x:hover{background:var(--bg3);color:var(--t)}
.search-res{overflow-y:auto;padding:8px}
.search-grp{font-size:11px;color:var(--t3);font-weight:600;padding:10px 12px 4px;letter-spacing:.04em}
.search-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .12s}
.search-item:hover,.search-item.sel{background:var(--bg3)}
.si-ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--pl);color:var(--p);display:flex;align-items:center;justify-content:center;font-size:16px}
.si-ic svg{width:20px;height:20px}
.si-body{flex:1;min-width:0}
.si-t{font-size:13px;color:var(--t);font-weight:500}
.si-s{font-size:11px;color:var(--t2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-snippet{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.si-type{font-size:10px;color:var(--t3);background:var(--bg3);padding:2px 8px;border-radius:20px;flex-shrink:0}
.search-empty{padding:30px 12px;text-align:center;color:var(--t3);font-size:13px}
.search-res mark{background:var(--p);color:#fff;border-radius:3px;padding:0 1px}

/* ====== Messages ====== */
.msgs{width:100%;max-width:90%}
.msg{display:flex;gap:12px;max-width:90%;margin-bottom:14px}
.msg.u{flex-direction:row-reverse;margin-left:auto}
.msg .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.msg.u .av{background:var(--p)}
.msg.a .av{background:var(--bg3)}
.mw{max-width:85%}
.msg .bl{padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.65;word-break:break-word;white-space:pre-wrap}
.msg.u .bl{background:var(--p);color:#fff;border-bottom-right-radius:4px}
.msg.a .bl{background:var(--bg2);border:1px solid var(--bd);border-bottom-left-radius:4px;transition:border-color.2s}
.msg.a .bl:hover{border-color:var(--pt)}
.msg .bl pre{background:#0f0f1a;color:#e2e2f0;padding:12px;border-radius:8px;overflow-x:auto;margin:6px 0;font-size:12px}
.msg .bl img{max-width:100%;border-radius:8px}
.msg .mt{font-size:10px;color:var(--t3);margin-top:4px;opacity:.6}
.msg .mf{display:flex;align-items:center;gap:2px;margin-top:6px;padding:2px 0}
.msg .mf button{background:none;border:none;color:var(--t3);cursor:pointer;font-size:11px;padding:2px 6px;border-radius:4px;transition:all.15s}
.msg .mf button:hover{background:var(--bg3);color:var(--p);transform:scale(1.1)}

/* ====== Input Area ====== */
.inp-outer{padding:12px 24px 16px;flex-shrink:0;background:var(--bg2);border-top:1px solid var(--bd)}
/* 外层容器：白底面板，内部四层分区，颜色合理过渡 */
.inp-box{border:1.5px solid var(--bd);border-radius:12px;background:var(--bg2);padding:0;max-width:90%;margin:0 auto;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.inp-box:focus-within{border-color:var(--p);box-shadow:0 0 0 3px rgba(124,57,237,0.12)}
/* L1 模型/参数 顶部带（浅紫） */
.inp-cost{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg3);border-bottom:1px solid var(--bd)}
.inp-cost .nm{font-size:12px;font-weight:600;color:var(--t)}
.inp-cost .ctx{font-size:10px;color:var(--t3);flex:1}
.inp-cost .cost{font-size:11px;color:var(--t2);background:var(--bg2);padding:2px 8px;border-radius:10px;font-weight:500}
.inp-cost .cost b{color:var(--p);font-weight:600}
/* L2 上下文进度（白） */
.ctx-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--bg2)}
/* L3 输入区 凹陷字段（浅灰，明显区别于上下） */
.inp-main{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:var(--bg);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);cursor:text}
.inp-row{display:flex;align-items:flex-end;gap:8px}
.inp-wrap{flex:1;min-width:0;display:flex}
.inp-main textarea{flex:1;width:100%;border:none;background:transparent;font-size:14px;font-family:inherit;color:var(--t);resize:none;min-height:26px;outline:none;line-height:1.6;padding:4px 10px}
.inp-main textarea::placeholder{color:var(--t3)}
/* 右侧操作图标（两列网格） */
.inp-side{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex-shrink:0}
.inp-side .ib{width:34px;height:34px;border-radius:8px;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s}
.inp-side .ib svg{width:16px;height:16px;display:block}
.inp-side .ib:hover{border-color:var(--p);color:var(--p);background:var(--pl)}
.inp-side .ib:active{transform:scale(.94)}
.inp-side .ib.send{background:linear-gradient(135deg,var(--p),#a855f7);border-color:transparent;color:#fff}
.inp-side .ib.send:hover{background:linear-gradient(135deg,var(--ph),#9333ea)}
/* 语音输入麦克风按钮 */
.inp-side .ib.mic.on{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:transparent;color:#fff;animation:micPulse 1.1s ease-in-out infinite}
.inp-side .ib.mic.disabled{opacity:.4;cursor:not-allowed}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
/* Enter提示行（白） */
.inp-hint{display:none}
.inp-hint .k{padding:1px 6px;border:1px solid var(--bd);border-radius:3px;background:var(--bg3);font-size:9px}
/* L4 功能行 底部带（浅紫） */
.inp-b{display:flex;align-items:center;gap:5px;padding:9px 14px;background:var(--bg3);border-top:1px solid var(--bd);flex-wrap:wrap}
.inp-b .ch{padding:4px 9px;border-radius:6px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-size:10px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:3px}
.inp-b .ch:hover{border-color:var(--pt);color:var(--p)}
.inp-b .ch.act{background:var(--pl);border-color:var(--p);color:var(--p)}
.inp-b .sp{flex:1}
.inp-b .cnt{font-size:10px;color:var(--t3)}
.inp-b .snd{width:30px;height:30px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;margin-left:4px}
.inp-b .snd:hover{background:linear-gradient(135deg,var(--ph),#9333ea)}
.inp-b .snd:disabled{opacity:.4;cursor:not-allowed}
.inp-box .inp-b .upd{margin-right:6px;display:flex;align-items:center;gap:6px;font-size:10px;color:var(--t2)}

/* Upload zone */
.upload-zone{border:2px dashed var(--bd);border-radius:8px;padding:6px 10px;margin-bottom:6px;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--t3);cursor:pointer}
.upload-zone:hover{border-color:var(--pt);background:var(--bg3)}

/* 底部功能行 细线图标（单色，不搭调） */
.inp-b .ch svg{width:13px;height:13px;display:inline-block;flex-shrink:0;color:var(--t2);transition:color .16s}
.inp-b .ch:hover svg,.inp-b .ch.act svg{color:var(--p)}

/* 全屏编辑弹层 */
.fe{display:none;position:fixed;inset:0;background:rgba(15,15,26,.6);z-index:300;backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px}
.fe.s{display:flex}
.fe-box{width:100%;max-width:780px;height:82vh;background:var(--bg2);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.fe-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--bd);font-size:14px;font-weight:600;color:var(--t)}
.fe-x{width:30px;height:30px;border:none;background:transparent;color:var(--t2);cursor:pointer;font-size:15px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.fe-x:hover{background:var(--bg3)}
.fe-ta{flex:1;border:none;outline:none;resize:none;padding:18px 20px;font-size:15px;line-height:1.8;font-family:inherit;color:var(--t);background:var(--bg2)}
.fe-ta::placeholder{color:var(--t3)}
.fe-b{padding:10px 16px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end}
.fe-b button{padding:9px 20px;border-radius:8px;border:none;background:var(--p);color:#fff;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.fe-b button:hover{background:var(--ph)}

/* ====== 通用弹窗 popup ====== */
.pop{position:fixed;inset:0;background:rgba(15,15,26,.5);z-index:320;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .18s;backdrop-filter:blur(4px)}
.pop.s{opacity:1}
.pop-box{width:100%;max-width:480px;max-height:82vh;background:var(--bg2);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);transform:translateY(8px);transition:transform .18s}
.pop.s .pop-box{transform:none}
.pop-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--bd);font-size:14px;font-weight:700;color:var(--t)}
.pop-x{width:30px;height:30px;border:none;background:transparent;color:var(--t2);cursor:pointer;font-size:14px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.pop-x:hover{background:var(--bg3);color:var(--t)}
.pop-body{padding:16px 18px;overflow-y:auto}
.pop-empty{text-align:center;color:var(--t3);font-size:12.5px;line-height:1.9;padding:26px 10px}
.pop-list{display:flex;flex-direction:column;gap:8px}
.pop-row{padding:11px 13px;border:1px solid var(--bd);border-radius:11px;background:var(--bg);cursor:pointer;transition:all .15s}
.pop-row:hover{border-color:var(--p);background:var(--pl);transform:translateX(2px)}
.pop-row-t{font-size:13px;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-row-s{font-size:10.5px;color:var(--t3);margin-top:3px}
.pop-foot{display:flex;justify-content:flex-end;margin-top:14px;gap:8px}
.pop-btn{padding:9px 20px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.pop-btn:hover{background:linear-gradient(135deg,var(--ph),#9333ea)}
.pop-btn-o{padding:8px 16px;border-radius:9px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit}
.pop-btn-o:hover{border-color:#ef4444;color:#ef4444}
/* 玩法说明 */
.pop-guide .pg{padding:10px 0;border-bottom:1px dashed var(--bd)}
.pop-guide .pg:last-child{border-bottom:none}
.pop-guide .pg b{font-size:13px;color:var(--t);display:block;margin-bottom:5px}
.pop-guide .pg p{font-size:12px;color:var(--t2);line-height:1.75}
/* 角色网格 */
.pop-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pop-role{display:flex;align-items:center;gap:6px;padding:9px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--t2);font-size:11.5px;cursor:pointer;font-family:inherit;transition:all .15s;text-align:left}
.pop-role:hover{border-color:var(--p);background:var(--pl);color:var(--p)}
.pop-role .ri{width:14px;height:14px;flex-shrink:0;display:inline-flex;color:var(--t3)}
.pop-role .ri svg{width:14px;height:14px;display:block}
.pop-role:hover .ri{color:var(--p)}
/* 参数表单 */
.pop-form label{display:block;font-size:12px;font-weight:600;color:var(--t);margin:14px 0 6px}
.pop-form label:first-child{margin-top:0}
.pop-form label b{color:var(--p)}
.pop-form input[type=range]{width:100%;accent-color:var(--p);cursor:pointer}
.pop-form .pop-hint{font-size:10.5px;color:var(--t3);margin-top:4px}
.pop-form .pop-ta{width:100%;min-height:72px;border:1px solid var(--bd);border-radius:9px;background:var(--bg);color:var(--t);font-size:12.5px;font-family:inherit;padding:9px 11px;resize:vertical;outline:none;line-height:1.6}
.pop-form .pop-ta:focus{border-color:var(--p)}
@media(max-width:520px){.pop-roles{grid-template-columns:repeat(2,1fr)}}

/* Video/Image tabs */
.mode-tabs{display:flex;gap:2px;margin-bottom:6px;flex-shrink:0}
.mode-tabs button{padding:3px 10px;border-radius:5px;border:1px solid var(--bd);background:transparent;color:var(--t2);font-size:10px;cursor:pointer;font-family:inherit}
.mode-tabs button.act{background:var(--pl);border-color:var(--p);color:var(--p)}

/* ====== Modal ====== */
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.25);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mo.s{display:flex}
.mo-in{background:var(--bg2);border-radius:14px;width:90%;max-width:380px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,0.1)}
.mo-in h2{font-size:15px;font-weight:600;margin-bottom:14px}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:11px;font-weight:500;color:var(--t2);margin-bottom:3px}
.fg input{width:100%;padding:8px 10px;border:1px solid var(--bd);border-radius:7px;font-size:12px;font-family:inherit;background:var(--bg);color:var(--t);outline:none}
.fg input:focus{border-color:var(--p)}
.br{display:flex;gap:6px;margin-top:14px}
.br button{flex:1;padding:8px;border-radius:7px;border:none;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit}
.bp{background:var(--p);color:#fff}
.bp:hover{background:var(--ph)}
.bg{background:var(--bg3);color:var(--t2);border:1px solid var(--bd)}
.bg:hover{background:#ede8f8}
.ms{display:flex;gap:6px;margin-bottom:14px}
.ms button{flex:1;padding:7px;border-radius:7px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit}
.tt{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1a1a2e;color:#fff;padding:8px 18px;border-radius:8px;font-size:12px;z-index:200;opacity:0;transition:opacity .3s}
[data-theme=dark] .tt{background:#e8e6f0;color:#1a1a2e}
.tt.s{opacity:1}
.vp{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.vp button{padding:3px 8px;border-radius:5px;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);font-size:10px;cursor:pointer;font-family:inherit}
.vp button.act{background:var(--pl);border-color:var(--p);color:var(--p)}

/* ====== Agent Tree (sidebar) ====== */
.ag-item{padding:8px 8px;border-radius:6px;cursor:pointer;margin-bottom:1px}
.ag-item:hover{background:var(--bg3)}
.ag-item.act{background:var(--pl)}
.ag-item .head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--t)}
.ag-item .i{width:24px;height:24px;border-radius:5px;background:linear-gradient(135deg,var(--p),#a855f7);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.ag-item .d{font-size:9px;color:var(--t3);margin:2px 0 0 30px;line-height:1.4;white-space:normal}
.ag-item .tag{display:inline-block;font-size:8px;background:var(--pl);color:var(--p);padding:1px 4px;border-radius:6px;margin-left:auto}
.ag-item .arr{margin-left:auto;font-size:10px;color:var(--t3);transition:transform .2s}
.ag-item.open .arr{transform:rotate(90deg)}
.ag-sub{padding-left:14px;display:none}
.ag-item.open .ag-sub{display:block}
.ag-sub a{display:flex;align-items:center;gap:6px;padding:5px 8px;font-size:10px;color:var(--t2);text-decoration:none;border-radius:4px}
.ag-sub a:hover{background:var(--bg3);color:var(--t)}
.ag-sub a.act{background:var(--pl);color:var(--p);font-weight:600}
.ag-sub a .new{font-size:8px;background:#fef3c7;color:#d97706;padding:1px 4px;border-radius:6px;margin-left:auto}

/* ====== Homepage ====== */
.home{flex:1;overflow-y:auto;padding:24px 32px;background:var(--bg)}
.home-h{font-size:20px;font-weight:600;margin-bottom:6px}
.home-sub{font-size:12px;color:var(--t2);margin-bottom:20px}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.home-card{border:1px solid var(--bd);border-radius:10px;padding:14px;background:var(--bg2);cursor:pointer;transition:all .15s}
.home-card:hover{border-color:var(--pt);box-shadow:var(--bsm);transform:translateY(-1px)}
.home-card .ic{font-size:22px;margin-bottom:6px}
.home-card .nm{font-size:13px;font-weight:600;margin-bottom:3px}
.home-card .ds{font-size:10px;color:var(--t2);line-height:1.4}
.home-section{font-size:13px;font-weight:600;color:var(--t);margin:20px 0 10px;display:flex;align-items:center;gap:6px}
.home-section::after{content:'';flex:1;height:1px;background:var(--bd)}
.home-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:1100px){.home-grid{grid-template-columns:repeat(2,1fr)}.home-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.home-grid{grid-template-columns:1fr}.home-row{grid-template-columns:1fr}}
/* ====== 上下文进度条 ====== */
.ctx-bar{display:flex;align-items:center;gap:8px;padding:4px 0 6px}
.ctx-bar .ctx-track{flex:1;height:4px;border-radius:3px;background:var(--bd);overflow:hidden}
.ctx-bar .ctx-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#22c55e,#4ade80);transition:width.5s ease;width:0%}
.ctx-bar .ctx-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.ctx-bar .ctx-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.ctx-bar .ctx-lbl{font-size:10px;color:var(--t3);white-space:nowrap;min-width:85px;text-align:right}
.ctx-bar .ctx-lbl.warn{color:#f59e0b}
.ctx-bar .ctx-lbl.danger{color:#ef4444}

/* ====== 移动端抽屉布局 (<=768px) ====== */
/* 遮罩层默认隐藏；汉堡按钮桌面端隐藏 */
.sbd{display:none}
.top .menu{display:none}
@media(max-width:768px){
  /* 侧栏脱离文档流，变为可滑出抽屉 */
  .sb{position:fixed;top:0;left:0;height:100vh;width:84%;max-width:300px;min-width:0;z-index:100;transform:translateX(-100%);transition:transform .28s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .sb.o{transform:translateX(0)}
  /* 抽屉背景遮罩 */
  .sbd{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;z-index:90;transition:opacity .28s ease,visibility .28s ease}
  .sbd.s{opacity:1;visibility:visible}
  /* 主区域占满全屏（侧栏已脱离文档流） */
  .main{width:100vw}
  /* 顶部显示汉堡菜单按钮 */
  .top .menu{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:3px;border:1px solid var(--bd);border-radius:7px;background:var(--bg3);color:var(--t2);font-size:18px;cursor:pointer;flex-shrink:0}
  .top .menu:hover{background:var(--bg3)}
  /* 顶部所有按钮高度统一 */
  .top .ms{height:24px;display:flex;align-items:center;padding:0 8px;max-width:28vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-family:inherit;cursor:pointer;line-height:1}
  .top .promo-btn{height:24px;display:flex;align-items:center;padding:0 7px;font-size:9px;font-family:inherit;cursor:pointer;line-height:1}
  .top .ic{width:24px;height:24px;font-size:11px;cursor:pointer}
  .top .usr{width:24px;height:24px;font-size:9px;cursor:pointer}
  /* 移动端顶栏间距收紧 */
  .top{gap:2px;padding:4px 8px;min-height:38px}
  .top-center{height:24px}
  .promo-ticker{max-width:100px;height:24px;display:flex;align-items:center;line-height:1}
  .promo-ticker-inner a{font-size:8px;margin-right:16px}
  /* 侧栏内关闭按钮始终可见 */
  .sb-h .cls{display:flex}
  /* 移动端用汉堡菜单展开侧栏，浮动按钮隐藏 */
  .sb-exp{display:none!important}
}

/* ====== 模型分组标题 + 网关锁标 + 连接状态 ====== */
.grp-h{font-size:10px;font-weight:700;padding:9px 10px 6px;letter-spacing:.2px;color:var(--t2);border-top:1px solid var(--bd);background:var(--pl);display:flex;align-items:center;flex-wrap:wrap;gap:2px;line-height:1.5}
.mc.locked{opacity:.75;position:relative}
.mc.locked .l{filter:grayscale(.4)}
.mc.locked:hover{background:var(--bg3)}
.mc.locked .r{position:relative}
.mc.locked .n::after{content:''}
.gw-st{font-size:11px;padding:8px 10px;border-radius:8px;margin:2px 0 8px;line-height:1.5}
.gw-st.off{background:#fff4e5;border:1px solid #ffd8a8;color:#b45309}
.gw-st.on{background:#ecfdf3;border:1px solid #a7f3d0;color:#047857}

/* ====== 图片生成：左侧上传区 + 参数 ====== */
/* 左右布局 */
.img-inp-flex{
  display:flex;align-items:center;gap:12px;margin-bottom:6px
}
@media(max-width:768px){.img-inp-flex{flex-direction:column}}

/* 左侧上传区 */
.img-up-zone{
  width:100px;min-height:84px;
  border:1px dashed var(--p);border-radius:14px;
  background:var(--pl);cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;flex-shrink:0;text-align:center;padding:8px 4px
}
.img-up-zone:hover,.img-up-zone.drag-over{border-color:var(--p);background:var(--pt)}
.img-up-icon{font-size:22px;line-height:1}
.img-up-label{font-size:11px;color:var(--t2);font-weight:500}
.img-up-desc{font-size:9px;color:var(--t3);line-height:1.3}

/* 扫码上传(在虚线框下方) */
.img-qr-btn{
  display:block;width:100%;margin-top:6px;
  padding:5px 0;font-size:11px;text-align:center;
  border-radius:8px;border:1px solid var(--bd);background:var(--bg);
  color:var(--p);cursor:pointer;font-family:inherit;transition:all .15s
}
.img-qr-btn:hover{background:var(--pt);border-color:var(--p)}

/* 缩略图(横向排列在输入框上方) */
.img-up-previews{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.img-up-preview-wrap{position:relative;width:44px;height:44px}
.img-up-preview{width:44px;height:44px;border-radius:7px;object-fit:cover;border:1px solid var(--bd);display:block}
.img-up-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.9);color:#fff;border:none;font-size:11px;line-height:20px;text-align:center;cursor:pointer;display:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.img-up-preview-wrap:hover .img-up-del{display:block}

/* 右侧输入区 */
.img-inp-right{flex:1;min-width:0}

/* 参数按钮 */
.img-toggle{
  padding:5px 14px;border-radius:8px;border:1px solid var(--bd);
  background:transparent;color:var(--t2);font-size:12px;cursor:pointer;
  font-family:inherit;transition:all .15s;white-space:nowrap
}
.img-toggle:hover,.img-toggle.open{border-color:var(--p);color:var(--p)}

/* 扫码弹窗 */
.img-qr-pop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;
  display:flex;align-items:center;justify-content:center
}
.img-qr-card{
  background:var(--bg);border-radius:16px;padding:28px 32px;
  max-width:340px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.2)
}
.img-qr-card h3{font-size:16px;margin:0 0 12px;color:var(--t)}
.img-qr-img{width:180px;height:180px;border-radius:12px;display:block;margin:0 auto}
.img-qr-box{
  width:180px;height:180px;margin:0 auto 16px;
  border:1px solid var(--bd);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--t3);line-height:1.6;padding:12px
}
.img-qr-close{
  padding:6px 20px;border-radius:8px;border:1px solid var(--bd);
  background:transparent;color:var(--t2);font-size:13px;cursor:pointer;font-family:inherit
}
.img-qr-close:hover{background:var(--bg3)}

/* 下拉菜单项 */
.img-menu-i{
  padding:8px 14px;border-radius:6px;font-size:12px;color:var(--t);
  cursor:pointer;transition:background .1s;white-space:nowrap
}
.img-menu-i:hover{background:var(--bg3)}

@media(max-width:768px){
  .img-up-zone{width:80px;min-height:80px}
  .img-up-label{font-size:10px}
  .img-up-desc{font-size:8px}
  .img-toggle{font-size:11px;padding:4px 10px}
}

/* ====== 视频/音频输入窗（复用 img-toggle 下拉参数体系） ====== */

/* 视频上传区行 */
.vid-inp-flex{
  display:flex;align-items:center;gap:12px;margin-bottom:6px
}
.vid-inp-right{flex:1;min-width:0}
@media(max-width:768px){.vid-inp-flex{flex-direction:column}}

/* 视频上传按钮(紧凑上行——点击选视频) */
.vid-up-btn{
  padding:7px 16px;border-radius:8px;border:1px solid var(--bd);
  background:var(--bg);color:var(--t2);font-size:12px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:all .15s;
  display:flex;align-items:center;gap:6px;flex-shrink:0
}
.vid-up-btn:hover{border-color:var(--p);color:var(--p);background:var(--pt)}

/* 视频模式切换(Mode toggle) */
.gen-mode-btn{
  padding:4px 12px;border-radius:8px;border:1px solid var(--bd);
  background:transparent;color:var(--t2);font-size:12px;cursor:pointer;
  font-family:inherit;transition:all .15s;white-space:nowrap
}
.gen-mode-btn.act,.gen-mode-btn:hover{border-color:var(--p);color:var(--p)}

/* 上传预览缩略图行(复用 img-up-previews/img-up-preview-wrap/img-up-preview/img-up-del) */
.vid-up-previews{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.vid-up-preview-wrap{position:relative;width:44px;height:44px}
.vid-up-preview{width:44px;height:44px;border-radius:7px;object-fit:cover;border:1px solid var(--bd);display:block}
.vid-up-del{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.9);color:#fff;border:none;font-size:11px;line-height:20px;text-align:center;cursor:pointer;display:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.vid-up-preview-wrap:hover .vid-up-del{display:block}

/* 音频上传参考音色方形区(虚线框+加号) */
.aud-up-zone{
  width:100px;height:100px;min-height:100px;
  border:1px dashed var(--p);border-radius:14px;
  background:var(--pl);cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;flex-shrink:0;text-align:center;padding:4px
}
.aud-up-zone:hover,.aud-up-zone.drag-over{border-style:solid;background:var(--pt)}
.aud-up-plus{font-size:24px;color:var(--p);line-height:1;font-weight:300}
.aud-up-label{font-size:10px;color:var(--t2);font-weight:500;line-height:1.2}
.aud-up-hint{font-size:8px;color:var(--t3);line-height:1.2}
.aud-ref-count{font-size:10px;color:var(--t3)}

/* 音频参考预览行 */
.aud-ref-previews{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.aud-ref-preview{font-size:11px;padding:4px 10px;border-radius:6px;background:var(--bg3);color:var(--t2);display:flex;align-items:center;gap:4px}
.aud-ref-del{width:16px;height:16px;border-radius:50%;background:rgba(239,68,68,.2);color:var(--t2);border:none;font-size:10px;line-height:16px;text-align:center;cursor:pointer}
.aud-ref-del:hover{background:rgba(239,68,68,.5);color:#fff}

@media(max-width:768px){
  .vid-inp-flex{flex-direction:column}
  .vid-up-btn{font-size:11px;padding:5px 12px}
  .aud-ref-btn{font-size:11px;padding:5px 12px}
}

/* audio 页复用 img-up-zone + vid-inp-flex 排版（与 video/image 统一） */

/* ====== 统一顶栏（全局版块导航，chat/image/video/audio/agents 共用） ====== */
.top-nav{position:fixed;top:0;left:0;right:0;height:46px;z-index:60;display:flex;align-items:center;gap:4px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--bd);overflow:visible}
.top-nav::-webkit-scrollbar{height:0}
.tnav-menu{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;color:var(--t);font-size:18px;cursor:pointer;border-radius:8px;flex-shrink:0}
.tnav-secs{display:flex;align-items:center;gap:2px;overflow-x:auto;overflow-y:hidden;flex-shrink:0;scrollbar-width:none}
.tnav-secs::-webkit-scrollbar{display:none;height:0}
.tnav-btn{white-space:nowrap;border:none;background:transparent;color:var(--t2);font-size:13px;font-family:inherit;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s;font-weight:500;flex-shrink:0}
.tnav-btn:hover{background:var(--bg3);color:var(--t)}
.tnav-btn.act{background:linear-gradient(135deg,var(--p),#a855f7);color:#fff}
.tnav-ticker{flex:1;min-width:0;max-width:360px;display:flex;align-items:center;overflow:hidden;height:28px;margin:0 4px}
.tnav-ticker .promo-ticker{width:100%;max-width:360px;height:28px;display:flex;align-items:center}
/* 宽屏（>=1240px）：广告滚动条绝对居中于顶栏正中，不受左右两簇宽度影响 */
@media(min-width:1240px){
  .tnav-ticker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:360px;max-width:360px;flex:0 0 auto;margin:0;z-index:1}
}
.tnav-act{display:flex;align-items:center;gap:8px;padding-left:4px;flex-shrink:0;margin-left:auto}
.tnav-cta{white-space:nowrap;border:none;font-size:12px;font-weight:600;font-family:inherit;padding:7px 11px;border-radius:8px;cursor:pointer;color:#fff;line-height:1}
.tnav-cta.gw{background:linear-gradient(135deg,#ff7a45,#ff2e63)}
.tnav-cta.gw:hover{background:linear-gradient(135deg,#e86a38,#e62856)}
.tnav-cta.client{background:linear-gradient(135deg,#10b981,#06b6d4)}
.tnav-cta.client:hover{background:linear-gradient(135deg,#0ea271,#059bb8)}
.tnav-tools{display:flex;align-items:center;gap:1px;padding-left:4px;flex-shrink:0}
.tnav-ic{width:30px;height:30px;border-radius:6px;border:none;background:transparent;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.tnav-ic:hover{background:var(--bg3);color:var(--p)}
/* 移动端工具图标收进 ⋯ 菜单 */
.tnav-more{display:none;position:relative;width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:var(--bg2);color:var(--p);cursor:pointer;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.tnav-more>summary{list-style:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer}
.tnav-more>summary::-webkit-details-marker{display:none}
.tnav-more-pop{position:absolute;top:38px;right:0;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--bsm);padding:4px;display:flex;flex-direction:column;min-width:148px;z-index:70}
.tnav-more-pop button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:none;background:transparent;color:var(--t);font-size:13px;font-family:inherit;cursor:pointer;border-radius:7px;text-align:left}
.tnav-more-pop button:hover{background:var(--bg3);color:var(--p)}
/* 顶栏分区折叠按钮（手机端专用，与左栏汉堡 ☰ toggleSb 互不冲突） */
.tnav-secmenu{display:none;position:relative;flex-shrink:0}
.tnav-secmenu>summary{list-style:none;display:flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:none;border-radius:8px;background:linear-gradient(135deg,var(--p),#a855f7);color:#fff;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:128px;overflow:hidden}
.tnav-secmenu>summary::-webkit-details-marker{display:none}
.tnav-secmenu>summary::marker{content:''}
.tnav-secmenu .tsm-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnav-secmenu .tsm-ar{font-size:9px;opacity:.92;flex-shrink:0;transition:transform .18s}
.tnav-secmenu[open] .tsm-ar{transform:rotate(180deg)}
.tnav-secmenu-pop{position:absolute;top:40px;left:0;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;box-shadow:var(--bsm);padding:4px;display:flex;flex-direction:column;min-width:152px;z-index:80}
.tnav-secmenu-pop button{display:flex;align-items:center;gap:8px;width:100%;padding:10px;border:none;background:transparent;color:var(--t);font-size:13px;font-family:inherit;cursor:pointer;border-radius:7px;text-align:left;white-space:nowrap}
.tnav-secmenu-pop button:hover{background:var(--bg3);color:var(--p)}
.tnav-secmenu-pop button.act{background:var(--pl);color:var(--p);font-weight:700}
.tnav-user{width:32px;height:32px;border-radius:50%;border:1px solid var(--bd);background:var(--bg2);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:2px;position:relative;transition:.15s;padding:0}
.tnav-user:hover{background:var(--bg3);color:var(--p)}
.tnav-user svg{width:16px;height:16px}
.tnav-user.logged{border-color:#10b981;color:#10b981;background:rgba(16,185,129,.14);box-shadow:0 0 0 2px rgba(16,185,129,.18)}
.tnav-user.logged::after{content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#10b981;border:2px solid var(--bg2)}
/* 固定顶栏让位（仅带顶栏的页面） */
body[data-nav=top] .app{padding-top:46px}
/* ====== 移动端顶栏响应式 (<=768px) ====== */
@media(max-width:768px){
  .top-nav{height:48px;padding:0 8px;gap:3px}
  .top-nav .tnav-menu{display:flex}
  /* 横排分区在窄屏会被裁掉（只剩"AI聊天"），改用独立的分区折叠按钮 */
  .tnav-secs{display:none}
  .tnav-secmenu{display:block}
  .tnav-btn{padding:6px 9px;font-size:12px}
  .tnav-ticker{display:none}
  .tnav-cta{font-size:11px;padding:6px 8px}
  .tnav-tools{display:none}
  .tnav-more{display:flex}
  body[data-nav=top] .app{padding-top:48px}
  .tnav-secmenu>summary{max-width:104px;padding:0 8px;font-size:12px}
  /* 移动端汉堡触发抽屉（原 .top .menu 逻辑迁移到 .tnav-menu） */
  .top .menu{display:none!important}
  /* 抽屉侧栏 + 遮罩从顶栏下方开始，保证顶栏分区菜单永远可见可点
     （侧栏 z-index:100 / 遮罩 90 均高于顶栏 60，若从 top:0 起会整条盖住顶栏） */
  body[data-nav=top] .sb{top:48px;height:calc(100vh - 48px);height:calc(100dvh - 48px)}
  body[data-nav=top] .sbd{top:48px}
}
/* 超窄屏（<=380px）：收紧各元素，保证分区折叠按钮 + 🔥/💻 引流按钮都不被挤掉 */
@media(max-width:380px){
  .top-nav{padding:0 6px;gap:2px}
  .tnav-menu{width:30px;height:30px;font-size:16px}
  .tnav-secmenu>summary{max-width:88px;padding:0 7px;font-size:11px;height:32px;gap:3px}
  .tnav-act{gap:4px;padding-left:2px}
  .tnav-cta{font-size:10px;padding:6px 6px;border-radius:7px}
  .tnav-user{width:28px;height:28px;margin-left:1px}
  .tnav-user svg{width:14px;height:14px}
  .tnav-more{width:28px;height:28px;font-size:14px}
}