/* 鹊桥 API 游乐场（/lab/）。字体和品牌色沿用 /site-assets/qq.css，这里另外定义深色 / 浅色两套界面色 */
:root, html[data-theme=dark] {
  color-scheme: dark;
  --l-bg: #05060f;
  --l-side: #080a18;
  --l-card: rgba(255, 255, 255, .035);
  --l-card-2: rgba(255, 255, 255, .065);
  --l-hover: rgba(255, 255, 255, .06);
  --l-line: rgba(255, 255, 255, .08);
  --l-line-2: rgba(255, 255, 255, .15);
  --l-text: #f4f5fb;
  --l-text-2: #a9afc7;
  --l-text-3: #7c83a1;
  --l-accent: #8c95ff;
  --l-accent-2: #c29bff;
  --l-gold: #f3c97c;
  --l-user: rgba(140, 149, 255, .14);
  --l-code: #0d1117;
  --l-code-h: #161b26;
  --l-ok: #4fd18b;
  --l-warn: #f3c97c;
  --l-danger: #ff7a85;
  --l-input: rgba(255, 255, 255, .045);
  --l-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  --l-grad: linear-gradient(100deg, #8c95ff 0%, #c29bff 55%, #f3c97c 100%);
  --l-read: "QQ Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}
html[data-theme=light] {
  color-scheme: light;
  --l-bg: #f7f8fc;
  --l-side: #eef0f8;
  --l-card: #ffffff;
  --l-card-2: #f2f3f9;
  --l-hover: rgba(20, 24, 52, .055);
  --l-line: rgba(20, 24, 52, .09);
  --l-line-2: rgba(20, 24, 52, .17);
  --l-text: #141728;
  --l-text-2: #484e6c;
  --l-text-3: #737995;
  --l-accent: #5359e0;
  --l-accent-2: #8250e8;
  --l-gold: #a8670f;
  --l-user: rgba(83, 89, 224, .1);
  --l-code: #f6f8fa;
  --l-code-h: #eceff4;
  --l-ok: #16864a;
  --l-warn: #a8670f;
  --l-danger: #cf3446;
  --l-input: #ffffff;
  --l-shadow: 0 18px 50px rgba(20, 24, 52, .16);
  --l-grad: linear-gradient(100deg, #5359e0 0%, #8250e8 60%, #c47f1d 100%);
}

html, body { height: 100%; }
body { background: var(--l-bg); color: var(--l-text); overflow: hidden; min-height: 0; font-size: 15px; line-height: 1.6; letter-spacing: 0; }
body::after { display: none; }
::selection { background: rgba(140, 149, 255, .32); color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------- 骨架：左边对话列表，右边聊天 ---------- */
.lab { display: grid; grid-template-columns: 284px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.side { display: flex; flex-direction: column; min-height: 0; background: var(--l-side); border-right: 1px solid var(--l-line); padding: 14px 12px 12px; gap: 10px; }
.main { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }

.side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15.5px; }
.brand img { width: 26px; height: 26px; }
.brand b { font-weight: 700; padding: 1px 8px; border-radius: 99px; font-size: 12.5px; color: #fff; background: var(--l-grad); }
.side-close { display: none; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--l-text-2); transition: background .15s, color .15s; }
.icon-btn:hover { background: var(--l-hover); color: var(--l-text); }
.icon-btn:disabled { opacity: .45; }

.new-chat { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; font-weight: 600; font-size: 14.5px;
  color: var(--l-text); background: var(--l-card-2); border: 1px solid var(--l-line-2); transition: border-color .15s, background .15s; }
.new-chat:hover { border-color: var(--l-accent); }
.new-chat svg { width: 18px; height: 18px; }
.side-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 11px; background: var(--l-input); border: 1px solid var(--l-line); color: var(--l-text-3); }
.side-search:focus-within { border-color: var(--l-accent); }
.side-search svg { width: 17px; height: 17px; }
.side-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--l-text); font: inherit; font-size: 14px; }
.side-search input::-webkit-search-cancel-button { filter: grayscale(1); }

.conv-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 2px 6px; overscroll-behavior: contain; }
.conv-group { margin: 12px 8px 4px; font-size: 12px; color: var(--l-text-3); font-weight: 600; letter-spacing: .04em; }
.conv { position: relative; display: flex; align-items: center; border-radius: 10px; }
.conv > a { flex: 1; min-width: 0; display: block; padding: 8px 34px 8px 10px; border-radius: 10px; font-size: 14px; color: var(--l-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv:hover > a { background: var(--l-hover); color: var(--l-text); }
.conv.on > a { background: var(--l-card-2); color: var(--l-text); font-weight: 600; }
.conv .more { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; opacity: 0; }
.conv:hover .more, .conv.on .more, .conv .more[aria-expanded=true] { opacity: 1; }
@media (hover: none) { .conv .more { opacity: .75; } }
.conv .run-dot { position: absolute; right: 36px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--l-accent); animation: pulse 1.2s ease-in-out infinite; }
.conv-empty { padding: 18px 10px; color: var(--l-text-3); font-size: 13.5px; text-align: center; }
mark { background: rgba(243, 201, 124, .35); color: inherit; border-radius: 3px; }

.side-foot { border-top: 1px solid var(--l-line); padding-top: 10px; display: grid; gap: 8px; }
.side-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--l-text-3); }
.side-links { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--l-text-2); }
.side-links a:hover { color: var(--l-text); }
.theme-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--l-text-2); padding: 4px 8px; border-radius: 8px; }
.theme-btn:hover { background: var(--l-hover); color: var(--l-text); }
.theme-btn svg { width: 16px; height: 16px; display: none; }
.theme-btn .fill { fill: currentColor; stroke: none; }
html[data-theme-pref=auto] .theme-btn .i-auto, html[data-theme-pref=light] .theme-btn .i-light, html[data-theme-pref=dark] .theme-btn .i-dark { display: block; }

