/* 超级 Flux 模式（views/super.js）：没有侧栏和模块，只有一个大的 Flux、她挑出的三件事和一个直接跟她说话的输入框。
 * html.sf       处于超级模式：侧栏 / 手机底栏收起，顶栏最左变成「回到 Flux」（去了别的页面也保持）
 * html.sf-stage 正在看舞台（#sf-stage 盖住整个外壳，z-index 45：在外壳之上、对话面板 / 弹窗 / toast 之下）
 * html.sf-talk  舞台上正在对话：Flux 对话面板变成舞台上的一张玻璃卡，光球挪开让位
 * 动效不跟随系统「减少动态」（用户 Windows 关了动画效果，见 orb.css 文件头）；循环动效全部匀速。
 * 旧 Safari 15（iPad mini 4）：不用 color-mix / @property / @container，backdrop-filter、mask 都带 -webkit- 版。 */

/* ------------------------------------------------------------------ 超级模式下的外壳 */
/* 侧栏 / 手机底栏只在超级舞台上收起；超级模式下去了别的页面（如「我的图表」）侧栏照常显示，不留空位（用户 2026-11-12） */
html.sf.sf-stage .sidebar, html.sf.sf-stage #sb-tg, html.sf.sf-stage .tabbar, html.sf .sf-tg { display: none !important; }
html.sf.sf-stage:not(.m) { --sb: 0px; }
html.sf.sf-stage:not(.m) .topbar::before { border-radius: 14px 14px 14px var(--r-seam); }
html.sf-stage .shell, html.sf-stage #orb, html.sf-stage .scrim { visibility: hidden; }
/* 手机：超级模式下底栏收了（底栏中间那颗 Flux 平时是手机上的对话入口），在别的页面上把右下角那颗 Flux 放出来顶上 */
html.m.sf:not(.sf-stage) .orb { display: inline-block; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
/* 终端页底部是输入栏 + 「发送」：默认位置抬到输入栏上面，别盖住发送（2026-10-30 平板上点发送老点到 Flux）；拖过就按拖的位置 */
html.m.sf.dev-on:not(.sf-stage) .orb { bottom: calc(132px + env(safe-area-inset-bottom)); }
html.sf-stage, html.sf-stage body { background: #03050d; }                         /* 脚本还没跑完的那一帧也是舞台底色，不闪经典界面 */
html.sf-stage[data-theme="light"], html.sf-stage[data-theme="light"] body { background: #e4eaf8; }

/* 顶栏：进入超级模式（非超级模式时在右侧那排按钮里）/ 回到 Flux（超级模式下在最左，替掉侧栏开关） */
.sf-tg { --sf-a: #06b6d4; --sf-b: #6366f1; --sf-c: #d946ef; isolation: isolate; border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sf-a) 14%, transparent), color-mix(in srgb, var(--sf-c) 12%, transparent));
  transition: box-shadow .2s, background .2s; }
/* 渐变描边：伪元素铺满后用 mask 抠掉中间，只剩 1.5px 的一圈——border 画不出渐变圆角。 */
.sf-tg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, var(--sf-a), var(--sf-b) 55%, var(--sf-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; transition: opacity .2s; }
.sf-tg svg.i { width: 21px; height: 21px; overflow: visible; }
.sf-tg:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--sf-a) 24%, transparent), color-mix(in srgb, var(--sf-c) 22%, transparent));
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--sf-b) 75%, transparent); }
.sf-tg:hover::before { opacity: 1; }
/* 动势：轨道慢转、星芒呼吸，悬停时转快。只动 transform / opacity，不碰布局。 */
.sf-tg .sf-orbit, .sf-tg .sf-core { transform-origin: 12px 12px; }
.sf-tg .sf-orbit { animation: sf-ic-spin 14s linear infinite; }
.sf-tg .sf-core { animation: sf-ic-beat 3.2s ease-in-out infinite; }
.sf-tg:hover .sf-orbit { animation-duration: 4s; }
@keyframes sf-ic-spin { to { transform: rotate(360deg); } }
@keyframes sf-ic-beat { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .sf-tg .sf-orbit, .sf-tg .sf-core { animation: none; } }
/* 浅色正文上：固定的青→紫→品红在白底上发灰发粉、和主题色不搭，改用当前主题色的光→主→辅三段，底色压成主题色淡底。 */
:root[data-theme="light"] body:not(.ex-ai-mode) .sf-tg,
body.ex-ai-mode[data-ai-theme="light"] .sf-tg {
  --sf-a: var(--surface-glow, var(--brand-fill)); --sf-b: var(--brand-fill); --sf-c: var(--brand-peer);
  background: color-mix(in srgb, var(--sf-a) 9%, #fff);
}
:root[data-theme="light"] body:not(.ex-ai-mode) .sf-tg::before,
body.ex-ai-mode[data-ai-theme="light"] .sf-tg::before { opacity: .55; }
:root[data-theme="light"] body:not(.ex-ai-mode) .sf-tg:hover,
body.ex-ai-mode[data-ai-theme="light"] .sf-tg:hover {
  background: color-mix(in srgb, var(--sf-a) 16%, #fff); box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--sf-b) 60%, transparent);
}
.sf-pill { display: none; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border-radius: 99px; cursor: pointer; flex: none;
  border: 1px solid rgba(var(--cy-rgb), .32); color: var(--tx-hi); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  background: linear-gradient(135deg, rgba(var(--cy-rgb), .14), rgba(var(--vi-rgb), .12)); box-shadow: 0 0 20px -8px rgba(var(--cy-rgb), .7); transition: .2s; }
.sf-pill:hover { border-color: rgba(var(--cy-rgb), .6); box-shadow: 0 0 26px -6px rgba(var(--cy-rgb), .9); }
.sf-pill svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 10px var(--cy); }
html.sf .sf-pill { display: inline-flex; }

/* ------------------------------------------------------------------ 舞台 */
#sf-stage {
  --sf-ink: #eef4ff; --sf-ink2: rgba(220, 232, 255, .76); --sf-ink3: rgba(170, 192, 236, .52);
  --sf-rim: rgba(160, 196, 255, .14); --sf-card: rgba(15, 22, 48, .42); --sf-hud: 125, 211, 252;
  --S: clamp(150px, min(21vw, calc((100vh - 590px) / 1.66)), 300px);
  position: fixed; inset: 0; z-index: 45; display: none; overflow: hidden; overflow: clip; color: var(--sf-ink);   /* clip：不许任何脚本 / 聚焦把舞台卷偏（底部渐隐层左右伸出 50vw）；旧 Safari 退回 hidden */
  background: radial-gradient(130% 95% at 50% -6%, #0d1838 0%, #070c20 42%, #03050d 100%);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
html.sf-stage #sf-stage { display: block; animation: sf-fade .55s ease both; }
#sf-stage.sf-out { opacity: 0; transition: opacity .24s ease; }
@keyframes sf-fade { from { opacity: 0; } }

/* 色雾：四团大范围的光，缓慢漂移（匀速往返） */
.sf-neb { position: absolute; inset: -12%; pointer-events: none; animation: sf-neb 70s linear infinite alternate;
  background:
    radial-gradient(34% 30% at 50% 34%, rgba(56, 110, 255, .26), transparent 70%),
    radial-gradient(30% 32% at 18% 74%, rgba(124, 58, 237, .22), transparent 72%),
    radial-gradient(28% 28% at 84% 70%, rgba(6, 182, 212, .17), transparent 72%),
    radial-gradient(24% 22% at 76% 16%, rgba(236, 72, 153, .13), transparent 70%),
    radial-gradient(20% 20% at 12% 18%, rgba(34, 211, 238, .10), transparent 70%); }
@keyframes sf-neb { to { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); } }
.sf-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sf-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* 顶部一行：品牌 · 时间 · 刷新 / 经典界面 */
.sf-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 18px 26px 0; }
.sf-brand { display: flex; align-items: center; gap: 10px; user-select: none; }
.sf-brand .mk { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--grad);
  box-shadow: 0 0 24px -4px rgba(99, 102, 241, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sf-brand .mk svg { width: 72%; height: 72%; }
.sf-brand .nm { font-size: 17px; font-weight: 800; letter-spacing: .4px; }
.sf-brand .tag { font: 700 10.5px/1 var(--mono); letter-spacing: 2.4px; padding: 5px 9px 5px 11px; border-radius: 99px; color: var(--cy);
  border: 1px solid rgba(var(--cy-rgb), .38); background: rgba(var(--cy-rgb), .08); box-shadow: 0 0 16px -6px rgba(var(--cy-rgb), .9); }
.sf-clock { margin-left: auto; display: flex; align-items: baseline; gap: 12px; color: var(--sf-ink2); white-space: nowrap; }
.sf-clock .t { font: 600 22px/1 var(--mono); color: var(--sf-ink); letter-spacing: 1px; }
.sf-clock .d { font-size: 12.5px; color: var(--sf-ink3); }
.sf-tools { display: flex; gap: 8px; }
.sf-ib { height: 34px; padding: 0 13px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--sf-rim); background: rgba(255, 255, 255, .04); color: var(--sf-ink2); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .2s, border-color .2s, background .2s; }
.sf-ib:hover { color: var(--sf-ink); border-color: rgba(var(--cy-rgb), .5); background: rgba(var(--cy-rgb), .09); }
.sf-ib svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-ib.spin svg { animation: sf-rot 1s linear infinite; }

