/* app.js 新增元素的功能性样式（GPT 可以接手美化，保持 class 名称不变即可） */
.x-narrow{grid-template-columns:1fr!important;width:min(480px,100%)}
.x-who{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;color:#fff}
.x-who span{font-size:12px;opacity:.7}
.x-who button{align-self:flex-start;background:none;border:0;color:inherit;opacity:.7;text-decoration:underline;padding:0;margin-top:4px;cursor:pointer;font-size:12px}
.x-n{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:var(--soft);color:var(--olive);font-size:12px;text-align:center}
.x-alert{background:#fbeceb;border:1px solid #efc9c4;color:var(--danger);border-radius:12px;padding:10px 14px;margin:8px 0;font-size:13.5px}
.x-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.x-mode{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 10px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px}
.x-mode small{color:var(--mute)}
.x-mode.on{border-color:var(--olive);background:var(--soft);box-shadow:0 0 0 3px #e4efbf}
.x-when{margin-top:6px}
.x-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.x-chips button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 12px;cursor:pointer;font-size:13px}
.x-chips button:hover{background:var(--soft)}
.x-more{margin-top:14px}.x-more summary{cursor:pointer;color:var(--mute);font-size:13.5px}.x-more input{margin-top:8px}
.x-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.x-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed #cfd6c0;border-radius:14px;padding:20px 14px;text-align:center;cursor:pointer;background:#fafbf6;color:var(--ink)}
.x-drop small{color:var(--mute);font-weight:400}
.x-drop.over,.x-drop:hover{border-color:var(--olive);background:var(--soft)}
.x-drop.busy{flex-direction:row;justify-content:center;gap:10px;cursor:default}
.x-spin{width:16px;height:16px;border:2px solid #cfd6c0;border-top-color:var(--olive);border-radius:50%;animation:spin .8s linear infinite}
.x-lib{margin-top:8px;color:var(--mute);font-size:13px}.x-lib select{width:auto;max-width:100%;padding:6px 10px}
.x-mchip{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff}
.x-mchip img,.x-mchip .x-vi{width:56px;height:56px;border-radius:10px;object-fit:cover;background:#222;color:#fff;display:grid;place-items:center;font-size:12px;flex:none}
.x-mchip div{flex:1;min-width:0}.x-mchip b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.x-mchip small{color:var(--mute)}
.x-badge{display:inline-block;font-size:12.5px;padding:2px 10px;border-radius:99px;background:#eee;color:#666;margin-bottom:8px}
.x-badge.ok{background:#dff3d2;color:var(--ok)}.x-badge.warn{background:#fff1cf;color:var(--warn)}
.x-btns{display:flex;gap:6px;flex-wrap:wrap}
.x-steps{background:var(--soft);border-radius:12px;padding:12px 14px;margin:10px 0 16px;font-size:13.5px;line-height:1.8}
.x-trow{display:grid;grid-template-columns:1fr 1.2fr auto auto;gap:10px;align-items:center}
.x-res{grid-column:1/-1;font-size:13px;color:var(--mute)}.x-res.ok{color:var(--ok)}.x-res.warn{color:var(--warn)}.x-res.bad{color:var(--danger)}
.x-roles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.x-roles div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}.x-roles b{display:block}.x-roles small{color:var(--mute)}
@media(max-width:760px){.x-modes{grid-template-columns:1fr}.x-trow{grid-template-columns:1fr}.x-roles{grid-template-columns:1fr}}

/* 机器人资料 */
.x-prof{display:grid;grid-template-columns:1fr 340px;gap:28px}
.x-cnt{color:var(--mute);font-weight:400;margin-left:6px}
.x-avrow{display:flex;gap:16px;align-items:center}
.x-av{position:relative;width:76px;height:76px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:800;font-size:28px;overflow:hidden;flex:none}
.x-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.x-av.sm{width:56px;height:56px;font-size:20px}
.x-crow{display:grid;grid-template-columns:14px 150px 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
.x-pv{display:grid;gap:14px;margin-top:10px}
.x-pv1,.x-pv2{background:#fff;border-radius:18px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line)}
.x-pv1 small{color:var(--mute)}.x-pv1 p,.x-pv2 p{margin:6px 0 0;color:#444;font-size:13.5px;white-space:pre-wrap;word-break:break-word;text-align:center}
.x-pv2{background:#dfe6d6;border:0}
.x-start{margin-top:12px;background:#fff;border-radius:10px;padding:8px 40px;font-weight:600;color:#3a7bd5}
@media(max-width:1000px){.x-prof{grid-template-columns:1fr}.x-crow{grid-template-columns:14px 1fr}.x-crow input:nth-of-type(2),.x-crow button{grid-column:2}}

.x-guest-note{background:#f1f5e4;border:1px solid #d8e2b8;color:#4b5a2a;border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:14px}
body.x-ro .x-drop,body.x-ro [data-act],body.x-ro .x-modes{pointer-events:none}

.x-brow{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;margin-bottom:8px}.x-brow input{min-width:0}
.x-rm{border:1px solid var(--line);background:#fff;border-radius:10px;width:38px;cursor:pointer;font-size:18px;color:var(--mute)}
.x-pvbtns{display:flex;flex-direction:column;gap:4px;margin-top:4px}.x-pvbtns div{background:rgba(0,0,0,.07);border-radius:8px;text-align:center;padding:7px;font-size:13px;font-weight:600}
.modal.x-stats{max-width:760px;width:94vw}
.x-sg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.x-sc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}.x-sc small{display:block;color:var(--mute);font-size:12px}.x-sc b{font-size:26px;display:block;margin-top:4px}
.x-bt{width:100%;margin-bottom:6px}.x-bt td,.x-bt th{padding:8px 6px}
.x-bars{display:flex;align-items:flex-end;gap:3px;height:90px;border-bottom:1px solid var(--line);margin-top:6px}.x-bars i{flex:1;background:currentColor;opacity:.85;border-radius:3px 3px 0 0;min-height:3px}
.x-bl{display:flex;justify-content:space-between;color:var(--mute);font-size:11px;margin-top:4px}
.x-mn{margin-left:auto;font-size:22px;font-weight:700}
.x-pre{white-space:pre-wrap;background:#f6f6f3;border:1px solid var(--line);border-radius:12px;padding:14px;font-family:inherit;font-size:14px;margin-top:14px}
@media(max-width:760px){.x-sg{grid-template-columns:1fr 1fr}.x-brow{grid-template-columns:1fr}}

/* 图表和提示颜色：换色系只需改这几个变量（不必改 app.js） */
:root{--chart:var(--olive,#7f9a2c);--chart-grid:var(--line,#e6e8de);--chart-txt:var(--mute,#9aa08f);--chart-dot-bg:#fff;--note-bg:#f4f4f0;--note-line:#e3e3dc;--note-ink:#555;--ph:#9aa}
.c-grid{stroke:var(--chart-grid)}.c-txt{fill:var(--chart-txt)}.c-stop{stop-color:var(--chart)}.c-line{stroke:var(--chart)}.c-dot{fill:var(--chart-dot-bg);stroke:var(--chart)}
.x-alert.x-note{background:var(--note-bg);border-color:var(--note-line);color:var(--note-ink)}.x-ph{color:var(--ph)}
.two + .two{margin-top:20px}

/* 弹窗右上角关闭按钮；预览里的机器人头像 */
.modal{position:relative}
.modal .x-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;z-index:6;opacity:.8}
.modal .x-close:hover{opacity:1;background:color-mix(in srgb,currentColor 10%,transparent)}
.tg .hd i{position:relative;overflow:hidden}
.tg .hd i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}