/* ---------- 顶栏 ---------- */
.top { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 16px; border-bottom: 1px solid var(--l-line); background: color-mix(in srgb, var(--l-bg) 88%, transparent); backdrop-filter: blur(12px); z-index: 5; }
.menu-btn { display: none; }
.top-gap { flex: 1; }
.model-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 10px 0 6px; border-radius: 12px; color: var(--l-text); font-weight: 600; font-size: 15px; transition: background .15s; }
.model-btn:hover:not(:disabled) { background: var(--l-hover); }
.model-btn .model-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "QQ Inter", var(--sans); }
.model-btn svg { width: 18px; height: 18px; color: var(--l-text-3); }
.line-tag { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: .02em; color: var(--l-text-2); background: var(--l-card-2); border: 1px solid var(--l-line-2); }
.line-tag.gpt { color: #3fcf8e; border-color: rgba(63, 207, 142, .35); background: rgba(63, 207, 142, .08); }
.line-tag.kiro { color: #e3a46b; border-color: rgba(227, 164, 107, .38); background: rgba(227, 164, 107, .08); }
.line-tag.max { color: var(--l-accent-2); border-color: color-mix(in srgb, var(--l-accent-2) 45%, transparent); background: color-mix(in srgb, var(--l-accent-2) 10%, transparent); }
html[data-theme=light] .line-tag.gpt { color: #13804f; }
html[data-theme=light] .line-tag.kiro { color: #a35a17; }
.balance { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 11px; border: 1px solid var(--l-line); font-size: 13px; color: var(--l-text-3); white-space: nowrap; }
.balance:hover { border-color: var(--l-line-2); color: var(--l-text-2); }
.balance b { font-family: "QQ Inter", var(--sans); font-variant-numeric: tabular-nums; font-size: 14.5px; color: var(--l-text); font-weight: 600; }
.balance.low b { color: var(--l-danger); }

/* ---------- 聊天区 ---------- */
.chat { overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; }
.chat-inner { max-width: 840px; margin: 0 auto; padding: 26px 22px 34px; display: grid; gap: 26px; }
.to-bottom { position: absolute; left: 50%; bottom: calc(var(--composer-h, 140px) + 12px); transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--l-card-2); border: 1px solid var(--l-line-2); color: var(--l-text-2); box-shadow: var(--l-shadow); z-index: 4; backdrop-filter: blur(10px); }
.to-bottom svg { width: 18px; height: 18px; }

.welcome { padding: 6vh 4px 0; display: grid; gap: 20px; }
.welcome h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.welcome h1 span { background: var(--l-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.welcome p { margin: 0; color: var(--l-text-2); max-width: 620px; }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.idea { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--l-line); background: var(--l-card); color: var(--l-text-2); font-size: 14px; line-height: 1.5; transition: border-color .15s, color .15s; }
.idea b { display: block; color: var(--l-text); font-weight: 600; margin-bottom: 2px; font-size: 14.5px; }
.idea:hover { border-color: var(--l-line-2); color: var(--l-text); }

.msg { display: grid; gap: 8px; min-width: 0; }
.msg.user { justify-items: end; }
.bubble { max-width: min(88%, 680px); padding: 10px 15px; border-radius: 18px 18px 6px 18px; background: var(--l-user); font: 400 15.5px/1.7 var(--l-read); white-space: pre-wrap; overflow-wrap: anywhere; }
.u-atts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 88%; }
.u-att { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--l-line); background: var(--l-card); font-size: 13px; color: var(--l-text-2); }
.u-att span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-att svg { width: 16px; height: 16px; }
.u-img { display: block; max-width: 220px; max-height: 220px; border-radius: 12px; border: 1px solid var(--l-line); object-fit: cover; cursor: zoom-in; }
.msg-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
@media (hover: none) { .msg-tools { opacity: .8; } }
.mini { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: var(--l-text-3); }
.mini:hover { background: var(--l-hover); color: var(--l-text); }
.mini svg { width: 15px; height: 15px; }

.ai-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--l-text-3); }
.ai-head .avatar { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--l-grad); color: #fff; }
.ai-head .avatar svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ai-head .mname { font-family: "QQ Inter", var(--sans); font-weight: 600; color: var(--l-text-2); }
.ai-body { display: grid; gap: 10px; min-width: 0; }