/* 主列：光球 → 问候 → Flux 的一句话 → 三张卡（内容超高时整列可滚，margin:auto 居中不会把顶部裁掉） */
.sf-main { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 66px 24px 124px;
  scrollbar-width: none; }
.sf-main::-webkit-scrollbar { display: none; }
.sf-inner { margin: auto 0; display: flex; flex-direction: column; align-items: center; width: 100%; }

.sf-hero { position: relative; flex: none; width: var(--S); height: calc(var(--S) * 1.66); display: grid; place-items: center;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; transform-origin: 50% 50%; }
.sf-halo { position: absolute; left: 50%; top: 50%; width: calc(var(--S) * 1.9); height: calc(var(--S) * 1.9); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 120, 255, .30), rgba(99, 102, 241, .13) 52%, rgba(34, 211, 238, .04) 72%, transparent 100%);
  animation: sf-breathe 7s ease-in-out infinite; }
@keyframes sf-breathe { 50% { opacity: .62; } }
/* 雷达式扫光：一道很淡的锥形光绕光球匀速转 */
.sf-sweep { position: absolute; left: 50%; top: 50%; width: calc(var(--S) * 1.58); height: calc(var(--S) * 1.58); margin: calc(var(--S) * -.79) 0 0 calc(var(--S) * -.79);
  border-radius: 50%; pointer-events: none; opacity: .55;
  background: conic-gradient(from 0deg, rgba(var(--sf-hud), 0) 0deg, rgba(var(--sf-hud), 0) 290deg, rgba(var(--sf-hud), .10) 340deg, rgba(var(--sf-hud), .22) 359deg, rgba(var(--sf-hud), 0) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 52%, #000 58%, #000 96%, transparent 100%); mask-image: radial-gradient(closest-side, transparent 52%, #000 58%, #000 96%, transparent 100%);
  animation: sf-rot 9s linear infinite; }
.sf-hud { position: absolute; left: 50%; top: 50%; width: calc(var(--S) * 1.64); height: calc(var(--S) * 1.64); margin: calc(var(--S) * -.82) 0 0 calc(var(--S) * -.82);
  pointer-events: none; overflow: visible; }
.sf-hud .r { transform-box: view-box; transform-origin: 200px 200px; }
.sf-hud .r1 { animation: sf-rot 140s linear infinite; }
.sf-hud .r2 { animation: sf-rot 90s linear infinite reverse; }
.sf-hud .r3 { animation: sf-rot 48s linear infinite; }
.sf-hud .r4 { animation: sf-rot 200s linear infinite reverse; }
.sf-hud .r5 { animation: sf-rot 30s linear infinite reverse; }
.sf-hud text { font: 600 7.4px var(--mono); letter-spacing: 2.2px; fill: rgba(var(--sf-hud), .62); }
.sf-hud .o1 { fill: none; stroke: rgba(var(--sf-hud), .2); stroke-width: .8; }
.sf-hud .tk { fill: none; stroke: rgba(var(--sf-hud), .32); stroke-width: 1; }
.sf-hud .dsh { fill: none; stroke: rgba(var(--sf-hud), .3); stroke-width: 1.2; stroke-dasharray: 1.5 7; }
.sf-hud .arc { fill: none; stroke: url(#sf-g1); stroke-width: 2.2; stroke-linecap: round; }
.sf-hud .arcg { fill: none; stroke: url(#sf-g1); stroke-width: 8; stroke-linecap: round; opacity: .14; }
.sf-hud .o2 { fill: none; stroke: rgba(var(--sf-hud), .12); stroke-width: .8; }
.sf-hud .draw { stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: sf-draw 1.6s cubic-bezier(.3, .7, .2, 1) .15s forwards; }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-rot { to { transform: rotate(360deg); } }
.sf-orb { position: relative; z-index: 2; width: var(--S); height: var(--S); border-radius: 50%; cursor: pointer; animation: sf-orb-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sf-orb-in { from { transform: scale(.55); opacity: 0; } }
.sf-orb:focus-visible { outline: 2px solid rgba(var(--cy-rgb), .6); outline-offset: 8px; }

.sf-greet { margin: 0; font-size: clamp(26px, calc(2.4vh + 14px), 46px); font-weight: 700; letter-spacing: 1px; text-align: center; line-height: 1.25;
  background: linear-gradient(180deg, #ffffff 10%, #bcd6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(80, 140, 255, .28)); transition: opacity .4s; animation: sf-rise .9s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.sf-line { margin: 10px 0 0; max-width: min(900px, 92vw); min-height: 1.75em; text-align: center; text-wrap: balance; font-size: clamp(14.5px, calc(.6vh + 9px), 18px); line-height: 1.75;
  color: var(--sf-ink2); transition: opacity .4s; }
.sf-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -.16em; border-radius: 1px; background: var(--cy);
  box-shadow: 0 0 10px var(--cy); animation: sf-blink 1.05s steps(1) infinite; }
@keyframes sf-blink { 50% { opacity: 0; } }
@keyframes sf-rise { from { opacity: 0; transform: translateY(14px); } }

/* ------------------------------------------------------------------ 三张卡 */
.sf-cards { --cw: clamp(248px, calc((100vw - 120px) / 3), 404px); margin-top: clamp(20px, 3.2vh, 40px); display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 20px;
  transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .2, 1); }
.sf-card { --tc: var(--cy); --tr: var(--cy-rgb);
  position: relative; display: flex; flex-direction: column; min-height: 200px; padding: 18px 18px 16px; border-radius: 20px; text-align: left; cursor: pointer;
  color: inherit; font: inherit; overflow: hidden; isolation: isolate;
  background: linear-gradient(162deg, rgba(var(--tr), .13) 0%, rgba(255, 255, 255, .035) 34%, rgba(255, 255, 255, .015) 100%), var(--sf-card);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s;
  animation: sf-card-in .85s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 140ms + 420ms); }
@keyframes sf-card-in { from { opacity: 0; transform: translateY(30px) scale(.94); filter: blur(10px); } }
/* 每张卡 / 光束 / 小清单的本色（data-tone 由后端给：cy 学习、vi 工作、pk 待办、gr 习惯 / 一练、am 待批准 / 提醒、rd 逾期 / 故障） */
#sf-stage [data-tone="cy"] { --tc: var(--cy); --tr: var(--cy-rgb); }
#sf-stage [data-tone="vi"] { --tc: var(--vi); --tr: var(--vi-rgb); }
#sf-stage [data-tone="pk"] { --tc: var(--pk); --tr: var(--pk-rgb); }
#sf-stage [data-tone="gr"] { --tc: var(--gr); --tr: var(--gr-rgb); }
#sf-stage [data-tone="am"] { --tc: var(--am); --tr: var(--am-rgb); }
#sf-stage [data-tone="rd"] { --tc: var(--rd); --tr: var(--rd-rgb); }
/* 顶边一道本色的光 + 跟着鼠标走的柔光 + 悬停时掠过一道亮光 */
.sf-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(var(--tr), .95), transparent); opacity: .75; }
.sf-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tr), .18), transparent 62%); }
.sf-card .sweep { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: skewX(-12deg); }
.sf-card:hover { transform: translateY(-7px); border-color: rgba(var(--tr), .5);
  box-shadow: 0 34px 70px -30px rgba(var(--tr), .5), 0 0 0 1px rgba(var(--tr), .14), inset 0 1px 0 rgba(255, 255, 255, .11); }
.sf-card:hover::after { opacity: 1; }
.sf-card:hover .sweep { animation: sf-sweep 1.1s ease forwards; }
@keyframes sf-sweep { 0% { opacity: 1; left: -60%; } 100% { opacity: 1; left: 130%; } }
.sf-card:focus-visible { outline: 2px solid rgba(var(--tr), .75); outline-offset: 3px; }
.sf-card.picked { transform: translateY(-7px) scale(1.03); border-color: rgba(var(--tr), .8); box-shadow: 0 0 60px -10px rgba(var(--tr), .75); }

.sf-c-head { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sf-c-ic { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, rgba(var(--tr), 1), rgba(var(--tr), .42)); box-shadow: 0 8px 22px -8px rgba(var(--tr), .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sf-c-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sf-c-lab { font-size: 12.5px; color: var(--sf-ink3); letter-spacing: .3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-c-urg { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgb(var(--tr)); box-shadow: 0 0 0 0 rgba(var(--tr), .7); animation: sf-ping 2s linear infinite; }
@keyframes sf-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--tr), .65); } 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--tr), 0); } }
.sf-c-no { margin-left: auto; font: 700 12px/1 var(--mono); letter-spacing: 1.5px; color: rgba(var(--tr), .8); }
.sf-c-title { margin-top: 15px; font-size: clamp(16.5px, calc(.28vw + 12.5px), 20px); font-weight: 700; line-height: 1.42; color: var(--sf-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-c-why { margin-top: 8px; font-size: clamp(13px, calc(.1vw + 11.4px), 14.4px); line-height: 1.65; color: var(--sf-ink2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: opacity .4s; }
.sf-c-meta { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-c-meta i { font-style: normal; font-size: 11.5px; line-height: 1; padding: 5px 8px; border-radius: 99px; color: var(--sf-ink2);
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.sf-c-bar { position: relative; height: 3px; margin-top: 12px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sf-c-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--tr), .55), rgb(var(--tr)));
  box-shadow: 0 0 12px rgba(var(--tr), .9); transform-origin: 0 50%; animation: sf-bar 1.2s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 140ms + 900ms); }
@keyframes sf-bar { from { transform: scaleX(0); } }
.sf-c-cta { margin-top: 13px; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: rgb(var(--tr)); }
.sf-c-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.sf-card:hover .sf-c-cta svg { transform: translateX(5px); }

/* 卡片出场前，光从光球射向它（super.js 按卡片位置算角度和长度） */
.sf-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sf-beam { --tr: var(--cy-rgb); position: absolute; height: 2px; border-radius: 2px; transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(var(--tr), .85) 65%, #fff);
  box-shadow: 0 0 14px rgba(var(--tr), .9); animation: sf-beam .75s cubic-bezier(.4, .1, .2, 1) forwards; }
@keyframes sf-beam { 0% { opacity: 0; transform: rotate(var(--a)) scaleX(0); } 18% { opacity: 1; } 62% { opacity: 1; transform: rotate(var(--a)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) scaleX(1); } }

/* 骨架（第一次加载还没数据时） */
.sf-card.sk { cursor: default; pointer-events: none; animation-delay: 0ms; }
.sf-card.sk .sf-c-ic, .sf-card.sk .ln { background: rgba(255, 255, 255, .07); box-shadow: none; }
.sf-card.sk .ln { display: block; height: 12px; border-radius: 6px; margin-top: 14px; }
.sf-card.sk .ln.w6 { width: 60%; } .sf-card.sk .ln.w9 { width: 90%; } .sf-card.sk .ln.w4 { width: 40%; }
.sf-card.sk::after { opacity: 1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%); background-size: 200% 100%; animation: sf-shim 1.4s linear infinite; }
@keyframes sf-shim { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.sf-err { margin-top: 26px; color: var(--sf-ink3); font-size: 13.5px; }

/* ------------------------------------------------------------------ 模型在挑三件事（super.js think()）
 * 开场白前的 ✦：模型挑的亮着，正在想就转，没挑成灰着（悬停说原因）；纯规则版不显示。
 * 在想时卡片照样能点：理由先压暗，一道扫光依次掠过；光球的「想」由 orb.js 画（super.js 给 #sf-orb 挂 .think）。 */
.sf-by { display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.17em; color: var(--cy);
  filter: drop-shadow(0 0 6px rgba(var(--cy-rgb), .85)); }
.sf-by[hidden] { display: none; }
.sf-by svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: rgba(var(--cy-rgb), .2); stroke-width: 1.7; stroke-linejoin: round; }
.sf-by.off { color: var(--sf-ink3); filter: none; }
.sf-by.off svg { fill: none; }
#sf-stage.thinking .sf-by { animation: sf-rot 2.4s linear infinite; }
#sf-stage.thinking .sf-c-why { opacity: .45; }
#sf-stage.thinking .sf-card:not(.sk) .sweep { animation: sf-scan 2.6s linear infinite; animation-delay: calc(var(--i, 0) * .4s); }
@keyframes sf-scan { 0% { opacity: 1; left: -60%; } 55%, 100% { opacity: 1; left: 130%; } }
/* 换了三件事：旧的一组先淡出（super.js 加 .swap，240ms 后重画，新卡按 sf-card-in 重新出场） */
.sf-cards.swap .sf-card { opacity: 0; transform: translateY(-10px) scale(.97); filter: blur(6px); transition: opacity .22s, transform .22s, filter .22s; }

/* ------------------------------------------------------------------ 输入框（流光边） */
.sf-dock { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 6; width: min(800px, calc(100vw - 32px)); transform: translateX(-50%);
  transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1); animation: sf-dock-in .9s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
@keyframes sf-dock-in { from { opacity: 0; transform: translate(-50%, 24px); } }
.sf-dock::before { content: ""; position: absolute; left: -50vw; right: -50vw; top: -34px; bottom: calc(-24px - env(safe-area-inset-bottom)); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(3, 5, 13, 0), rgba(3, 5, 13, .8) 42%, rgba(3, 5, 13, .94)); }
.sf-ask { position: relative; border-radius: 28px; padding: 1.5px; overflow: hidden; isolation: isolate;
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, .9), 0 0 46px -14px rgba(99, 102, 241, .55); }
.sf-ask::before { content: ""; position: absolute; left: 50%; top: 50%; width: 160%; padding-bottom: 160%; margin: -80% 0 0 -80%; z-index: -1; opacity: .7;
  background: conic-gradient(from 0deg, rgba(34, 211, 238, 0) 0deg, rgba(34, 211, 238, .95) 70deg, rgba(129, 140, 248, .95) 140deg, rgba(244, 114, 182, .9) 200deg, rgba(34, 211, 238, 0) 260deg, rgba(34, 211, 238, 0) 360deg);
  animation: sf-rot 7s linear infinite; transition: opacity .3s; }