/* 思考过程、工具调用：可折叠的卡片 */
.fold { border: 1px solid var(--l-line); border-radius: 12px; background: var(--l-card); min-width: 0; }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; color: var(--l-text-2); border-radius: 12px; user-select: none; min-width: 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--l-text); }
.fold > summary .chev { margin-left: auto; width: 16px; height: 16px; color: var(--l-text-3); transition: transform .2s; }
.fold[open] > summary .chev { transform: rotate(180deg); }
.fold > summary .ttl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold > summary .ttl code { font-size: 12.5px; }
.fold > summary svg.ic { width: 17px; height: 17px; color: var(--l-accent); }
.fold-body { padding: 2px 12px 12px; display: grid; gap: 10px; min-width: 0; }
.think > summary svg.ic { color: var(--l-accent-2); }
.think .fold-body { color: var(--l-text-2); max-height: 420px; overflow-y: auto; }
.think .fold-body .md { font-size: 13.5px; line-height: 1.7; color: var(--l-text-2); }
.think .fold-body .md strong { color: var(--l-text-2); }
.badge { flex: none; font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--l-card-2); color: var(--l-text-3); font-weight: 600; }
.badge.ok { color: var(--l-ok); background: color-mix(in srgb, var(--l-ok) 12%, transparent); }
.badge.err { color: var(--l-danger); background: color-mix(in srgb, var(--l-danger) 12%, transparent); }
.badge.run { color: var(--l-accent); background: color-mix(in srgb, var(--l-accent) 12%, transparent); }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--l-accent) 30%, transparent); border-top-color: var(--l-accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }
.sec-l { font-size: 12px; font-weight: 600; color: var(--l-text-3); letter-spacing: .03em; margin-bottom: -4px; }
.out { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--l-code); border: 1px solid var(--l-line); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow-y: auto; color: var(--l-text); }
.out.err { color: var(--l-danger); }
.figs { display: grid; gap: 10px; }
.figs img { max-width: 100%; border-radius: 10px; background: #fff; border: 1px solid var(--l-line); cursor: zoom-in; }
.figs-inline { margin: 2px 0; }
.srcs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.srcs a { display: flex; gap: 8px; align-items: baseline; color: var(--l-text-2); min-width: 0; }
.srcs a:hover { color: var(--l-accent); }
.srcs a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srcs a small { flex: none; color: var(--l-text-3); font-size: 12px; }
.tool-note { font-size: 12.5px; color: var(--l-text-3); }
.cites { display: flex; flex-wrap: wrap; gap: 6px; }
.cite { display: inline-flex; align-items: center; gap: 4px; max-width: 240px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--l-line); font-size: 12px; color: var(--l-text-2); }
.cite span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cite:hover { border-color: var(--l-accent); color: var(--l-text); }