.sf-ask::after { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(160, 196, 255, .14); }
.sf-ask:focus-within::before { opacity: 1; }
.sf-ask:focus-within { box-shadow: 0 20px 60px -24px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(34, 211, 238, .55); }
.sf-ask-in { display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 27px;
  background: rgba(7, 11, 27, .9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.sf-ask-ic { flex: none; width: 22px; height: 22px; margin: 0 0 11px; color: var(--cy); filter: drop-shadow(0 0 6px rgba(var(--cy-rgb), .8)); }
.sf-ask-ic svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.sf-ask textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--sf-ink); font-family: inherit; font-size: 15.5px; line-height: 1.55;
  padding: 10px 0; height: 44px; max-height: 150px; }
.sf-ask textarea::placeholder { color: var(--sf-ink3); opacity: 1; transition: opacity .35s; }
.sf-ask textarea.ph-out::placeholder { opacity: 0; }
.sf-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #060914;
  background: var(--grad); box-shadow: 0 8px 22px -8px rgba(99, 102, 241, .95), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .2s, filter .2s; }
.sf-send:hover { transform: scale(1.06); filter: brightness(1.08); }
.sf-send:active { transform: scale(.93); }
.sf-send svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-hint { margin-top: 9px; text-align: center; font-size: 11.5px; color: var(--sf-ink3); letter-spacing: .3px; }
.sf-hint kbd { font: 600 10.5px var(--mono); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--sf-rim); background: rgba(255, 255, 255, .04); color: var(--sf-ink2); }

/* ------------------------------------------------------------------ 对话中（html.sf-talk）
 * 宽屏：光球挪到左栏（super.js 算位移 --sf-dx/--sf-dy、缩放 --sf-k），下面是三件事的小清单；右边是 Flux 对话面板（一张大玻璃卡）。
 * 窄屏 / 手机：光球缩到顶部，面板占满下面。 */
html.sf-talk .sf-hero { transform: translate(var(--sf-dx, 0px), var(--sf-dy, 0px)) scale(var(--sf-k, .7)); }
html.sf-talk .sf-greet, html.sf-talk .sf-line { opacity: 0; pointer-events: none; }
html.sf-talk .sf-cards { opacity: 0; transform: translateY(26px); pointer-events: none; }
html.sf-talk .sf-dock { opacity: 0; transform: translate(-50%, 24px); pointer-events: none; }
html.sf-talk .sf-main { overflow: hidden; }
.sf-mini { position: absolute; z-index: 4; width: var(--sf-mw, 340px); left: var(--sf-mx, 0px); top: var(--sf-my, 0px); opacity: 0; pointer-events: none;
  transform: translateY(16px); transition: opacity .45s .15s, transform .55s cubic-bezier(.2, .8, .2, 1) .15s; }
html.sf-talk:not(.sf-stack) .sf-mini { opacity: 1; transform: none; pointer-events: auto; }
.sf-mini-h { font: 700 11px/1 var(--mono); letter-spacing: 2.4px; color: var(--sf-ink3); margin: 0 0 10px 4px; }
.sf-mi { --tr: var(--cy-rgb); width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 8px; border-radius: 14px; cursor: pointer;
  text-align: left; color: var(--sf-ink); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.4; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .2s, background .2s, transform .25s; }
.sf-mi:hover { border-color: rgba(var(--tr), .5); background: rgba(var(--tr), .08); transform: translateX(3px); }
.sf-mi .d { width: 8px; height: 8px; flex: none; border-radius: 50%; background: rgb(var(--tr)); box-shadow: 0 0 10px rgb(var(--tr)); }
.sf-mi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mi svg { width: 14px; height: 14px; flex: none; stroke: var(--sf-ink3); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 对话面板在舞台上的样子（面板本身还是 app.js 的那一个，所有功能照旧）：
 * 宽屏是舞台右侧一张大玻璃卡（位置 / 宽度由 super.js 写进 --sf-pl / --sf-pw），从下面浮上来；手机是光球下面的一整张底板。 */
html.sf-stage #ai-drawer { border: 1px solid rgba(160, 196, 255, .16); border-radius: 24px;
  background: linear-gradient(180deg, rgba(16, 23, 50, .62), rgba(8, 12, 30, .76));
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); }
html.sf-stage:not(.m) #ai-drawer { top: 76px; bottom: 24px; left: var(--sf-pl, 25vw); right: auto; width: var(--sf-pw, 50vw); max-width: none;
  opacity: 0; visibility: hidden; transform: translateY(30px) scale(.985);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .4s, visibility 0s .55s; }
html.sf-stage:not(.m) #ai-drawer.open { opacity: 1; visibility: visible; transform: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1) .08s, opacity .4s .08s, visibility 0s; }
html.sf-stage.m #ai-drawer { top: calc(var(--sat, 0px) + 112px); border-radius: 22px 22px 0 0; border-bottom: 0; }
html.sf-stage.sf-stack:not(.m) #ai-drawer { top: calc(var(--sat, 0px) + 112px); }     /* 900–1099 宽（如 iPad 横屏）：面板在缩小的光球下面，左右居中（super.js 写 --sf-pl / --sf-pw） */
html.sf-stage #ai-drawer :is(.ai-grip, .ai-edge-x, #ai-wide, #ai-orb) { display: none !important; }
html.sf-stage #ai-drawer .ai-welcome .big-orb { display: none; }
html.sf-stage #ai-drawer .ai-head { border-bottom-color: rgba(160, 196, 255, .1); }
html.sf-stage #ai-drawer .ai-input { border-top-color: rgba(160, 196, 255, .1); }
/* 「全部对话」停靠在左栏时（桌面默认），舞台上的对话卡照样两栏：能看、能选历史对话；头部开关收起后点标题弹浮层列表。
 * 以前这里把停靠列表和开关一起藏了（想让卡片保持单栏），结果停靠模式下点标题也不弹列表，历史对话完全进不去（2026-10-27 用户问起才发现）。 */
html.sf-stage #ai-drawer.dock > .ai-tl { background: rgba(3, 6, 18, .26); border-right-color: rgba(160, 196, 255, .1); border-radius: 23px 0 0 23px; }
html[data-theme="light"].sf-stage #ai-drawer.dock > .ai-tl { background: rgba(255, 255, 255, .34); border-right-color: rgba(15, 23, 42, .08); }

/* ------------------------------------------------------------------ 窄屏 / 手机（super.js：html.m 或宽 < 900 挂 .sf-narrow，卡片竖排；
 * 对话时左右放不下（< 1100 或手机）挂 .sf-stack：顶栏收起、光球缩到上面、面板居中在下面） */
html.sf-narrow #sf-stage { --S: clamp(140px, min(24vh, 40vw), 210px); }
html.sf-narrow .sf-top { padding: calc(var(--sat, 0px) + 12px) 16px 0; gap: 10px; }
html.sf-narrow .sf-clock .d, html.sf-narrow .sf-ib .tx { display: none; }
html.sf-narrow .sf-clock .t { font-size: 17px; }
html.sf-narrow .sf-ib { padding: 0 10px; }
html.sf-narrow .sf-main { padding: calc(var(--sat, 0px) + 60px) 16px 150px; }
html.sf-narrow .sf-cards { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); gap: 12px; }
html.sf-narrow .sf-card { min-height: 0; padding: 15px 15px 14px; }
html.sf-narrow .sf-c-title { margin-top: 11px; font-size: 16.5px; }
html.sf-narrow .sf-c-why { -webkit-line-clamp: 2; }
html.sf-narrow .sf-hint { display: none; }
html.sf-narrow .sf-dock { bottom: calc(12px + env(safe-area-inset-bottom)); }
html.m .sf-ask textarea { font-size: 16px; line-height: 1.5; }     /* 手机：不到 16px 时 iOS 一聚焦就把页面放大（同 alice.css 里 html.m .ai-input textarea） */
html.sf-talk.sf-stack .sf-top { opacity: 0; pointer-events: none; }
.sf-top { transition: opacity .35s; }

@media (max-height: 820px) {
  #sf-stage { --S: clamp(120px, min(21vw, 138px, calc((100vh - 470px) / 1.66)), 300px); }
  .sf-main { padding-top: 58px; padding-bottom: 100px; }
  .sf-hint { display: none; }
  .sf-greet { font-size: 25px; }
  .sf-line { margin-top: 4px; font-size: 14px; }
  .sf-cards { margin-top: 14px; }
  .sf-card { min-height: 0; padding: 14px 15px 13px; }
  .sf-c-title { margin-top: 10px; font-size: 16px; }
  .sf-c-why { -webkit-line-clamp: 2; }
  .sf-c-meta { padding-top: 10px; }
  .sf-c-meta i:nth-child(n+4) { display: none; }
  .sf-c-cta { margin-top: 9px; }
  .sf-dock { bottom: 14px; }
}

/* ------------------------------------------------------------------ 亮色主题：晨光里的舞台（同一套构图，换底色和光的颜色） */
html[data-theme="light"] #sf-stage { --sf-ink: #0f172a; --sf-ink2: rgba(30, 41, 59, .8); --sf-ink3: rgba(71, 85, 105, .72); --sf-rim: rgba(15, 23, 42, .12);
  --sf-card: rgba(255, 255, 255, .5); --sf-hud: 37, 99, 235;
  background: radial-gradient(130% 95% at 50% -6%, #f6f8ff 0%, #e8eefc 46%, #dde5f6 100%); }
html[data-theme="light"] .sf-neb { opacity: .55; }
html[data-theme="light"] .sf-vig { background: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(148, 163, 184, .25) 100%); }
html[data-theme="light"] .sf-greet { background: linear-gradient(180deg, #0f172a 10%, #3b4f8f 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
html[data-theme="light"] .sf-halo { background: radial-gradient(closest-side, rgba(99, 140, 255, .22), rgba(99, 102, 241, .08) 55%, transparent 100%); }
html[data-theme="light"] .sf-card { border-color: rgba(15, 23, 42, .08); box-shadow: 0 24px 50px -30px rgba(30, 41, 80, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  background: linear-gradient(162deg, rgba(var(--tr), .12) 0%, rgba(255, 255, 255, .55) 36%, rgba(255, 255, 255, .45) 100%); }
html[data-theme="light"] .sf-card:hover { box-shadow: 0 30px 60px -28px rgba(var(--tr), .45), 0 0 0 1px rgba(var(--tr), .18); }
html[data-theme="light"] .sf-c-cta, html[data-theme="light"] .sf-c-no { color: var(--tc); }
html[data-theme="light"] .sf-c-meta i { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .07); }
html[data-theme="light"] .sf-c-bar { background: rgba(15, 23, 42, .08); }
html[data-theme="light"] .sf-ask-in { background: rgba(255, 255, 255, .9); }
html[data-theme="light"] .sf-dock::before { background: linear-gradient(to bottom, rgba(226, 232, 247, 0), rgba(226, 232, 247, .82) 42%, rgba(226, 232, 247, .95)); }
html[data-theme="light"] .sf-ask { box-shadow: 0 18px 50px -26px rgba(30, 41, 80, .45), 0 0 40px -16px rgba(99, 102, 241, .4); }
html[data-theme="light"] .sf-ib { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .sf-mi { background: rgba(255, 255, 255, .55); border-color: rgba(15, 23, 42, .08); }
html[data-theme="light"].sf-stage #ai-drawer { background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(246, 248, 255, .86)); border-color: rgba(15, 23, 42, .1);
  box-shadow: 0 40px 100px -50px rgba(30, 41, 80, .5); }

/* ------------------------------------------------------------------ 会话星轨 / 会话面板 / 顶栏「会话」（views/super-sess.js）
 * 光球左右两道弧，每个会话组一颗星；配色同会话管理页：在跑 = 青、外圈转、细线上有光往光球流，等你回复 = 琥珀、一圈圈往外扩，
 * 刚做完没看 = 右上红点，都空闲 = 淡淡的。星是给光球打下手的安静控件：小、淡，只有要你看的才亮；对话时 / 窄屏收起（窄屏走顶栏「会话」→ 底部面板）。 */
.sf-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; transition: opacity .4s, visibility 0s; }
.sf-orbit[hidden] { display: none; }
html.sf-talk .sf-orbit, html.sf-narrow .sf-orbit { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.sf-ob-svg { position: absolute; overflow: visible; pointer-events: none; animation: sf-ob-in .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--sd, .5s); }
@keyframes sf-ob-in { from { opacity: 0; transform: scale(.6); } }
.sf-ob-arc { fill: none; stroke: url(#sf-obg); stroke-width: 1.2; stroke-dasharray: 1.5 6; stroke-linecap: round; }
.sf-ob-sp { stroke: rgba(var(--sf-hud), .13); stroke-width: 1; transition: stroke .4s; }
.sf-ob-sp[data-st="run"] { stroke: rgba(var(--cy-rgb), .3); }
.sf-ob-sp[data-st="wait"] { stroke: rgba(var(--am-rgb), .36); }
.sf-ob-fx { stroke: #a5f3fc; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 14 500; opacity: 0; filter: drop-shadow(0 0 3px rgb(var(--cy-rgb))); }
.sf-ob-fx.on { opacity: 1; animation: sf-ob-flow 2.6s linear infinite; }
@keyframes sf-ob-flow { to { stroke-dashoffset: -514; } }

.sf-pl { --tr: var(--sf-hud); position: absolute; height: 50px; display: flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  transform-origin: 18px 50%; animation: sf-pl-in .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d, 700ms); }
.sf-pl.L { flex-direction: row-reverse; transform-origin: calc(100% - 18px) 50%; }
@keyframes sf-pl-in { from { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.4); } }   /* 从光球那边沿线飞出来（--fx/--fy 由 super-sess.js 按位置给） */
.sf-pl[data-st="run"] { --tr: var(--cy-rgb); }
.sf-pl[data-st="wait"] { --tr: var(--am-rgb); }
.sf-pl:focus-visible { outline: none; }
.sf-pl-c { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle closest-side, rgba(6, 10, 26, .9) 0 57%, transparent 61%); }   /* 垫个底：轨道虚线不从星的外圈里穿过去 */
.sf-pl-c::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(var(--tr), .3); transition: transform .3s, border-color .3s; }
.sf-pl .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; transition: transform .3s;
  background: radial-gradient(circle at 35% 30%, #fff 0, rgb(var(--tr)) 58%, rgba(var(--tr), .7) 100%);
  box-shadow: 0 0 10px rgba(var(--tr), .85), 0 0 24px rgba(var(--tr), .3); }