.err-card { border: 1px solid color-mix(in srgb, var(--l-danger) 40%, transparent); background: color-mix(in srgb, var(--l-danger) 7%, transparent); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--l-text); display: grid; gap: 8px; }
.err-card b { color: var(--l-danger); }
.err-card .row { display: flex; gap: 8px; flex-wrap: wrap; }
.note-card { font-size: 13px; color: var(--l-warn); }
.typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--l-text-3); animation: pulse 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.ai-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12.5px; color: var(--l-text-3); }
.cost { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 8px; }
.cost b { font-family: "QQ Inter", var(--sans); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--l-text-2); }
.cost-d { position: relative; }
.cost-d > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 8px; }
.cost-d > summary::-webkit-details-marker { display: none; }
.cost-d > summary:hover { background: var(--l-hover); color: var(--l-text-2); }
.cost-d > summary b { font-family: "QQ Inter", var(--sans); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--l-text-2); }
.cost-tbl { margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--l-line); background: var(--l-card); display: grid; gap: 6px; font-size: 12.5px; color: var(--l-text-2); }
.cost-tbl .r { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.cost-tbl .r b { color: var(--l-text); font-weight: 600; font-family: "QQ Inter", var(--sans); }
.cost-tbl p { margin: 2px 0 0; color: var(--l-text-3); font-size: 12px; }
.ai-foot .sp { flex: 1; }

/* ---------- Markdown 正文 ---------- */
.md { font: 400 15.5px/1.78 var(--l-read); overflow-wrap: anywhere; min-width: 0; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md table, .md .cb, .md .katex-display, .md hr { margin: .7em 0; }
.md h1, .md h2, .md h3, .md h4 { line-height: 1.35; margin: 1.15em 0 .5em; font-weight: 700; }
.md h1 { font-size: 1.45em; } .md h2 { font-size: 1.28em; } .md h3 { font-size: 1.12em; } .md h4 { font-size: 1em; }
.md ul, .md ol { padding-left: 1.5em; }
.md li { margin: .25em 0; }
.md li > p { margin: .3em 0; }
.md a { color: var(--l-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--l-accent) 35%, transparent); text-underline-offset: 3px; }
.md a:hover { text-decoration-color: currentColor; }
.md strong { font-weight: 700; color: var(--l-text); }
.md blockquote { padding: 2px 0 2px 14px; border-left: 3px solid var(--l-line-2); color: var(--l-text-2); }
.md hr { border: 0; border-top: 1px solid var(--l-line); }
.md table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14px; max-width: 100%; }
.md th, .md td { border: 1px solid var(--l-line-2); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--l-card-2); font-weight: 600; }
.md :not(pre) > code { font-size: .88em; padding: .12em .38em; border-radius: 6px; background: var(--l-card-2); border: 1px solid var(--l-line); color: var(--l-text); word-break: break-word; }
.md img { max-width: 100%; border-radius: 10px; }
/* 代码块（类名不用 .code：qq.css 里的 .code 是网站深色代码框的样式） */
.cb { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--l-line); background: var(--l-code); color: var(--l-text); min-width: 0; padding: 0; font: inherit; }
.cb-h { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 6px 0 12px; background: var(--l-code-h); font: 12px/1 var(--mono); color: var(--l-text-3); }
.cb-h .copy { font: 600 12px/1 var(--sans); color: var(--l-text-3); padding: 6px 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 4px; }
.cb-h .copy:hover { background: var(--l-hover); color: var(--l-text); }
.cb pre { margin: 0; padding: 12px 14px; overflow-x: auto; font: 13px/1.65 var(--mono); tab-size: 4; color: var(--l-text); }
.cb pre code.hljs { padding: 0; background: transparent; }
.cb pre code { font-family: var(--mono); }
.md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.md .katex { font-size: 1.06em; }
.cursor::after { content: ""; display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--l-accent); border-radius: 2px; animation: pulse .9s ease-in-out infinite; }