.sf-pl[data-st="idle"] .dot { opacity: .7; box-shadow: 0 0 8px rgba(var(--tr), .5); }
.sf-pl[data-st="run"] .sf-pl-c::before { border-color: rgba(var(--tr), .16); border-top-color: rgb(var(--tr)); border-right-color: rgba(var(--tr), .55); animation: sf-rot 1.4s linear infinite; }
.sf-pl[data-st="wait"] .dot { animation: sf-ping 1.8s linear infinite; }
.sf-pl .bd { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; border: 1.5px solid #0a1026;
  box-shadow: 0 0 8px rgba(255, 77, 109, .9); transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sf-pl.has-done .bd { transform: scale(1); }
.sf-pl-lab { display: flex; flex-direction: column; gap: 4px; padding: 7px 11px; border-radius: 13px; white-space: nowrap; line-height: 1.2;
  border: 1px solid transparent; transition: background .25s, border-color .25s, opacity .25s;
  animation: sf-fade .45s ease backwards; animation-delay: calc(var(--d, 700ms) + 260ms); }   /* 星先飞到位、组名再淡出来（字跟着飞看着乱） */
.sf-orbit.has-pop .sf-pl:not(.on) .sf-pl-lab { opacity: .16; }
/* 收起（顶栏「会话」再点一下）：组名先淡掉，星沿线退回光球，轨道往里收着淡掉；super-sess.js 等 260ms 后清空 */
.sf-orbit.out { pointer-events: none; }
.sf-orbit.out .sf-pl { animation: sf-pl-out .24s cubic-bezier(.4, 0, 1, 1) forwards; }
.sf-orbit.out .sf-pl-lab { animation: sf-lab-out .12s ease forwards; }
.sf-orbit.out .sf-ob-svg { animation: sf-ob-out .24s ease-in forwards; }
@keyframes sf-pl-out { to { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.4); } }
@keyframes sf-ob-out { to { opacity: 0; transform: scale(.6); } }
@keyframes sf-lab-out { to { opacity: 0; } }
.sf-pl.R .sf-pl-lab { align-items: flex-start; text-align: left; }
.sf-pl.L .sf-pl-lab { align-items: flex-end; text-align: right; }
.sf-pl-lab b { max-width: 172px; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; letter-spacing: .2px; color: var(--sf-ink2); transition: color .25s; }
.sf-pl-lab small { font-size: 11.5px; color: var(--sf-ink3); }
.sf-pl-lab em { font-style: normal; }
.sf-pl-lab em.r { color: var(--cy); }
.sf-pl-lab em.w { color: var(--am); }
.sf-pl-lab em.d { color: #ff7a93; }
.sf-pl:not([data-st="idle"]) .sf-pl-lab b, .sf-pl.has-done .sf-pl-lab b { color: var(--sf-ink); }
.sf-pl:hover .sf-pl-lab, .sf-pl.on .sf-pl-lab { background: rgba(255, 255, 255, .045); border-color: var(--sf-rim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sf-pl:hover .sf-pl-lab b, .sf-pl.on .sf-pl-lab b { color: var(--sf-ink); }
.sf-pl:focus-visible .sf-pl-lab { border-color: rgba(var(--tr), .7); }
.sf-pl:hover .dot, .sf-pl.on .dot { transform: scale(1.35); }
.sf-pl:hover .sf-pl-c::before, .sf-pl.on .sf-pl-c::before { transform: scale(1.18); }

/* 会话面板：毛玻璃卡，宽屏弹在星的外侧（super-sess.js 算位置），窄屏是底部面板 */
.sf-sp { --tr: var(--cy-rgb); position: fixed; z-index: 20; width: 352px; max-height: min(460px, calc(100vh - 110px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; color: var(--sf-ink); text-align: left;
  background: linear-gradient(165deg, rgba(var(--tr), .1), rgba(255, 255, 255, .025) 36%, rgba(255, 255, 255, .01)), rgba(9, 14, 34, .72);
  border: 1px solid rgba(160, 196, 255, .16); box-shadow: 0 30px 80px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); animation: sf-sp-in .24s cubic-bezier(.2, .8, .2, 1); }
.sf-sp[hidden] { display: none; }
@keyframes sf-sp-in { from { opacity: 0; transform: scale(.95); } }
.sf-sp::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--tr), .9), transparent); opacity: .7; }
.sf-sp-h { flex: none; display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid rgba(160, 196, 255, .09); }
.sf-sp-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.sf-sp-h .m { margin-left: auto; flex: none; font-size: 11.5px; color: var(--sf-ink3); white-space: nowrap; }
.sf-sp-h .ic { width: 18px; height: 18px; color: var(--cy); flex: none; }
.sf-sp-h .ic svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:is(.sf-sp-h, .sf-sp-gh) em { font-style: normal; }
:is(.sf-sp-h, .sf-sp-gh) em.r { color: var(--cy); }
:is(.sf-sp-h, .sf-sp-gh) em.w { color: var(--am); }
:is(.sf-sp-h, .sf-sp-gh) em.d { color: #ff7a93; }
:is(.sf-sp-h, .sf-sp-gh) .gd { --tr: var(--sf-hud); flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--tr)); box-shadow: 0 0 10px rgba(var(--tr), .9); }
:is(.sf-sp-h, .sf-sp-gh)[data-st="run"] .gd { --tr: var(--cy-rgb); }
:is(.sf-sp-h, .sf-sp-gh)[data-st="wait"] .gd { --tr: var(--am-rgb); }
.sf-sp-x { margin-left: 4px; width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--sf-ink2); font: 400 20px/1 system-ui, sans-serif; cursor: pointer; }
.sf-sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(160, 196, 255, .2) transparent; }
.sf-sp-gh { display: flex; align-items: center; gap: 8px; padding: 12px 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--sf-ink2); }
.sf-sp-gh span { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--sf-ink3); }
.sf-sr { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .15s, box-shadow .15s; }
.sf-sr.on { background: rgba(var(--cy-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--cy-rgb), .22); }
.sf-sr:focus-visible { outline: 2px solid rgba(var(--cy-rgb), .6); outline-offset: -2px; }
.sf-sr .st { position: relative; flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.sf-sr .st::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--gr-rgb), .7); }
.sf-sr[data-st="run"] .st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid rgba(var(--cy-rgb), .2); border-top-color: var(--cy); border-right-color: var(--cy);
  animation: sf-rot .9s linear infinite; }