/* ---------- 输入框 ---------- */
.composer { padding: 0 18px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--l-bg) 22px); position: relative; z-index: 3; }
.composer > * { max-width: 840px; margin-left: auto; margin-right: auto; }
.atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 8px; }
.att { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 240px; height: 46px; padding: 0 30px 0 6px; border-radius: 12px; border: 1px solid var(--l-line-2); background: var(--l-card-2); font-size: 13px; }
.att.bad { border-color: color-mix(in srgb, var(--l-danger) 50%, transparent); }
.att img, .att .ficon { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; }
.att .ficon { display: grid; place-items: center; background: var(--l-card); color: var(--l-text-2); font: 700 10px/1 var(--mono); }
.att .meta { min-width: 0; display: grid; line-height: 1.3; }
.att .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .meta small { color: var(--l-text-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .meta small.warn { color: var(--l-danger); }
.att .x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--l-text-3); }
.att .x:hover { background: var(--l-hover); color: var(--l-text); }
.att .x svg { width: 14px; height: 14px; }
.box { border: 1px solid var(--l-line-2); border-radius: 20px; background: var(--l-input); padding: 10px 10px 8px 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); transition: border-color .15s; }
html[data-theme=dark] .box { background: color-mix(in srgb, var(--l-bg) 70%, #1a1d33); }
.box:focus-within { border-color: color-mix(in srgb, var(--l-accent) 70%, transparent); }
.box.drag { border-color: var(--l-accent); border-style: dashed; }
.box textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: none; color: var(--l-text); font: 400 15.5px/1.6 var(--l-read); max-height: 40vh; min-height: 26px; padding: 2px 0 6px; }
.box textarea::placeholder { color: var(--l-text-3); }
.box-bar { display: flex; align-items: center; gap: 6px; }
.box-bar #attachBtn { margin-left: -6px; }
.tools { display: flex; gap: 6px; min-width: 0; }
.tool-chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--l-line); color: var(--l-text-3); font-size: 13px; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.tool-chip svg { width: 16px; height: 16px; }
.tool-chip[aria-pressed=true] { color: var(--l-accent); border-color: color-mix(in srgb, var(--l-accent) 45%, transparent); background: color-mix(in srgb, var(--l-accent) 9%, transparent); }
.tool-chip:hover { color: var(--l-text); }
.effort { margin-left: auto; display: inline-flex; align-items: center; height: 32px; padding: 2px; border-radius: 99px; border: 1px solid var(--l-line); font-size: 12.5px; }
.effort-l { padding: 0 6px 0 8px; color: var(--l-text-3); }
.effort button { height: 26px; min-width: 28px; padding: 0 7px; border-radius: 99px; color: var(--l-text-3); font-size: 12.5px; }
.effort button[aria-checked=true] { background: var(--l-card-2); color: var(--l-text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--l-line-2); }
.send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--l-grad); transition: opacity .15s, transform .1s; }
.send:active:not(:disabled) { transform: scale(.94); }
.send:disabled { opacity: .35; }
.send svg { width: 19px; height: 19px; stroke-width: 2.2; }
.send .i-stop { display: none; fill: currentColor; stroke: none; }
.send.stop { background: var(--l-text); color: var(--l-bg); }
.send.stop .i-send { display: none; }
.send.stop .i-stop { display: block; }
.hint { margin: 6px auto 0; font-size: 12px; color: var(--l-text-3); text-align: center; min-height: 18px; }
.hint.warn { color: var(--l-danger); }