.sf-sr[data-st="run"] .st::after { width: 5px; height: 5px; background: var(--cy); }
.sf-sr[data-st="wait"] .st::after { width: 9px; height: 9px; background: var(--am); box-shadow: 0 0 10px rgba(var(--am-rgb), .8); }
.sf-sr[data-st="done"] .st::after { width: 8px; height: 8px; background: #ff4d6d; box-shadow: 0 0 8px rgba(255, 77, 109, .85); }
.sf-sr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-sr .tx b { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 600; }
.sf-sr .tx b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sr .tx b em { flex: none; font: 600 10px/1 system-ui, sans-serif; font-style: normal; padding: 3px 6px; border-radius: 99px; color: var(--cy); background: rgba(var(--cy-rgb), .1); border: 1px solid rgba(var(--cy-rgb), .28); }
.sf-sr .tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sf-ink3); }
.sf-sr .wh { flex: none; font-size: 11.5px; color: var(--sf-ink3); white-space: nowrap; }
.sf-sr[data-st="run"] .wh { color: var(--cy); }
.sf-sr[data-st="wait"] .wh { color: var(--am); }
.sf-sr[data-st="done"] .wh { color: #ff7a93; }
/* 快捷发令：点会话先在这一行下面展开输入框（super-sess.js 的 quick），「进入会话」才进完整终端 */
.sf-sq { margin: 2px 4px 8px 35px; padding: 8px; border-radius: 12px; background: rgba(var(--cy-rgb), .06); border: 1px solid rgba(var(--cy-rgb), .2); animation: sf-sq-in .18s ease-out; }
@keyframes sf-sq-in { from { opacity: 0; transform: translateY(-4px); } }
.sf-sq-in { display: block; width: 100%; box-sizing: border-box; min-height: 40px; max-height: 160px; resize: none; line-height: 1.5; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(160, 196, 255, .18); background: rgba(2, 6, 23, .35); color: inherit; font: inherit; font-size: 13.5px; outline: none; }
.sf-sq-in:focus { border-color: rgba(var(--cy-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--cy-rgb), .12); }
.sf-sq-in::placeholder { color: var(--sf-ink3); }
.sf-sq.drop { border-color: rgba(var(--cy-rgb), .7); background: rgba(var(--cy-rgb), .12); }
.sf-sq-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.sf-sq-imgs[hidden] { display: none; }
.sf-sq-img { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(160, 196, 255, .22); background: rgba(2, 6, 23, .35); }
.sf-sq-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-sq-img.up img { opacity: .4; }
.sf-sq-img.up::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(var(--cy-rgb), .25); border-top-color: var(--cy); animation: sf-rot .8s linear infinite; }
.sf-sq-img button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(2, 6, 23, .72); color: #fff; font-size: 13px; line-height: 18px; cursor: pointer; }
.sf-sq-b .sf-sq-att { width: 28px; padding: 0; justify-content: center; }
.sf-sq-b { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.sf-sq-msg { flex: 1; min-width: 0; font-size: 11.5px; color: var(--sf-ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-sq-msg[data-k="ok"] { color: var(--gr); }
.sf-sq-msg[data-k="bad"] { color: #ff7a93; white-space: normal; }
.sf-sq-b button { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 8px; font: inherit; font-size: 12.5px; cursor: pointer; border: 1px solid rgba(160, 196, 255, .18); background: rgba(160, 196, 255, .06); color: var(--sf-ink2); }
.sf-sq-b button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-sq-b button:hover { color: var(--sf-ink); border-color: rgba(160, 196, 255, .32); }
.sf-sq-b .sf-sq-send { color: #04131a; font-weight: 600; border-color: transparent; background: linear-gradient(135deg, #22d3ee, #818cf8); }
.sf-sq-b .sf-sq-send:hover { color: #04131a; filter: brightness(1.08); }
.sf-sq.busy .sf-sq-send { opacity: .6; pointer-events: none; }
html[data-theme="light"] .sf-sq-in { background: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .14); }
html[data-theme="light"] .sf-sq-msg[data-k="bad"] { color: var(--rd); }
/* 输入框上方的选项题（会话在等你选时） */
.sf-sq-ch { margin-bottom: 8px; padding: 9px 10px 8px; border-radius: 10px; background: rgba(var(--am-rgb), .07); border: 1px solid rgba(var(--am-rgb), .28); }
.sf-sq-ch[hidden] { display: none; }
.sf-sq-qh { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--am); }
.sf-sq-qh i { width: 7px; height: 7px; border-radius: 50%; background: var(--am); box-shadow: 0 0 8px rgba(var(--am-rgb), .8); }
.sf-sq-q { margin: 5px 0 8px; font-size: 13px; line-height: 1.5; color: var(--sf-ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow-y: auto; }
.sf-sq-ops { display: flex; flex-direction: column; gap: 5px; }
.sf-sq-op { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 8px; text-align: left; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--sf-ink2); background: rgba(255, 255, 255, .03); border: 1px solid rgba(160, 196, 255, .16); transition: background .15s, border-color .15s, color .15s; }
.sf-sq-op b { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 700 11px/1 var(--mono); color: var(--am); background: rgba(var(--am-rgb), .12); }
.sf-sq-op span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sf-sq-op em { flex: none; font-style: normal; font-size: 10.5px; color: var(--sf-ink3); }
.sf-sq-op:hover, .sf-sq-op:focus-visible { color: var(--sf-ink); border-color: rgba(var(--am-rgb), .55); background: rgba(var(--am-rgb), .1); outline: none; }
.sf-sq-op.on { border-color: rgba(var(--am-rgb), .4); }
.sf-sq.busy .sf-sq-op { opacity: .6; pointer-events: none; }
.sf-sq-nx { margin-top: 6px; padding: 2px 0; border: 0; background: none; color: var(--sf-ink3); font: inherit; font-size: 11.5px; cursor: pointer; }
.sf-sq-nx:hover { color: var(--sf-ink2); text-decoration: underline; }
html[data-theme="light"] .sf-sq-op { background: rgba(255, 255, 255, .6); border-color: rgba(15, 23, 42, .12); }
.sf-sp-f { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px 14px; border-top: 1px solid rgba(160, 196, 255, .09); }
.sf-sp-all { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; border: 0; background: none; color: var(--cy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sf-sp-all svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.sf-sp-all:hover svg { transform: translateX(4px); }
.sf-sp-f .k { margin-left: auto; font-size: 11px; color: var(--sf-ink3); white-space: nowrap; }
/* 窄屏 / 手机：底部面板 */
.sf-sp.sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 74vh; border-radius: 22px 22px 0 0; border-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom); animation: sf-sheet-in .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes sf-sheet-in { from { opacity: 0; transform: translateY(48px); } }
.sf-sp.sheet .sf-sp-f .k { display: none; }
.sf-sp.sheet .sf-sr { padding: 11px 10px; }
.sf-sp-scrim { position: fixed; inset: 0; z-index: 19; background: rgba(2, 4, 12, .5); animation: sf-fade .25s ease; }
.sf-sp-scrim[hidden] { display: none; }

/* 顶栏「会话」：宽屏是星轨的开关（展开时按下去、亮青色边），窄屏弹底部面板；要你看的（等你回复 / 刚做完没看）有几个挂个数，只是在跑就图标转青 */
.sf-sess { position: relative; transition: color .2s, border-color .2s, background .2s, box-shadow .3s; }
.sf-sess.on { color: var(--sf-ink); border-color: rgba(var(--cy-rgb), .55); background: rgba(var(--cy-rgb), .13);
  box-shadow: 0 0 20px -6px rgba(var(--cy-rgb), .85), inset 0 0 12px -6px rgba(var(--cy-rgb), .6); }
.sf-sess.on svg { color: var(--cy); }
.sf-sess[hidden] { display: none; }
.sf-sess[data-st="run"] svg { color: var(--cy); filter: drop-shadow(0 0 5px rgba(var(--cy-rgb), .8)); }
.sf-sess-n { display: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; font: 700 10.5px/17px system-ui, sans-serif; font-style: normal; text-align: center;
  color: #1c1300; background: #fbbf24; box-shadow: 0 0 10px rgba(251, 191, 36, .7); }   /* 固定亮琥珀：亮色主题的 --am 是深棕，配深字看不清 */
.sf-sess[data-st="done"] .sf-sess-n { color: #fff; background: #ff4d6d; box-shadow: 0 0 10px rgba(255, 77, 109, .7); }
.sf-sess:is([data-st="wait"], [data-st="done"]) .sf-sess-n { display: inline-block; }
html.sf-narrow .sf-sess-n { position: absolute; top: -5px; right: -5px; }

html[data-theme="light"] .sf-sp { background: linear-gradient(165deg, rgba(var(--tr), .08), rgba(255, 255, 255, .5) 40%), rgba(255, 255, 255, .8); border-color: rgba(15, 23, 42, .1);
  box-shadow: 0 26px 60px -30px rgba(30, 41, 80, .45); }
html[data-theme="light"] .sf-pl .bd { border-color: #e8eefc; }
html[data-theme="light"] .sf-pl-c { background: radial-gradient(circle closest-side, rgba(236, 241, 252, .92) 0 57%, transparent 61%); }
html[data-theme="light"] :is(.sf-pl:hover, .sf-pl.on) .sf-pl-lab { background: rgba(255, 255, 255, .6); }
html[data-theme="light"] .sf-sp-scrim { background: rgba(30, 41, 80, .25); }
html[data-theme="light"] .sf-sp-x { background: rgba(15, 23, 42, .06); }
html[data-theme="light"] .sf-sess.on { background: rgba(var(--cy-rgb), .12); box-shadow: 0 6px 18px -8px rgba(var(--cy-rgb), .7); }
html[data-theme="light"] :is(.sf-pl-lab, .sf-sp-h, .sf-sp-gh) em.d, html[data-theme="light"] .sf-sr[data-st="done"] .wh { color: var(--rd); }   /* 亮底上 #ff7a93 对比度只有 2:1 */

/* Flux 缺少 Alice theme.css 的 token；仅在超级舞台及其面板作用域补齐。 */
html.sf {
  --cy:#22d3ee; --vi:#a78bfa; --pk:#f472b6; --gr:#34d399; --am:#fbbf24; --rd:#f87171;
  --cy-rgb:34,211,238; --vi-rgb:167,139,250; --pk-rgb:244,114,182; --gr-rgb:52,211,153; --am-rgb:251,191,36; --rd-rgb:248,113,113;
  --grad:linear-gradient(135deg,#22d3ee 0%,#818cf8 50%,#f472b6 100%);
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --tx-hi:#eef4ff; --r-seam:8px;
}
/* Flux 的 xl 固定为 96px；Alice 舞台使用 --S，画布仍由 Flux orb.js 挂载。 */
#sf-stage #sf-orb { width:var(--S); height:var(--S); display:block; padding:0; border:0; }
html.sf-stage #app, html.sf-stage #ai-toggle { visibility:hidden; }
html.sf .sf-tg { display:none; }
/* Flux 通用浮窗的 !important 几何会覆盖 Alice；在舞台限定范围恢复原面板几何、时序及曲线。 */
html:root.sf-stage[data-skin] body #ai-drawer {
  position:fixed!important; z-index:60; display:flex!important; flex-direction:column;
  top:76px!important; bottom:24px!important; left:var(--sf-pl,25vw)!important; right:auto!important;
  width:var(--sf-pw,50vw)!important; height:auto!important; max-width:none!important; max-height:none!important;
  border-radius:24px!important; overflow:hidden; animation:none!important;
  opacity:0!important; visibility:hidden!important; transform:translateY(30px) scale(.985)!important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s,visibility 0s .55s!important;
}
html:root.sf-stage[data-skin] body #ai-drawer.open {
  opacity:1!important; visibility:visible!important; transform:none!important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1) .08s,opacity .4s .08s,visibility 0s!important;
}
html:root.sf-stage[data-skin] body #ai-drawer :is(#ai-dock,#ai-wide,#ai-orb) {display:none!important;}
html:root.sf-stage[data-skin] body #ai-drawer :is(.ai-resize,.flux-edge-right,.flux-edge-corner) {display:none!important;}
html:root.sf-stage[data-skin] body #ai-drawer .ai-hello .ex-orb {display:none;}
html:root.sf-stage[data-skin] body #ai-drawer .ai-head {cursor:default;}
html:root.sf-stage.sf-stack[data-skin] body #ai-drawer {top:calc(var(--sat,0px) + 112px)!important;}
/* 舞台上的面板可拖可拉（宽屏左右排时）：标题栏拖动，左边与右下角改大小，双击标题栏回到默认排布；几何由 ai.js 写进 --sfw-*。
 * 右边不放拉条：面板在舞台上要裁圆角，拉条只能叠在滚动条上，会抢滚动条的拖动。 */
@media(min-width:900px) {
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer[data-sf-free] {
    left:var(--sfw-x)!important; top:var(--sfw-y)!important; bottom:auto!important;
    width:var(--sfw-w)!important; height:var(--sfw-h)!important;
  }
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer .ai-head {cursor:move; touch-action:none; user-select:none;}
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer :is(.ai-resize,.flux-edge-corner) {display:block!important;}
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer .ai-resize {left:0;}
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer .flux-edge-corner {
    position:absolute; right:0; bottom:0; width:22px; height:22px; z-index:3; cursor:nwse-resize; touch-action:none;
    border:0; border-right:2px solid rgba(160,196,255,.4); border-bottom:2px solid rgba(160,196,255,.4); border-radius:0 0 23px 0; transition:border-color .15s;
  }
  html:root.sf-stage:not(.sf-stack)[data-skin] body #ai-drawer .flux-edge-corner:hover,
  body.ai-resizing #ai-drawer .flux-edge-corner {border-color:var(--pri);}
}
body.ai-moving {cursor:move; user-select:none;}
body.ai-moving iframe, body.ai-moving .chart {pointer-events:none;}
/* 舞台上的面板要透得出后面的星空。星点只有 1～3px，虚化一过 3px 就整片抹平（原来 26～30px 加六七成深色底，面板里一片死黑）：
 * 底色压到两三成（带一点蓝，玻璃自己有点亮度），虚化只留 1.5px，星点化成柔光点仍看得见在漂。亮色舞台维持原来的浅色玻璃。
 * 虚化里不加提亮 / 加饱和：面板淡入期间（opacity<1）浏览器不给它算背后的画面，这两项要等淡入结束才一下子生效，实测面板里亮度突跳 22%；纯虚化没有这个台阶。
 * 这层玻璃画在 ::before 上、不画在面板自己身上：带 backdrop-filter 的元素会把子元素的虚化「关在自己里面」，
 * 面板自己带了虚化，里面的字底再加虚化就只糊得到面板的底色、糊不到星空（实测星点照样从字底下透过去）。 */
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer {
  background:transparent!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
  /* 面板里所有「字的底」都取这几个变量（提示词、气泡、代码、表头、确认卡、输入框…），在舞台上一起换成半透明 */
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.055); --panel-3:rgba(255,255,255,.075); --hover:rgba(125,211,252,.12);
  --sfg-rim:rgba(190,215,255,.16); --sfg-frost:blur(12px);
}
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg,rgba(24,44,104,.24),rgba(8,14,36,.34));
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
}
/* 淡入淡出不能靠面板自己的 opacity：opacity<1 的元素同样会把里面的虚化「关起来」，玻璃要等淡入结束那一帧才突然生效
 *（放慢到 5 秒逐帧量过：结束那一帧整块变亮、星点突然变糊）。所以面板自己的不透明度始终是 1，
 * 让玻璃层（::before，自己的 opacity 不影响自己的虚化）和内容各自淡入，边框与投影用过渡显隐。 */
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer {
  opacity:1!important; border-color:transparent!important; box-shadow:none!important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),visibility 0s .55s,border-color .4s,box-shadow .4s!important;
}
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer.open {
  border-color:rgba(160,196,255,.16)!important; box-shadow:0 50px 120px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .55s cubic-bezier(.2,.8,.2,1) .08s,visibility 0s,border-color .4s .08s,box-shadow .4s .08s!important;
}
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer::before,
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer > * { opacity:0; transition:opacity .4s; }
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer.open::before,
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer.open > * { opacity:1; transition:opacity .4s .08s; }
/* 字的底 = 毛玻璃片：很淡的白底 + 细亮边 + 自己再虚化一层。字下面的星点被糊匀，读起来不花；片与片之间的空白处星空照常透出来。 */
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer :is(.ai-sugg button,.ai-msg .bubble,.ai-input textarea,.ai-confirm,.ai-chart-context,.ai-hello-tip,.ai-quote) {
  -webkit-backdrop-filter:var(--sfg-frost); backdrop-filter:var(--sfg-frost);
}
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer .ai-sugg button { border-color:var(--sfg-rim); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer .ai-sugg button:hover { background:rgba(125,211,252,.15); border-color:rgba(125,211,252,.5); }
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer :is(.ai-msg.bot .bubble,.ai-confirm,.ai-chart-context,.ai-hello-tip) {
  box-shadow:inset 0 0 0 1px var(--sfg-rim), inset 0 1px 0 rgba(255,255,255,.07);
}
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer .ai-quote { background:color-mix(in srgb,var(--pri) 13%,transparent); }
/* 自己说的话：主题色染过的玻璃（原来是实心主题色；沉浸档的主题色偏浅，白字压在上面对比不够） */
html:root.sf-stage[data-skin]:not([data-theme="light"]) body #ai-drawer .ai-msg.user .bubble {
  background:color-mix(in srgb,var(--pri) 46%,transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.14);
}
@media(max-width:899px) {
  html:root.sf-stage[data-skin] body #ai-drawer {left:0!important;right:0!important;bottom:0!important;width:100%!important;border-radius:22px 22px 0 0!important;}
}
/* Alice 的亮色语义 token；避免受 Flux 当前皮肤的同名 token 影响。 */
html.sf[data-theme="light"] {
  --cy:#0a6680; --vi:#6d28d9; --pk:#9d174d; --gr:#065f46; --am:#92400e; --rd:#a61b1b;
  --am-rgb:245,158,11; --cy-rgb:6,182,212; --gr-rgb:16,185,129; --pk-rgb:236,72,153; --rd-rgb:239,68,68; --vi-rgb:139,92,246;
}
/* Flux 额外要求「我的图表」入口；窄屏工具换行，避免新增按钮把经典界面挤出视口。 */
html.sf-narrow .sf-top { flex-wrap:wrap; }
html.sf-narrow .sf-tools { margin-left:auto; }