/* ---------- 选模型、对话框、菜单 ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(5, 6, 15, .45); display: grid; place-items: start center; padding: 70px 16px 16px; }
html[data-theme=light] .sheet { background: rgba(20, 24, 52, .22); }
.sheet-card { width: min(560px, 100%); max-height: calc(100dvh - 90px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--l-side); border: 1px solid var(--l-line-2); box-shadow: var(--l-shadow); }
html[data-theme=dark] .sheet-card { background: #0b0d1d; }
.sheet-card.small { width: min(420px, 100%); margin-top: 12vh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.sheet-head .icon-btn { margin-right: -6px; }
.ltabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--l-card-2); border: 1px solid var(--l-line); }
.ltabs button { flex: 1; height: 34px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--l-text-3); }
.ltabs button[aria-selected=true] { background: var(--l-bg); color: var(--l-text); box-shadow: 0 1px 0 var(--l-line-2), 0 0 0 1px var(--l-line); }
.sheet-note { margin: 0; font-size: 12.5px; color: var(--l-text-3); line-height: 1.55; }
.model-list { overflow-y: auto; display: grid; gap: 4px; margin: 0 -6px; padding: 0 6px; overscroll-behavior: contain; }
.model-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; text-align: left; border: 1px solid transparent; }
.model-opt:hover { background: var(--l-hover); }
.model-opt[aria-selected=true] { border-color: color-mix(in srgb, var(--l-accent) 50%, transparent); background: color-mix(in srgb, var(--l-accent) 8%, transparent); }
.model-opt .n { font-family: "QQ Inter", var(--sans); font-weight: 600; font-size: 14.5px; color: var(--l-text); display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.model-opt .tg { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 6px; background: var(--l-card-2); color: var(--l-text-3); line-height: 18px; }
.model-opt .tg.new { color: var(--l-gold); background: color-mix(in srgb, var(--l-gold) 12%, transparent); }
.model-opt .p { font-size: 12px; color: var(--l-text-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; align-self: center; grid-row: span 2; }
.model-opt .p b { color: var(--l-text-2); font-weight: 600; font-family: "QQ Inter", var(--sans); }
.model-opt .d { font-size: 12.5px; color: var(--l-text-3); line-height: 1.5; }
.sheet-foot { margin: 0; font-size: 12px; color: var(--l-text-3); }
.sheet-foot a { color: var(--l-accent); }
#dlgBody { font-size: 14.5px; color: var(--l-text-2); }
#dlgBody input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--l-line-2); background: var(--l-input); color: var(--l-text); font: inherit; outline: 0; }
#dlgBody input:focus { border-color: var(--l-accent); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 11px; font-weight: 600; font-size: 14px; color: #fff; background: var(--l-grad); }
.btn.ghost { color: var(--l-text-2); background: var(--l-card-2); border: 1px solid var(--l-line); }
.btn.danger { background: var(--l-danger); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.menu { position: fixed; z-index: 60; min-width: 150px; padding: 6px; border-radius: 12px; background: var(--l-side); border: 1px solid var(--l-line-2); box-shadow: var(--l-shadow); display: grid; }
html[data-theme=dark] .menu { background: #0e1022; }
.menu button { text-align: left; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--l-text); }
.menu button:hover { background: var(--l-hover); }
.menu button.danger { color: var(--l-danger); }
.gate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: var(--l-bg); }
.gate-card { max-width: 420px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.gate-card h1 { margin: 4px 0 0; font-size: 26px; font-weight: 800; }
.gate-card p { margin: 0; color: var(--l-text-2); line-height: 1.7; }
.gate-card .btn { height: 44px; padding: 0 28px; font-size: 15px; margin-top: 6px; }
.gate-sub { font-size: 13.5px; }
.gate-sub a { color: var(--l-accent); }
.toast { position: fixed; left: 50%; bottom: calc(var(--composer-h, 140px) + 16px); transform: translateX(-50%); z-index: 80; max-width: min(92vw, 520px); padding: 10px 16px; border-radius: 12px; background: var(--l-text); color: var(--l-bg); font-size: 14px; box-shadow: var(--l-shadow); }
.viewer { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .82); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; }
.noscript { padding: 40px; text-align: center; }
.scrim { display: none; }

/* ---------- 手机 ---------- */
@media (max-width: 900px) {
  .lab { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); transform: translateX(-102%); transition: transform .25s var(--ease); box-shadow: var(--l-shadow); padding-top: calc(14px + env(safe-area-inset-top)); }
  .lab.side-open .side { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(5, 6, 15, .5); }
  .side-close, .menu-btn { display: inline-grid; }
  .top { padding: 0 10px; height: 54px; padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
  .chat-inner { padding: 18px 14px 28px; gap: 22px; }
  .composer { padding: 0 10px calc(8px + env(safe-area-inset-bottom)); }
  .sheet { place-items: end center; padding: 0; }
  .sheet-card { width: 100%; max-height: 86dvh; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .sheet-card.small { margin: 0; border-radius: 20px 20px 0 0; }
}
@media (max-width: 560px) {
  .tool-chip { width: 32px; padding: 0; justify-content: center; }
  .tool-chip span { display: none; }
  .effort-l { display: none; }
  .effort button { min-width: 26px; padding: 0 6px; }
  .balance span { display: none; }
  .balance { padding: 6px 10px; }
  .ideas { grid-template-columns: minmax(0, 1fr); }
  .bubble { max-width: 92%; }
  .md, .bubble, .box textarea { font-size: 15px; }
  .hint { font-size: 11.5px; }
  .model-btn { font-size: 14px; padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }