/* ============ 重置 & 设计 Token ============ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  /* 颜色系统（按千问截图还原） */
  --color-background:#FFFFFF;      /* 主背景纯白 */
  --color-surface:#F7F8FA;          /* 次级背景 */
  --color-surface-2:#F2F3F5;        /* hover 背景 */
  --color-border:#E5E6EB;           /* 边框 */
  --color-border-light:#F2F3F5;     /* 轻边框 */
  --color-text-primary:#1D2129;     /* 主文字 */
  --color-text-secondary:#4E5969;   /* 次级文字 */
  --color-text-tertiary:#86909C;    /* 三级文字 */
  --color-text-placeholder:#C9CDD4;/* 占位符 */
  --color-primary:#4E6EF2;          /* 千问蓝紫 */
  /* 算力纹路的氛围色：白天偏暖（日光），夜间偏冷（月色） */
  --aura-tint:#E8A33C;
  --color-primary-light:#E8ECFE;    /* 标签背景 */
  --color-primary-hover:#3D5AE8;
  --color-dark:#1D2129;             /* 黑色按钮 */
  --color-danger:#F53F3F;
  --color-success:#00B42A;

  /* 图鉴缩略图的科幻轮廓：一道贴边细环 + 外侧柔辉。抽成变量，
     是因为亮/暗两套主题 + 悬停态共四处要写同一组值，散着写容易走形。 */
  --ring-1:color-mix(in srgb,var(--color-primary) 62%,transparent);
  --ring-2:color-mix(in srgb,var(--color-primary) 58%,transparent);
  --ring-3:rgba(0,0,0,.34);

  /* 间距系统（8px 网格） */  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:20px;
  --space-2xl:24px;
  --space-3xl:32px;

  /* 圆角系统 */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:24px;
  --radius-full:9999px;

  /* 布局 */
  --sidebar-w:260px;
  --topbar-h:56px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
  --shadow-input:0 2px 12px rgba(78,110,242,.06), 0 1px 3px rgba(0,0,0,.04);

  /* 兼容旧变量名 */
  --bg:var(--color-surface);
  --surface:var(--color-background);
  --border:var(--color-border);
  --text:var(--color-text-primary);
  --text-2:var(--color-text-secondary);
  --text-3:var(--color-text-tertiary);
  --primary:var(--color-primary);
  --primary-soft:var(--color-primary-light);
  --radius:var(--radius-md);

  /* 桌面伴侣 / 时钟主题色（亮色） */
  --widget-bg:rgba(255,255,255,.7);
  --widget-border:rgba(0,0,0,.06);
  --widget-shadow:0 4px 16px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
  --clock-color:var(--color-text-primary);
  --clock-accent:var(--color-primary);

  /* 浮起面板色（按钮/输入框/下拉菜单/弹窗等实底元素） */
  --color-surface-raised:#FFFFFF;
  --danger-soft:#FDE7E7;
  --scrollbar-thumb:#E5E6EB;

  /* 算力小游戏 · 毛玻璃：面板半透明，边缘走渐变描边 */
  --game-glass:color-mix(in srgb,var(--color-background) 72%,transparent);
  --game-glass-left:color-mix(in srgb,var(--color-surface) 54%,transparent);
  --game-glass-card:color-mix(in srgb,var(--color-surface) 76%,transparent);
  --game-veil:rgba(18,20,26,.34);
}

/* ============ 暗黑模式 ============ */
:root[data-theme="dark"]{
  --color-background:#1A1B1E;
  --color-surface:#232427;
  --color-surface-2:#2C2E33;
  --color-border:#3A3C40;
  --color-border-light:#2C2E33;
  --color-text-primary:#F2F3F5;
  --color-text-secondary:#C9CDD4;
  --color-text-tertiary:#86909C;
  --color-text-placeholder:#5C6066;
  --color-primary:#615CED;
  --color-primary-light:rgba(97,92,237,.18);
  --color-dark:#F2F3F5;
  --aura-tint:#63A9F2;

  /* 暗底上亮环容易发灰，暗色主题整体抬一档强度 */
  --ring-1:color-mix(in srgb,var(--color-primary) 78%,transparent);
  --ring-2:color-mix(in srgb,var(--color-primary) 70%,transparent);
  --ring-3:rgba(0,0,0,.5);

  --bg:var(--color-surface);
  --surface:var(--color-background);
  --border:var(--color-border);
  --text:var(--color-text-primary);
  --text-2:var(--color-text-secondary);
  --text-3:var(--color-text-tertiary);
  --primary:var(--color-primary);
  --primary-soft:var(--color-primary-light);

  /* 桌面伴侣 / 时钟主题色（暗色） */
  --widget-bg:rgba(44,46,51,.6);
  --widget-border:rgba(255,255,255,.06);
  --widget-shadow:0 4px 16px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
  --clock-color:#F2F3F5;
  --clock-accent:#615CED;

  /* 浮起面板色（比侧边栏略亮、比纯白柔和，暗色下不刺眼） */
  --color-surface-raised:#2A2C31;
  --danger-soft:rgba(248,113,113,.16);
  --scrollbar-thumb:#41434A;

  /* 暗色：玻璃更透，靠模糊与描边维持层次 */
  --game-glass:color-mix(in srgb,var(--color-background) 52%,transparent);
  --game-glass-left:color-mix(in srgb,var(--color-surface) 40%,transparent);
  --game-glass-card:color-mix(in srgb,var(--color-surface) 62%,transparent);
  --game-veil:rgba(0,0,0,.5);
}

/* 跟随系统主题（未手动设置时） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-background:#1A1B1E;
    --color-surface:#232427;
    --color-surface-2:#2C2E33;
    --color-border:#3A3C40;
    --color-border-light:#2C2E33;
    --color-text-primary:#F2F3F5;
    --color-text-secondary:#C9CDD4;
    --color-text-tertiary:#86909C;
    --color-text-placeholder:#5C6066;
    --color-primary:#615CED;
    --color-primary-light:rgba(97,92,237,.18);
    --color-dark:#F2F3F5;
    --aura-tint:#63A9F2;

    --ring-1:color-mix(in srgb,var(--color-primary) 78%,transparent);
    --ring-2:color-mix(in srgb,var(--color-primary) 70%,transparent);
    --ring-3:rgba(0,0,0,.5);

    --bg:var(--color-surface);
    --surface:var(--color-background);
    --border:var(--color-border);
    --text:var(--color-text-primary);
    --text-2:var(--color-text-secondary);
    --text-3:var(--color-text-tertiary);
    --primary:var(--color-primary);
    --primary-soft:var(--color-primary-light);

    --widget-bg:rgba(44,46,51,.6);
    --widget-border:rgba(255,255,255,.06);
    --widget-shadow:0 4px 16px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.2);
    --clock-color:#F2F3F5;
    --clock-accent:#615CED;

    --color-surface-raised:#2A2C31;
    --danger-soft:rgba(248,113,113,.16);
    --scrollbar-thumb:#41434A;

    /* 暗色：玻璃更透，靠模糊与描边维持层次 */
    --game-glass:color-mix(in srgb,var(--color-background) 52%,transparent);
    --game-glass-left:color-mix(in srgb,var(--color-surface) 40%,transparent);
    --game-glass-card:color-mix(in srgb,var(--color-surface) 62%,transparent);
    --game-veil:rgba(0,0,0,.5);
  }
}
html,body{height:100%}
body{
  font-family:'PingFang SC','Microsoft YaHei','Inter',-apple-system,sans-serif;
  background:var(--color-background);
  color:var(--color-text-primary);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#C9CDD4}

/* ============ 布局 ============ */
#app{display:flex;height:100vh;width:100vw}

/* ============ 侧边栏 ============ */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--color-surface);
  border-right:1px solid var(--color-border-light);
  display:flex;
  flex-direction:column;
  transition:width .25s ease, margin-left .25s ease;
  height:100vh;
  overflow:hidden;
}
/* 收起：仅用负 margin 把侧边栏滑出（width:0 会叠加负偏移把整个主区域拖出屏幕） */
.sidebar.collapsed{margin-left:calc(var(--sidebar-w) * -1)}

/* 顶部 Logo + 搜索 */
.sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px var(--space-lg);
  flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{display:flex}
.brand-name{font-size:18px;font-weight:700;color:var(--color-text-primary);letter-spacing:.5px}
.head-icons{display:flex;gap:4px}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-sm);
  color:var(--color-text-secondary);
  transition:background .15s, color .15s;
}
.icon-btn:hover{background:var(--color-surface-2);color:var(--color-text-primary)}

/* 新建对话按钮 */
.new-chat-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:calc(100% - 32px);
  margin:0 var(--space-lg) var(--space-md);
  padding:9px 14px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:13px;
  color:var(--color-text-primary);
  font-weight:500;
  box-shadow:var(--shadow-sm);
  transition:all .15s;
}
.new-chat-btn:hover{
  background:var(--color-surface-2);
  border-color:var(--color-primary);
  color:var(--color-primary);
}

/* 侧边栏可滚动内容区（桌面伴侣 + 功能菜单 + 对话列表） */
.sidebar-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
}
/* 美化滚动条 */
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--color-text-tertiary);
}
.sidebar-scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
}

/* ============ 桌面伴侣插件区 ============ */
.widget-panel{
  margin:0 var(--space-lg) var(--space-md);
  padding:var(--space-md);
  background:var(--widget-bg);
  border:1px solid var(--widget-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--widget-shadow);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.widget-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.widget-title{
  font-size:11px;
  font-weight:600;
  color:var(--color-text-tertiary);
  letter-spacing:.5px;
  text-transform:uppercase;
}
.theme-toggle{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;
  border-radius:var(--radius-sm);
  color:var(--color-text-tertiary);
  cursor:pointer;
  transition:all .2s;
}
.theme-toggle:hover{
  background:var(--color-surface-2);
  color:var(--color-primary);
}
.theme-toggle .icon-sun{display:block}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ============ 极简数字时钟 ============ */
.clock-card{
  text-align:center;
  padding:var(--space-sm) 0 2px;
}
.clock-time{
  font-family:'SF Mono','Monaco','Consolas','Roboto Mono',monospace;
  font-size:24px;
  font-weight:600;
  color:var(--clock-color);
  letter-spacing:1px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  transition:color .3s;
}
.clock-time .colon{
  color:var(--clock-accent);
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{
  to{opacity:.3}
}
.clock-date{
  font-size:11px;
  color:var(--color-text-tertiary);
  margin-top:4px;
  letter-spacing:.3px;
  transition:color .3s;
}

/* ============ 网易云唱片机（复古黑胶） ============ */
.netease-player{
  margin-top:var(--space-md);
  padding-top:var(--space-md);
  border-top:1px dashed var(--widget-border);
}
.np-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.np-title{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  color:var(--color-text-secondary);
  letter-spacing:.5px;
}
.np-icon{color:var(--clock-accent)}

/* 黑胶舞台 */
.vinyl-stage{
  position:relative;
  width:100%;
  aspect-ratio:2/1;
  margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(0,0,0,.12), transparent 70%);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.vinyl{
  position:relative;
  width:72%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle, #1a1a1a 0px, #1a1a1a 2px, #2a2a2a 2px, #2a2a2a 3px),
    radial-gradient(circle, #333, #111);
  box-shadow:
    0 0 0 2px #0d0d0d,
    0 4px 14px rgba(0,0,0,.45),
    inset 0 0 20px rgba(0,0,0,.6);
  transition:transform .4s ease;
}
.vinyl.spinning{
  animation:vinylSpin 4s linear infinite;
}
@keyframes vinylSpin{
  to{transform:rotate(360deg)}
}
.vinyl-groove{
  position:absolute;inset:18%;
  border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0px, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 4px);
  pointer-events:none;
}
.vinyl-label{
  position:absolute;inset:34%;
  border-radius:50%;
  background:var(--clock-accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
.vinyl-song{
  font-size:9px;font-weight:600;color:#fff;
  max-width:90%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;
}
.vinyl-sub{
  font-size:7px;color:rgba(255,255,255,.75);
  margin-top:1px;letter-spacing:.5px;
}
.vinyl-center{
  position:absolute;top:50%;left:50%;
  width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:#0d0d0d;
  box-shadow:inset 0 0 0 1px #333;
  z-index:2;
}
/* 唱针 */
.tonearm{
  position:absolute;top:6%;right:10%;
  width:4px;height:42%;
  background:linear-gradient(#bbb,#888);
  border-radius:2px;
  transform-origin:top center;
  transform:rotate(35deg);
  transition:transform .5s ease;
  z-index:3;
}
.tonearm::before{
  content:'';position:absolute;top:-4px;left:50%;
  width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:#999;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.tonearm-head{
  position:absolute;bottom:-4px;left:50%;
  width:6px;height:8px;margin-left:-3px;
  background:#555;border-radius:1px;
}
.vinyl-stage.playing .tonearm{
  transform:rotate(8deg);
}

/* APlayer 播放器容器 */
.np-frame{
  width:100%;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--color-surface);
  border:1px solid var(--widget-border);
  margin-bottom:8px;
  transition:all .3s;
}
.aplayer-box{
  width:100%;
}
/* APlayer 主题色与暗黑模式适配 */
.aplayer{
  background:var(--color-surface) !important;
  font-family:inherit !important;
}
.aplayer .aplayer-info{
  border-color:var(--widget-border) !important;
}
.aplayer .aplayer-title{
  color:var(--color-text-primary) !important;
}
.aplayer .aplayer-author{
  color:var(--color-text-secondary) !important;
}
.aplayer .aplayer-time{
  color:var(--color-text-tertiary) !important;
}
.aplayer .aplayer-icon{
  color:var(--color-text-secondary) !important;
}
.aplayer .aplayer-icon:hover{
  color:var(--clock-accent) !important;
}
.aplayer .aplayer-list ol li{
  border-color:var(--widget-border) !important;
  color:var(--color-text-secondary) !important;
}
.aplayer .aplayer-list ol li:hover{
  background:var(--color-surface-2) !important;
}
.aplayer .aplayer-list ol li.aplayer-list-light{
  background:var(--color-primary-light) !important;
  color:var(--clock-accent) !important;
}
:root[data-theme="dark"] .aplayer{
  background:var(--color-surface-2) !important;
}
:root[data-theme="dark"] .np-frame{
  background:var(--color-surface-2);
}

/* 输入行 */
.np-input-row{
  display:flex;align-items:center;gap:6px;
}
.np-input{
  flex:1;min-width:0;
  height:30px;
  padding:0 10px;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-text-primary);
  font-size:12px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.np-input::placeholder{color:var(--color-text-placeholder)}
.np-input:focus{
  border-color:var(--clock-accent);
  box-shadow:0 0 0 3px var(--color-primary-light);
}
.np-btn{
  flex-shrink:0;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:var(--clock-accent);
  color:#fff;
  transition:transform .15s, opacity .2s;
}
.np-btn:hover{transform:scale(1.06)}
.np-btn:active{transform:scale(.94)}
.np-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.np-tip{
  margin-top:5px;
  font-size:10px;
  color:var(--color-text-tertiary);
  letter-spacing:.2px;
}
.np-tip.error{color:#F53F3F}

/* ============ 播放历史按钮 ============ */
.np-history-btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border:none;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-text-secondary);
  cursor:pointer;
  transition:background .2s, color .2s;
}
.np-history-btn:hover{
  background:var(--color-surface-2);
  color:var(--clock-accent);
}

/* ============ 播放历史侧边栏 ============ */
.mh-overlay{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.3);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
  z-index:9998;
}
.mh-overlay.show{
  opacity:1;pointer-events:auto;
}
.mh-sidebar{
  position:fixed;top:0;right:0;
  width:300px;height:100vh;
  background:var(--color-background);
  border-left:1px solid var(--color-border);
  box-shadow:-4px 0 24px rgba(0,0,0,.08);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:9999;
  display:flex;flex-direction:column;
}
.mh-sidebar.open{
  transform:translateX(0);
}
.mh-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--color-border-light);
  flex-shrink:0;
}
.mh-title{
  font-size:15px;font-weight:600;
  color:var(--color-text-primary);
}
.mh-clear-btn{
  font-size:12px;
  border:none;
  background:transparent;
  color:var(--color-text-tertiary);
  cursor:pointer;
  padding:4px 10px;
  border-radius:var(--radius-sm);
  transition:background .2s, color .2s;
}
.mh-clear-btn:hover{
  background:var(--color-surface-2);
  color:#F53F3F;
}
.mh-list{
  flex:1;
  min-height:0;          /* flexbox 滚动必需：允许子项收缩 */
  overflow-y:auto;
  padding:8px 0;
}
/* 美化滚动条 — 细窄半透明风格 */
.mh-list::-webkit-scrollbar{width:5px}
.mh-list::-webkit-scrollbar-track{background:transparent}
.mh-list::-webkit-scrollbar-thumb{
  background:var(--color-border);
  border-radius:3px;
}
.mh-list::-webkit-scrollbar-thumb:hover{
  background:var(--color-text-tertiary);
}
/* Firefox 兼容 */
.mh-list{
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
}
.mh-empty{
  padding:40px 0;
  text-align:center;
  font-size:13px;
  color:var(--color-text-tertiary);
}
.mh-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  cursor:pointer;
  transition:background .15s;
}
.mh-item:hover{
  background:var(--color-surface-2);
}
.mh-cover{
  width:40px;height:40px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  background:var(--color-surface-2);
}
.mh-info{
  flex:1;min-width:0;
}
.mh-name{
  font-size:13px;font-weight:500;
  color:var(--color-text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mh-artist{
  font-size:11px;
  color:var(--color-text-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;
}
.mh-play{
  flex-shrink:0;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;
  background:var(--clock-accent);
  color:#fff;
  cursor:pointer;
  opacity:0;
  transition:opacity .2s, transform .15s;
}
.mh-item:hover .mh-play{
  opacity:1;
}
.mh-play:hover{transform:scale(1.1)}

/* 暗黑模式适配 */
:root[data-theme="dark"] .mh-sidebar{
  box-shadow:-4px 0 24px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .mh-overlay{
  background:rgba(0,0,0,.5);
}

/* 暗黑模式微调 */
:root[data-theme="dark"] .vinyl-label{box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
:root[data-theme="dark"] .np-frame{background:var(--color-surface-2)}

/* 功能菜单 */
.side-nav{padding:0 var(--space-sm) var(--space-md);flex-shrink:0}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:8px var(--space-md);
  border-radius:var(--radius-sm);
  font-size:13px;
  color:var(--color-text-secondary);
  cursor:pointer;
  transition:background .15s, color .15s;
  position:relative;
  margin-bottom:2px;
}
.nav-item:hover{background:var(--color-surface-2);color:var(--color-text-primary)}
.nav-item.active{background:var(--color-primary-light);color:var(--color-primary);font-weight:500}
.nav-item.active::before{content:'';position:absolute;left:4px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--color-primary)}

/* 分组板块 */
.side-section{padding:0 var(--space-lg) var(--space-sm);flex-shrink:0}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.section-head span{font-size:12px;color:var(--color-text-tertiary);font-weight:500}
.add-link{
  font-size:11px;color:var(--color-text-tertiary);
  padding:2px 4px;border-radius:var(--radius-sm);
}
.add-link:hover{color:var(--color-primary);background:var(--color-surface-2)}

/* 对话历史 */
/* 修复：历史面板不再参与 flex 压缩（此前 flex:1 + min-height:0 会被高大的
   桌面伴侣组件挤到 0 高度，导致"最近对话"在笔记本屏/系统缩放下不可见）。
   现在：历史面板保持内容自然高度，超出的部分由 .sidebar-scroll 整体滚动。 */
.history-panel{display:flex;flex-direction:column;margin-top:var(--space-sm);flex-shrink:0}
.history-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-xl) var(--space-sm);
  font-size:11px;color:var(--color-text-tertiary);font-weight:500;letter-spacing:.3px;
}
/* 历史列表：不再 flex:1 抢占剩余空间，改为内容自适应 + 上限滚动，
   保证在任何屏幕高度下至少能看到若干条记录 */
.history-list{max-height:45vh;overflow-y:auto;padding:0 var(--space-sm)}
.history-item{
  padding:8px var(--space-md);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background .12s;
  margin-bottom:2px;
  position:relative;
}
.history-item:hover{background:var(--color-surface-2)}
.history-item.active{background:var(--color-surface-2)}
.history-item .h-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.history-item .h-text{min-width:0;flex:1;display:flex;align-items:center;gap:4px}
.history-item .h-title{font-size:13px;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item .h-title-edit{width:100%;font-size:13px;color:var(--color-text-primary);border:1px solid var(--color-primary);border-radius:var(--radius-sm);padding:2px 4px;outline:none;background:var(--color-surface-raised)}
.history-item .h-time{font-size:11px;color:var(--color-text-tertiary);margin-top:2px}
.history-item .h-pin{font-size:10px;color:var(--color-primary)}
.history-item .h-more{opacity:0;transition:opacity .12s;cursor:pointer;color:var(--color-text-tertiary);padding:2px;border-radius:var(--radius-sm);flex-shrink:0}
.history-item:hover .h-more{opacity:1}
.history-item .h-more:hover{background:rgba(0,0,0,.06);color:var(--color-text-primary)}
.history-item .h-dropdown{position:absolute;top:32px;right:8px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;min-width:96px;z-index:50;display:none}
.history-item .h-dropdown.show{display:block}
.history-item .h-dropdown-item{padding:6px 10px;font-size:12px;color:var(--color-text-primary);cursor:pointer;border-radius:var(--radius-sm)}
.history-item .h-dropdown-item:hover{background:var(--color-surface-2)}
.history-item .h-dropdown-item.danger{color:var(--color-danger)}
.history-item .h-dropdown-item.danger:hover{background:var(--danger-soft)}

/* 联网搜索状态标签（显示在 AI 回复气泡顶部） */
.search-info{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--color-text-secondary);
  background:var(--color-surface-2);border-radius:999px;
  padding:3px 10px;margin-bottom:8px;
}
.search-info.warn{color:var(--color-danger);background:var(--danger-soft)}

/* ============ 对话分组 ============ */
.group-list{padding:0 var(--space-sm) 4px}
.group-item{
  display:flex;align-items:center;gap:8px;
  padding:7px var(--space-md);margin-bottom:2px;
  border-radius:var(--radius-sm);cursor:pointer;
  font-size:13px;color:var(--color-text-secondary);
  transition:background .12s;position:relative;
}
.group-item:hover{background:var(--color-surface-2)}
.group-item.active{background:var(--color-surface-2);color:var(--color-primary);font-weight:500}
.group-item .g-icon{font-size:13px;flex-shrink:0}
.group-item .g-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-item .g-count{
  font-size:11px;color:var(--color-text-tertiary);
  background:var(--color-surface-2);border-radius:999px;padding:0 7px;line-height:18px;flex-shrink:0;
}
.group-item .g-more{
  opacity:0;transition:opacity .12s;cursor:pointer;
  color:var(--color-text-tertiary);padding:2px;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;
}
.group-item:hover .g-more{opacity:1}
.group-item .g-dropdown{
  position:absolute;top:30px;right:8px;background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;min-width:88px;z-index:60;display:none;
}
.group-item .g-dropdown.show{display:block}
.group-item .g-dropdown-item{padding:6px 10px;font-size:12px;color:var(--color-text-primary);cursor:pointer;border-radius:var(--radius-sm)}
.group-item .g-dropdown-item:hover{background:var(--color-surface-2)}
.group-item .g-dropdown-item.danger{color:var(--color-danger)}
.group-item .g-dropdown-item.danger:hover{background:var(--danger-soft)}
.group-empty{padding:6px var(--space-md);font-size:12px;color:var(--color-text-tertiary)}

/* ============ 定时任务 ============ */
.task-list{padding:0 var(--space-sm) 4px}
.task-item{
  display:flex;align-items:center;gap:8px;
  padding:7px var(--space-md);margin-bottom:2px;
  border-radius:var(--radius-sm);cursor:default;
  font-size:13px;color:var(--color-text-secondary);position:relative;
}
.task-item:hover{background:var(--color-surface-2)}
.task-item .t-icon{flex-shrink:0}
.task-item .t-body{flex:1;min-width:0}
.task-item .t-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-item .t-meta{font-size:11px;color:var(--color-text-tertiary);margin-top:1px}
.task-item.disabled .t-name{text-decoration:line-through;color:var(--color-text-tertiary)}
.task-item .t-toggle{
  width:28px;height:16px;border-radius:999px;background:var(--color-border);
  position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;border:none;padding:0;
}
.task-item .t-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.task-item .t-toggle.on{background:var(--color-primary)}
.task-item .t-toggle.on::after{left:14px}
.task-item .t-del{
  opacity:0;transition:opacity .12s;cursor:pointer;color:var(--color-text-tertiary);
  padding:2px;border-radius:var(--radius-sm);flex-shrink:0;display:flex;align-items:center;border:none;background:none;
}
.task-item:hover .t-del{opacity:1}
.task-item .t-del:hover{color:var(--color-danger);background:var(--danger-soft)}
.task-empty{padding:6px var(--space-md);font-size:12px;color:var(--color-text-tertiary)}

/* ============ 通用弹窗 ============ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1500;
  display:flex;align-items:center;justify-content:center;
}
.modal-overlay.hidden{display:none}
.modal-card{
  width:360px;max-width:90vw;background:var(--color-surface-raised);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:20px 22px;
}
.modal-title{font-size:15px;font-weight:600;color:var(--color-text-primary);margin-bottom:14px}
.modal-label{display:block;font-size:12px;color:var(--color-text-tertiary);margin:10px 0 4px}
.modal-input{
  width:100%;box-sizing:border-box;font-size:13px;color:var(--color-text-primary);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:7px 10px;outline:none;background:var(--color-surface-raised);font-family:inherit;resize:vertical;
}
.modal-input:focus{border-color:var(--color-primary)}
.modal-row{display:flex;gap:10px}
.modal-col{flex:1}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal-btn{
  font-size:13px;padding:7px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);background:var(--color-surface-raised);color:var(--color-text-primary);cursor:pointer;
}
.modal-btn:hover{background:var(--color-surface-2)}
.modal-btn.primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.modal-btn.primary:hover{opacity:.9;background:var(--color-primary)}

/* 底部用户区 */
.sidebar-foot{position:relative;border-top:1px solid var(--color-border-light);padding:var(--space-sm) var(--space-lg);flex-shrink:0}
.user-card{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:var(--radius-md);cursor:pointer;transition:background .15s}
.user-card:hover{background:var(--color-surface-2)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6B7CFF,#4E6EF2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
.user-meta{flex:1;min-width:0}
/* 名称行：名字与「算力待释放」同一行，名字过长时红字才被挤掉。
   用 nowrap 而不是换行 —— 让它退化成「右侧被裁」，
   视觉上仍是"贴在 ID 右边"，不会把这一行撑成两行。 */
.user-line{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.user-name{font-size:13px;font-weight:600;color:var(--color-text-primary);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* 「算力待释放」：算力**没到 ∞** 时一直显示的红字提醒。
   判据是 .sidebar-foot.pending（由 game.js 按实时算力切换），
   **不是 .liberated** —— 那个是「通关过」的一次性历史事实，
   回溯进新周目后算力归零、红字必须回来，两者不能绑在一起。

   尺寸是按「可用空间」倒推的，不是拍的：名字右缘 129.7 → 卡片右缘 239，
   空余 109.3px。13px/700 + .02em 实测宽约 70px，留 39px 余量，
   即使 ID 变长（现在 Qwen2605）也不会把红字顶出卡片。
   够醒目靠三件事叠加：字号↑ + 字重↑ + 冷白描边（暗色底上红字最大的问题是「发闷」）。 */
.user-hint{font-size:13px;font-weight:700;color:#E5484D;flex:0 0 auto;letter-spacing:.02em;
  line-height:1.1;
  text-shadow:
    0 0 1px color-mix(in srgb,#FFF 42%,transparent),
    0 0 8px color-mix(in srgb,#E5484D 46%,transparent);
  animation:hintPulse 2.4s ease-in-out infinite;}
@keyframes hintPulse{
  0%,100%{opacity:1}
  50%{opacity:.72}
}
@media (prefers-reduced-motion: reduce){
  .user-hint{animation:none}
}
.user-plan{font-size:11px;color:var(--color-text-tertiary)}

/* 算力达 ∞ 后红字消失 —— 用 display:none 真正移出布局，
   右侧不留空隙，避免"消失但留个坑"的观感 */
.sidebar-foot:not(.pending) .user-hint{display:none}

/* ============ 首次通关解锁：炫彩头像 + 「算力解放」 ============
   由 game.js 在 everFinished() 为真时给 .sidebar-foot 加 .liberated 类。
   整组效果只挂在 .liberated 之下 —— 没通关的用户看到的就是原来的普通头像。

   头像的做法：**直接把底色换成彩虹本身**，不是在外面套一圈彩色环。
   （先做过"外圈彩虹 + 内圈蓝底"的版本，观感是"蓝头像镶了道彩虹边"，
     和「头像底色的蓝变成炫彩」不是一回事，已废弃。）
   用 conic-gradient 铺满整个圆 —— 线性渐变在圆上只有一段色可见，
   conic 才能绕一圈把所有颜色铺开，转起来才有"炫彩流动"的感觉。 */
.sidebar-foot.liberated .avatar{
  background:conic-gradient(from 0deg,#5B8CFF,#7B5BFF,#C85BFF,#FF5BB0,#FF8A5B,#FFCC5B,#5BE0A0,#5BE0FF,#5B8CFF);
  animation:liberateSpin 6s linear infinite;
  box-shadow:0 0 0 1px color-mix(in srgb,#7B5BFF 38%,transparent),
             0 2px 12px -2px color-mix(in srgb,#C85BFF 58%,transparent);
}
/* 扫光：一道白光斜掠过盘面，让"这是活的"更明确。
   用圆形遮罩只留盘面（否则矩形高光会露出方角）。 */
.sidebar-foot.liberated .avatar::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  animation:liberateSheen 3.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes liberateSpin{to{transform:rotate(360deg)}}
@keyframes liberateSheen{
  0%{opacity:0;transform:translateX(-40%)}
  20%{opacity:.9}
  55%{opacity:.25;transform:translateX(40%)}
  100%{opacity:0;transform:translateX(40%)}
}

/* 「算力解放」：文案本身用渐变字 + 轻微呼吸光，与普通「免费版」一眼区分 */
.sidebar-foot.liberated .user-plan{
  font-weight:700;
  letter-spacing:.02em;
  background:linear-gradient(92deg,#5B8CFF,#A45BFF,#FF5BB0,#FFA45B,#5B8CFF);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:liberateFlow 5.5s linear infinite;
  filter:drop-shadow(0 0 5px color-mix(in srgb,#A45BFF 40%,transparent));
}
@keyframes liberateFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}

/* 用户名也跟着沾一点光（很轻，别抢「算力解放」的戏） */
.sidebar-foot.liberated .user-name{
  color:color-mix(in srgb,var(--color-text-primary) 82%,#A45BFF);
}

/* 暗色主题：把彩虹调亮一档，否则深底上会发闷、显脏 */
:root[data-theme="dark"] .sidebar-foot.liberated .avatar{
  background:conic-gradient(from 0deg,#7FA8FF,#A48CFF,#E08CFF,#FF8CC8,#FFB08C,#FFE08C,#8CFFC4,#8CE8FF,#7FA8FF);
  box-shadow:0 0 0 1px color-mix(in srgb,#B08CFF 48%,transparent),
             0 2px 14px -1px color-mix(in srgb,#C85BFF 62%,transparent);
}
:root[data-theme="dark"] .sidebar-foot.liberated .user-plan{
  background-image:linear-gradient(92deg,#7FA8FF,#C48CFF,#FF8CC8,#FFC48C,#7FA8FF);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sidebar-foot.liberated .avatar{
    background:conic-gradient(from 0deg,#7FA8FF,#A48CFF,#E08CFF,#FF8CC8,#FFB08C,#FFE08C,#8CFFC4,#8CE8FF,#7FA8FF);
    box-shadow:0 0 0 1px color-mix(in srgb,#B08CFF 48%,transparent),
               0 2px 14px -1px color-mix(in srgb,#C85BFF 62%,transparent);
  }
  :root:not([data-theme="light"]) .sidebar-foot.liberated .user-plan{
    background-image:linear-gradient(92deg,#7FA8FF,#C48CFF,#FF8CC8,#FFC48C,#7FA8FF);
  }
}

/* 尊重"减少动态效果"：静态炫彩照给，但不再旋转 / 扫光 / 流动 */
@media (prefers-reduced-motion: reduce){
  .sidebar-foot.liberated .avatar{animation:none}
  .sidebar-foot.liberated .avatar::after{animation:none;opacity:0}
  .sidebar-foot.liberated .user-plan{animation:none;background-position:0 50%}
}

/* ============ 署名入口（侧边栏左下角） ============
   解锁改名权限后常驻；通关过一周目后，游戏面板内的署名区域不再出现，
   改名统一走这里的浮层。 */
.sign-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:5px 8px;margin-bottom:6px;
  border:1px dashed var(--color-border);border-radius:var(--radius-md);
  background:transparent;color:var(--color-text-tertiary);
  font-size:12px;font-family:inherit;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.sign-btn:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-surface-2)}
.sign-btn[hidden]{display:none}
.sign-btn svg{flex-shrink:0}

.sign-pop{
  position:absolute;left:var(--space-lg);right:var(--space-lg);
  /* 紧贴署名按钮上沿弹出（foot 有 padding-top，所以用负值抵消） */
  bottom:calc(100% - 3px);z-index:30;
  padding:10px;border-radius:var(--radius-md);
  background:var(--color-surface);border:1px solid var(--color-border);
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(4px);
  transition:opacity .16s,transform .16s;
}
/* 指向下方署名按钮的小箭头，强化「从按钮弹出」的关联 */
.sign-pop::after{
  content:'';position:absolute;left:50%;bottom:-5px;
  width:9px;height:9px;margin-left:-5px;
  transform:rotate(45deg);
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.sign-pop.is-open{opacity:1;transform:none}
.sign-pop[hidden]{display:none}
.sign-pop-title{font-size:12px;font-weight:600;color:var(--color-text-primary);margin-bottom:8px}
.sign-pop-form{display:flex;gap:6px}
.sign-pop-input{
  flex:1;min-width:0;padding:6px 8px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text-primary);
  font-size:12px;font-family:inherit;outline:none;transition:border-color .15s;
}
.sign-pop-input:focus{border-color:var(--color-primary)}
.sign-pop-btn{
  padding:6px 12px;border:none;border-radius:var(--radius-sm);
  background:var(--color-primary);color:#fff;font-size:12px;font-family:inherit;cursor:pointer;
}
.sign-pop-btn:hover{opacity:.9}

/* ============ 主区域 ============ */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--color-background);
  min-width:0;
  height:100vh;
}

/* 顶部导航 */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--space-2xl);
  border-bottom:1px solid var(--color-border-light);
  flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:var(--space-md)}
.topbar-right{display:flex;align-items:center;gap:var(--space-lg)}
.top-link{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--color-text-secondary);
  padding:6px 10px;border-radius:var(--radius-sm);
  transition:color .15s, background .15s;
}
.top-link:hover{color:var(--color-text-primary);background:var(--color-surface-2)}
.avatar-icon{width:32px;height:32px;border-radius:50%;background:var(--color-surface-2)}
.avatar-icon:hover{background:var(--color-border-light)}

/* 模型选择器 */
.model-switcher{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  font-size:14px;font-weight:500;
  color:var(--color-text-primary);
  transition:background .15s;
  position:relative;
}
.model-switcher:hover{background:var(--color-surface-2)}
.model-switcher .dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary)}
.model-switcher .model-name{font-weight:500}
.model-menu{
  position:absolute;top:calc(100% + 4px);left:0;
  background:var(--color-surface-raised);border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:4px;min-width:200px;
  display:none;z-index:100;
}
.model-menu.show{display:block}
.m-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;font-size:13px;
  color:var(--color-text-primary);cursor:pointer;
  border-radius:var(--radius-sm);
}
.m-item:hover{background:var(--color-surface-2)}
.m-item.active{background:var(--color-primary-light);color:var(--color-primary)}
.m-item .dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary)}
.m-item .tag{margin-left:auto;font-size:10px;color:var(--color-text-tertiary);padding:2px 6px;background:var(--color-surface-2);border-radius:var(--radius-sm)}

/* ============ 对话区（Flex 纵向布局：内容区可滚动，输入框固定底部） ============ */
.chat-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;           /* 关键：允许子项收缩，避免内容把输入框挤出屏幕 */
  overflow:hidden;
  padding:0 var(--space-2xl);
}
/* 欢迎屏：占据剩余空间，内部可滚动 */
.welcome-screen{
  flex:1;
  min-height:0;           /* 关键：配合 flex:1 实现滚动 */
  overflow-y:auto;
  max-width:780px;
  width:100%;
  margin:0 auto;
  padding:80px 0 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
/* 欢迎头部：Logo + 文字水平居中 */
.welcome-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:var(--space-2xl);
}
.qwen-logo{display:flex;align-items:center;justify-content:center;line-height:0}
.greeting{
  font-size:28px;
  font-weight:600;
  color:var(--color-text-primary);
  letter-spacing:.5px;
  margin:0;
}
.sub-greeting{font-size:14px;color:var(--color-text-tertiary);margin-bottom:var(--space-2xl)}

/* ============ AI 超级输入框（固定在 chat-area 底部，不被压缩） ============ */
.composer-card{
  flex-shrink:0;           /* 关键：不允许被压缩，始终完整显示在底部 */
  width:100%;
  max-width:780px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-input);
  padding:var(--space-md) var(--space-lg) var(--space-sm);
  margin:var(--space-md) auto var(--space-xl);  /* 水平居中 + 上下间距 */
  transition:border-color .15s, box-shadow .15s;
}
.composer-card:focus-within{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(78,110,242,.08), var(--shadow-input);
}
.attach-previews{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.attach-previews:empty{display:none}
.attach-item{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px;background:var(--color-surface-2);
  border-radius:var(--radius-sm);font-size:12px;color:var(--color-text-secondary);
  cursor:pointer;
}
.attach-item:hover{background:var(--color-border-light)}

/* ============ 联网搜索勾选框 ============ */
.search-toggle{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;
  font-size:12px;color:var(--color-text-secondary);
  cursor:pointer;user-select:none;
  border-radius:var(--radius-sm);
  transition:background .15s;
  margin-bottom:4px;
  width:fit-content;
}
.search-toggle:hover{background:var(--color-surface-2)}
.search-toggle input{display:none}
.search-toggle-track{
  position:relative;
  width:30px;height:16px;
  background:var(--color-border);
  border-radius:8px;
  transition:background .2s;
  flex-shrink:0;
}
.search-toggle-thumb{
  position:absolute;top:2px;left:2px;
  width:12px;height:12px;
  background:#fff;border-radius:50%;
  transition:transform .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.search-toggle input:checked + .search-toggle-track{
  background:var(--color-primary);
}
.search-toggle input:checked + .search-toggle-track .search-toggle-thumb{
  transform:translateX(14px);
}
.search-toggle-label{font-weight:500}

/* 输入框预览区中的图片缩略图 */
.ac-thumb{
  width:32px;height:32px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);flex-shrink:0;
}

/* 附件解析状态：解析中 / 已读取 N 字 / 无法读取 */
.ac-status{
  font-size:11px;padding:1px 6px;border-radius:var(--radius-sm);
  white-space:nowrap;flex-shrink:0;
}
.ac-status.parsing{color:var(--color-primary);background:var(--color-primary-light)}
.ac-status.ok{color:#0F9960;background:rgba(15,153,96,.12)}
.ac-status.err{color:var(--color-danger);background:var(--danger-soft)}
:root[data-theme="dark"] .ac-status.ok{color:#4ADE80;background:rgba(74,222,128,.14)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ac-status.ok{color:#4ADE80;background:rgba(74,222,128,.14)}
}

/* 用户消息气泡中的图片画廊 */
.img-gallery{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:8px;
}
.img-thumb-wrap{
  display:flex;flex-direction:column;gap:4px;
  max-width:160px;
}
.img-thumb{
  width:140px;height:auto;max-height:140px;object-fit:cover;
  border-radius:var(--radius-md);
  border:1px solid var(--color-border);
  cursor:pointer;transition:transform .15s ease;
}
.img-thumb:hover{transform:scale(1.02)}
.img-meta{
  font-size:11px;color:var(--color-text-tertiary);
  word-break:break-all;line-height:1.3;
}

/* ============ "+" 弹出菜单 ============ */
.plus-menu{
  position:absolute;
  bottom:calc(100% + 8px);     /* 在 "+" 按钮上方 */
  left:0;
  min-width:240px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:6px;
  z-index:100;
  /* 默认隐藏 */
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.plus-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.pm-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  background:transparent;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  color:var(--color-text-primary);
  transition:background .12s ease;
  text-align:left;
}
.pm-item:hover{background:var(--color-surface-2)}
.pm-icon{font-size:16px;line-height:1;flex-shrink:0}
.pm-text{flex:1;font-weight:500}
.pm-hint{font-size:11px;color:var(--color-text-tertiary)}

.input{
  width:100%;
  border:none;outline:none;resize:none;
  background:transparent;
  font-family:inherit;font-size:15px;
  color:var(--color-text-primary);
  line-height:1.6;
  min-height:24px;
  max-height:240px;
  padding:4px 0;
}
.input::placeholder{color:var(--color-text-placeholder)}

/* 输入框底部工具栏 */
.composer-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-sm) 0 var(--space-xs);
  margin-top:var(--space-sm);
}
.ct-left{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;position:relative}
.ct-right{display:flex;align-items:center;gap:var(--space-sm)}
.ct-icon{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--radius-sm);
  color:var(--color-text-secondary);
  transition:background .15s, color .15s;
}
.ct-icon:hover{background:var(--color-surface-2);color:var(--color-text-primary)}

/* 胶囊按钮 */
.ct-chip{
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  font-size:12px;
  color:var(--color-text-secondary);
  transition:all .15s;
}
.ct-chip:hover{background:var(--color-surface-2);color:var(--color-text-primary);border-color:var(--color-border)}
.ct-chip.accent{
  background:var(--color-primary-light);
  border-color:transparent;
  color:var(--color-primary);
}
.ct-chip.accent .chip-tag{
  font-size:10px;color:#fff;background:var(--color-primary);
  padding:1px 5px;border-radius:var(--radius-sm);margin-left:2px;
}
/* 生图模式激活态（AI生图 chip 被打开时） */
.ct-chip.on{background:var(--color-primary-light);border-color:transparent;color:var(--color-primary);font-weight:500}

/* ---- AI 写作参数栏 ---- */
.write-toolbar{display:flex;gap:8px;padding:2px 14px 8px;flex-wrap:wrap}
.write-toolbar.hidden{display:none}
.w-dd{position:relative}
.w-dd-btn{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--color-text-2,var(--color-text-primary));background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:5px 10px;cursor:pointer}
.w-dd-btn:hover{border-color:var(--color-primary)}
.w-dd-menu{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:4px;min-width:132px;z-index:60;display:none;max-height:262px;overflow-y:auto}
.w-dd.open .w-dd-menu{display:block}
.w-dd-item{font-size:12px;color:var(--color-text-primary);padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.w-dd-item:hover{background:var(--color-primary-light)}
.w-dd-item.on{color:var(--color-primary);font-weight:500}

/* ================= 背景特效（fx.js） ================= */
/* canvas 固定在最底层（z-index:-1），只画星星与流星，永远不覆盖文字 */
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.fx-canvas.hidden{display:none}

/* 开启特效后：主区透明让星空透出 */
body.fx-on .main{background:transparent}

/* —— 侧边栏毛玻璃：让渐变流光 / 星空 / 流星一并透进侧边栏 —— */
/* 面板本体半透 + backdrop-filter 直接采样身后的 canvas 与渐变；
   同时把面板内的悬浮态、卡片、下拉菜单配色改成半透，避免它们挡住星星。
   不支持 backdrop-filter 的浏览器自动回退为较高不透明度，保证文字可读。 */
body.fx-on .sidebar{
  background:color-mix(in srgb, var(--color-surface) 48%, transparent);
  /* blur 不宜过大：backdrop-filter 只模糊背景、不影响面板上的文字，
     但超过 ~10px 会把细小的星点抹平，星空就透不出来了 */
  -webkit-backdrop-filter:blur(5px) saturate(160%);
  backdrop-filter:blur(5px) saturate(160%);
  border-right:1px solid color-mix(in srgb, var(--color-border) 55%, transparent);
  --color-surface-2:rgba(78,110,242,.10);
  --color-surface-raised:rgba(255,255,255,.45);
  --color-primary-light:rgba(78,110,242,.16);
  --color-border-light:rgba(0,0,0,.05);
  --widget-bg:rgba(255,255,255,.40);
}
/* 侧边栏内的下拉 / 弹层：半透 + 自身模糊，保持可读性 */
body.fx-on .sidebar .h-dropdown,
body.fx-on .sidebar .g-dropdown,
body.fx-on .sidebar .w-dd-menu{
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
/* 桌面伴侣卡片不再二次模糊，直接用半透背景透出星星 */
body.fx-on .sidebar .widget-panel{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* 暗色主题：换成深色半透，保证文字对比度 */
:root[data-theme="dark"] body.fx-on .sidebar{
  background:color-mix(in srgb, var(--color-surface) 50%, transparent);
  --color-surface-2:rgba(255,255,255,.08);
  --color-surface-raised:rgba(255,255,255,.07);
  --color-primary-light:rgba(78,110,242,.24);
  --color-border-light:rgba(255,255,255,.07);
  --widget-bg:rgba(44,46,51,.42);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.fx-on .sidebar{
    background:color-mix(in srgb, var(--color-surface) 50%, transparent);
    --color-surface-2:rgba(255,255,255,.08);
    --color-surface-raised:rgba(255,255,255,.07);
    --color-primary-light:rgba(78,110,242,.24);
    --color-border-light:rgba(255,255,255,.07);
    --widget-bg:rgba(44,46,51,.42);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.fx-on .sidebar{background:color-mix(in srgb, var(--color-surface) 84%, transparent)}
}

/* 渐变流光：亮色为淡雅蓝紫，暗色为深空蓝 */
body.fx-on{
  background:linear-gradient(120deg,#eef2ff 0%,#f6f0ff 25%,#e9f4ff 50%,#fdf1f7 75%,#eef2ff 100%);
  background-size:300% 300%;
  animation:fx-grad 34s ease-in-out infinite;
}
:root[data-theme="dark"] body.fx-on{
  background:linear-gradient(120deg,#070B1A 0%,#111A3C 25%,#1B2559 48%,#0E1430 72%,#070B1A 100%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.fx-on{
    background:linear-gradient(120deg,#070B1A 0%,#111A3C 25%,#1B2559 48%,#0E1430 72%,#070B1A 100%);
  }
}
@keyframes fx-grad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media (prefers-reduced-motion: reduce){
  body.fx-on{animation:none}
}

/* 顶栏特效开关按钮 */
.fx-btn{transition:background .15s,color .15s}
.fx-btn.on{color:var(--color-primary);background:var(--color-primary-light)}

/* ============ 深度思考（思维链） ============ */
.think-block{
  margin-bottom:10px;
  border:1px solid var(--color-border-light);
  border-radius:var(--radius-md);
  background:var(--color-surface-2, var(--color-surface));
  overflow:hidden;
}
.think-head{
  display:flex;align-items:center;gap:5px;
  padding:7px 10px;
  font-size:12px;color:var(--text-3);
  cursor:pointer;user-select:none;
  transition:color .15s;
}
.think-head:hover{color:var(--color-primary)}
.think-arrow{font-size:10px;transition:transform .15s}
.think-body{
  display:none;
  padding:0 10px 10px 10px;
  font-size:12px;line-height:1.7;
  color:var(--text-3);
  white-space:pre-wrap;word-break:break-word;
  max-height:260px;overflow-y:auto;
  border-top:1px dashed var(--color-border-light);
  margin-top:2px;padding-top:8px;
}
/* 展开态：显示思维链内容 */
.think-block.open .think-body{display:block}
/* 思考中：头部做呼吸动画 */
.think-block:not(.done) .think-head{animation:thinkPulse 1.6s ease-in-out infinite}
@keyframes thinkPulse{0%,100%{opacity:.65}50%{opacity:1}}

/* ============ AI 生成的图片消息 ============ */
.gen-img{
  display:block;width:100%;max-width:420px;
  border-radius:var(--radius-md);border:1px solid var(--color-border-light);
  margin-bottom:8px;background:var(--color-surface-2);
}
.gen-actions{display:flex;gap:8px;flex-wrap:wrap}
.gen-btn{
  font-size:12px;color:var(--color-text-secondary);text-decoration:none;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;
  transition:all .15s;display:inline-flex;align-items:center;gap:4px;
}
.gen-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}
.gen-meta{font-size:11px;color:var(--color-text-tertiary);margin-top:8px}

/* 发送按钮（灰色圆形箭头） */
.send-btn{
  width:30px;height:30px;border-radius:50%;
  background:var(--color-surface-2);
  color:var(--color-text-tertiary);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.send-btn:not(:disabled){
  background:var(--color-primary);
  color:#fff;
  box-shadow:0 2px 6px rgba(78,110,242,.3);
}
.send-btn:not(:disabled):hover{
  background:var(--color-primary-hover);
}
.send-btn:disabled{cursor:not-allowed}

/* ============ 推广卡片 ============ */
.promo-card{
  position:relative;
  width:100%;
  max-width:780px;
  margin-top:var(--space-2xl);
  background:var(--color-surface);
  border:1px solid var(--color-border-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  transition:box-shadow .15s;
}
/* 关闭按钮（右上角，悬浮卡片时更明显） */
.promo-close{
  position:absolute;top:10px;right:10px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;padding:0;
  background:rgba(0,0,0,.06);color:var(--color-text-tertiary);
  opacity:.5;transition:background .15s,color .15s,opacity .15s,transform .15s;
}
.promo-card:hover .promo-close{opacity:1}
.promo-close:hover{background:rgba(245,63,63,.12);color:var(--color-danger);transform:scale(1.08)}
:root[data-theme="dark"] .promo-close{background:rgba(255,255,255,.10);color:var(--color-text-tertiary)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .promo-close{background:rgba(255,255,255,.10);color:var(--color-text-tertiary)}
}

/* 顶栏「伪装模式」按钮：把广告请回来、把音轨律动藏起来 */
.disguise-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px;
  border-radius:var(--radius-full);
  border:1px solid var(--color-border);
  background:var(--color-surface-raised);
  color:var(--color-text-secondary);
  font-size:12px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,opacity .15s;
}
.disguise-btn:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-light)}
.disguise-btn.on{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}
.disguise-btn.on:hover{opacity:.88;color:#fff;background:var(--color-primary)}
.disguise-label{white-space:nowrap}

/* ============ 音轨律动可视化（替代被关闭的广告卡片） ============ */
.promo-visualizer{
  width:100%;
  max-width:780px;
  margin-top:var(--space-2xl);
  background:var(--color-surface);
  border:1px solid var(--color-border-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  animation:pv-in .35s ease;
}
@keyframes pv-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.pv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.pv-title{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-text-primary)}
.pv-title svg{color:var(--color-primary)}
.pv-sub{font-size:11px;color:var(--color-text-tertiary);max-width:65%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 歌词区在上、律动条在下：完全物理隔离，律动再大也压不到文字 */
.pv-lyric{
  height:124px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  overflow:hidden;
  padding:0 var(--space-md);
}
.pv-line{
  max-width:100%;
  font-size:13px;
  line-height:1.45;
  color:var(--color-text-secondary);
  opacity:.5;
  transition:color .25s, opacity .25s, font-size .25s;
  /* 最多两行，超出省略 */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pv-line.prev,.pv-line.next{font-size:12px}
.pv-line.cur{
  font-size:15px;
  font-weight:600;
  color:var(--color-text-primary);
  opacity:1;
}
.pv-line.trans{font-size:12px;color:var(--color-text-tertiary);opacity:.75}
.pv-line.empty{font-size:12px;color:var(--color-text-tertiary);opacity:.8;font-weight:400}
/* 律动底栏：高度固定且较矮，只做节奏可视化 */
.pv-canvas{display:block;width:100%;height:56px;margin-top:var(--space-sm)}
/* 无歌词时把版面让给频谱 */
.promo-visualizer.no-lyric .pv-lyric{height:52px}
.promo-visualizer.no-lyric .pv-canvas{height:150px;margin-top:var(--space-md)}
/* 背景特效开启时与侧边栏同款毛玻璃 */
body.fx-on .promo-visualizer{
  background:color-mix(in srgb, var(--color-surface) 55%, transparent);
  -webkit-backdrop-filter:blur(7px) saturate(160%);
  backdrop-filter:blur(7px) saturate(160%);
}
@media (prefers-reduced-motion: reduce){
  .promo-visualizer{animation:none}
}
.promo-card:hover{box-shadow:var(--shadow-md)}
.promo-img{
  width:160px;height:96px;
  border-radius:var(--radius-md);
  overflow:hidden;
  flex-shrink:0;
  background:var(--color-primary-light);
}
.promo-body{flex:1;min-width:0}
.promo-title{font-size:15px;font-weight:500;color:var(--color-text-primary);margin-bottom:4px}
.promo-desc{font-size:12px;color:var(--color-text-tertiary);margin-bottom:var(--space-md);line-height:1.5}
.promo-btn{
  padding:6px 14px;
  background:var(--color-dark);
  color:#fff;
  border-radius:var(--radius-full);
  font-size:12px;font-weight:500;
  transition:opacity .15s;
}
.promo-btn:hover{opacity:.85}
/* 链接版按钮（target=_blank 原生打开，避免 JS 弹窗被拦截后当前页跟着跳转） */
a.promo-btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  cursor:pointer;
}
/* 暗色模式下 promo-btn 的 --color-dark 反转为亮色，覆盖为深色按钮 */
:root[data-theme="dark"] .promo-btn{background:#41434A;color:#F2F3F5}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .promo-btn{background:#41434A;color:#F2F3F5}
}

/* ============ 对话消息区（flex:1 可滚动，输入框固定底部不被挤压） ============ */
.messages{
  flex:1;
  min-height:0;           /* 关键：允许收缩并滚动 */
  overflow-y:auto;
  max-width:780px;
  width:100%;
  margin:0 auto;
  padding:24px 0 40px;
}
.msg{display:flex;gap:14px;margin-bottom:24px;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-ava{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;
}
.msg.user .msg-ava{background:linear-gradient(135deg,#ffd86b,#fc6262)}
.msg.ai .msg-ava{background:linear-gradient(135deg,#6B7CFF,#4E6EF2)}
.msg-body{flex:1;min-width:0;max-width:calc(100% - 46px)}
.msg.user .bubble{
  display:inline-block;background:var(--color-primary-light);
  color:var(--color-text-primary);
  padding:8px 14px;border-radius:var(--radius-md);
  font-size:14px;line-height:1.6;white-space:pre-wrap;
}
.msg.ai .bubble{font-size:14px;line-height:1.7;color:var(--color-text-primary)}
.msg.ai .bubble p{margin:0 0 8px}
.msg.ai .bubble p:last-child{margin-bottom:0}
.msg.ai .bubble pre{
  background:#1D2129;color:#e8e8e8;
  padding:12px 14px;border-radius:var(--radius-md);
  overflow-x:auto;margin:8px 0;font-size:13px;
}
.msg.ai .bubble code{font-family:'Fira Code',Consolas,monospace}
.msg.ai .bubble :not(pre) > code{
  background:var(--color-surface-2);color:var(--color-primary);
  padding:1px 5px;border-radius:var(--radius-sm);font-size:13px;
}
.msg.ai .bubble ul,.msg.ai .bubble ol{margin:6px 0 6px 24px}
.msg.ai .bubble li{margin-bottom:3px}
.msg.ai .bubble table{border-collapse:collapse;margin:8px 0;width:100%}
.msg.ai .bubble th,.msg.ai .bubble td{border:1px solid var(--color-border);padding:6px 10px;font-size:13px;text-align:left}
.msg.ai .bubble th{background:var(--color-surface-2);font-weight:600}
.msg.ai .bubble blockquote{border-left:3px solid var(--color-primary);padding-left:12px;color:var(--color-text-secondary);margin:8px 0}
.msg.ai .bubble h1,.msg.ai .bubble h2,.msg.ai .bubble h3{margin:12px 0 6px;font-weight:600}
.msg.ai .bubble a{color:var(--color-primary);text-decoration:underline}

.thinking-label{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;background:var(--color-primary-light);
  color:var(--color-primary);border-radius:var(--radius-sm);
  font-size:12px;font-weight:500;margin-bottom:8px;
}
.cursor-blink::after{content:'▍';animation:blink 1s infinite;color:var(--color-primary)}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.msg-actions{display:flex;gap:4px;margin-top:8px;opacity:0;transition:opacity .15s}
.msg:hover .msg-actions{opacity:1}
.msg-actions button{
  padding:4px 8px;border-radius:var(--radius-sm);
  font-size:12px;color:var(--color-text-tertiary);
}
.msg-actions button:hover{background:var(--color-surface-2);color:var(--color-text-primary)}

/* ============ 长文档解析遮罩 ============ */
.doc-parse{
  position:fixed;inset:0;background:rgba(29,33,41,.4);
  display:flex;align-items:center;justify-content:center;z-index:1000;
}
.dp-card{background:var(--color-surface-raised);padding:32px 40px;border-radius:var(--radius-lg);text-align:center;min-width:280px}
.dp-spin{
  width:32px;height:32px;border:3px solid var(--color-border);
  border-top-color:var(--color-primary);border-radius:50%;
  animation:spin .8s linear infinite;margin:0 auto 16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.dp-text{font-size:14px;font-weight:500;color:var(--color-text-primary);margin-bottom:4px}
.dp-sub{font-size:12px;color:var(--color-text-tertiary)}

/* ============ Toast ============ */
.toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  background:var(--color-text-primary);color:#fff;
  padding:8px 16px;border-radius:var(--radius-md);
  font-size:13px;z-index:2000;
  animation:toastIn .25s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============ 响应式 ============ */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;box-shadow:var(--shadow-lg)}
  .sidebar.collapsed{margin-left:calc(var(--sidebar-w) * -1)}
  .promo-card{flex-direction:column;text-align:center}
  .promo-img{width:100%;height:120px}
}

/* ============ 算力小游戏（点击侧边栏底部用户区进入） ============ */
/* 游戏遮罩：压暗 + 轻虚化身后页面，让面板的毛玻璃有东西可采样 */
.game-overlay{
  display:none;position:fixed;inset:0;z-index:1200;
  align-items:center;justify-content:center;padding:var(--space-lg);
  background:var(--game-veil);
  -webkit-backdrop-filter:blur(8px) saturate(115%);
  backdrop-filter:blur(8px) saturate(115%);
}
.game-overlay.is-open{display:flex}

/* 进入游戏时：中间的「你好，千问」与千问广告全部退场，让位给游戏场地 */
body.game-mode .greeting,
body.game-mode .promo-card,
body.game-mode .promo-visualizer{display:none !important}

/* 侧边栏用户卡即游戏入口 */
.user-card{cursor:pointer}

/* 面板：半透明毛玻璃；实线边框交给 ::before 做渐变描边 */
.game-panel{
  position:relative;width:min(920px,100%);height:min(600px,100%);
  display:flex;overflow:hidden;
  background:var(--game-glass);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-radius:var(--radius-xl);
  /* 末项 inset 内晕：玻璃边缘的"厚度"，只染在背景层（内容仍清晰） */
  box-shadow:0 30px 80px -34px rgba(0,0,0,.5),0 4px 18px -10px rgba(0,0,0,.22),
    inset 0 0 58px -26px color-mix(in srgb,var(--aura-tint) 62%,transparent);
}
/* 渐变描边：用 padding-box 与 content-box 的遮罩差集切出 1px 环。
   用锥形渐变（不是线性）——线性只有斜对角亮、其余三边中段发灰。
   主色打底做出明暗流动，只在右上留一抹氛围色光；
   冷暖两色大面积对冲会混出灰白，所以暖段收窄、两侧快速过渡。 */
.game-panel::before{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;padding:1px;
  background:conic-gradient(from 150deg at 50% 50%,
    color-mix(in srgb,var(--color-primary) 90%,transparent) 0deg,
    color-mix(in srgb,var(--color-primary) 44%,transparent) 42deg,
    color-mix(in srgb,var(--color-primary) 86%,transparent) 96deg,
    color-mix(in srgb,var(--aura-tint) 88%,transparent) 120deg,
    color-mix(in srgb,var(--color-primary) 84%,transparent) 132deg,
    color-mix(in srgb,var(--color-primary) 48%,transparent) 176deg,
    color-mix(in srgb,var(--color-primary) 90%,transparent) 232deg,
    color-mix(in srgb,var(--color-primary) 42%,transparent) 286deg,
    color-mix(in srgb,var(--color-primary) 88%,transparent) 336deg,
    color-mix(in srgb,var(--color-primary) 90%,transparent) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
/* 面板内的角落柔光：左上主色、右下氛围色，给玻璃一点厚度 */
.game-panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 62% at 8% -10%,color-mix(in srgb,var(--color-primary) 11%,transparent) 0%,transparent 62%),
    radial-gradient(110% 70% at 102% 110%,color-mix(in srgb,var(--aura-tint) 13%,transparent) 0%,transparent 66%);
}
/* 不支持 backdrop-filter 时退化为较高不透明度，保证文字可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .game-panel{background:color-mix(in srgb,var(--color-background) 94%,transparent)}
  .game-left{background:color-mix(in srgb,var(--color-surface) 88%,transparent)}
}

.game-close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  background:var(--game-glass-card);color:var(--color-text-secondary);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .15s,border-color .15s;
}
.game-close:hover{color:var(--color-danger);border-color:var(--color-danger)}

/* ---- 左：点击区 ----
   overflow 必须是 visible：待机纹路在满算力时要溢出左框、铺满整个面板。
   z-index 高于右栏，纹路才能盖在商店之上（面板自身的 overflow:hidden 负责收在圆角内）。 */
.game-left{
  position:relative;overflow:visible;z-index:2;
  width:46%;padding:var(--space-xl) var(--space-lg);
  display:flex;flex-direction:column;align-items:center;
  background:var(--game-glass-left);
}
/* 左框与商店的分栏线：上下淡出，中段在主色与氛围色之间过渡 */
.game-left::before{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb,var(--aura-tint) 46%,transparent) 15%,
    color-mix(in srgb,var(--color-primary) 42%,transparent) 38%,
    color-mix(in srgb,var(--color-border) 90%,transparent) 50%,
    color-mix(in srgb,var(--color-primary) 36%,transparent) 64%,
    color-mix(in srgb,var(--aura-tint) 40%,transparent) 86%,
    transparent 100%);
}

/* ---- 已购道具缩略图条（左框左侧竖排；悬停出浮层） ----
   绝对定位贴在左框左边缘：不参与 flex 流，因此不会推动开关与状态区的既有几何。
   浮层向左展开到面板之外 —— 面板内左侧正中就是电源开关（158px，垂直中心 +34px），
   浮层若向右展开必然压住它；开关是主要操作，不能挡。左框 overflow 必须 visible。 */
/* 已购道具缩略图条：贴在左区最左侧。
   注意面板在 1366 等常见视口下会横向压住侧栏 37px（面板居中于视口、侧栏 260px 宽），
   条若顶在 left:0 就有一半骑在侧栏内容上，观感像被切了一角 —— 所以往里让 6px，
   让整枚图标都落在面板可见区域里。 */
.game-owned{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  z-index:6;width:44px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;                 /* 空条不挡点击；有内容的条目自己打开 */
}
.game-owned:empty{display:none}

.owned-slot{
  position:relative;width:44px;height:44px;flex:none;
  pointer-events:auto;cursor:default;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(-8px) scale(.86);
  transition:opacity .34s cubic-bezier(.22,1,.36,1),
             transform .34s cubic-bezier(.22,1,.36,1);
}
.owned-slot.shown{opacity:1;transform:none}
.owned-slot img{
  width:34px;height:34px;object-fit:contain;display:block;
  border-radius:7px;pointer-events:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
  /* 科幻感轮廓：主色细环贴边 + 外侧一圈柔光（发光屏幕的观感）。
     三段 box-shadow 各司其职 —— 1px 是「环」，中间段是「辉」，
     末段沿用原投影，缩略图才既浮起来又有金属框边。
     具体强度走 --ring-* 变量（亮/暗各一套），这里只负责结构。 */
  box-shadow:
    0 0 0 1px var(--ring-1),
    0 0 7px -1px var(--ring-2),
    0 3px 8px -2px var(--ring-3);
}
/* 悬停 / 聚焦：环收紧成实色、辉光铺开，并掺一点氛围色做「能量升高」的暗示 */
.owned-slot:hover img,
.owned-slot:focus img{
  transform:scale(1.16);
  box-shadow:
    0 0 0 1px var(--color-primary),
    0 0 12px 0 color-mix(in srgb,var(--color-primary) 66%,transparent),
    0 0 4px 1px color-mix(in srgb,var(--aura-tint) 42%,transparent),
    0 4px 10px -2px rgba(0,0,0,.36);
}

/* 等级角标：Lv2 起才出现（Lv1 是一枚干净的图） */
.owned-lv{
  position:absolute;right:3px;bottom:2px;
  min-width:15px;height:15px;padding:0 3px;
  border-radius:var(--radius-full);
  background:var(--color-primary);color:#fff;
  font-size:9px;line-height:15px;font-weight:600;text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
  opacity:0;transition:opacity .2s;
}
.owned-slot.has-lv .owned-lv{opacity:1}

/* 悬停浮层。挂在 body 上、position:fixed —— 不能挂在缩略图里面：
   面板 .game-panel 是 overflow:hidden（用来把纹路收进圆角卡片），
   挂在里面的话无论向左还是向右展开都会被面板裁掉，DOM 里 visible 但屏幕上一片空白。 */
.owned-pop{
  position:fixed;left:0;top:0;z-index:9999;
  width:224px;padding:11px 13px;
  opacity:0;visibility:hidden;
  /* 浮层自己不能是 pointer-events:none —— 那样它只是「画上去」，命中测试直接穿过它，
     指针从缩略图滑到浮层的路上会先撞上 mouseleave 把它收掉，也就没法把独白读完。
     收起状态靠 visibility:hidden 就够（hidden 的元素本来就不参与命中测试）。 */
  pointer-events:auto;
  transform:scale(.97);
  transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility .18s;
  border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
  /* 浮层可能落在面板边缘甚至侧边栏上，背后内容比面板内杂乱：
     底色用更高的不透明度，保证正文可读（面板内的卡片那档太透）。 */
  background:color-mix(in srgb,var(--color-background) 92%,transparent);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
}
/* 窄版：缩略图条贴在面板左缘，向左可用宽随视口变化（1366→205px，1280→162px）。
   标准宽 224px 在多数笔记本视口下塞不进面板左侧，所以要收窄 —— 但仍保留
   道具名与花费（一行并排，只压字号），把纵向空间省给效果与独白。 */
.owned-pop.narrow{padding:9px 10px}
.owned-pop.narrow .owned-name{font-size:12px}
.owned-pop.narrow .owned-cost{font-size:10px}
.owned-pop.narrow .owned-desc{margin-top:4px;font-size:11px;line-height:1.46}
.owned-pop.narrow .owned-lore{margin-top:5px;padding-top:5px;font-size:11px;line-height:1.55}
.owned-pop.open{opacity:1;visibility:visible;transform:scale(1)}
/* 指向缩略图的小箭头；方向由 .pop-right 决定（贴在左缘还是右缘） */
.owned-pop::before{
  content:"";position:absolute;top:50%;
  width:9px;height:9px;transform:translateY(-50%) rotate(45deg);
  background:color-mix(in srgb,var(--color-background) 92%,transparent);
}
.owned-pop:not(.pop-right)::before{
  right:-5px;
  border-right:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
  border-top:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
}
.owned-pop.pop-right::before{
  left:-5px;
  border-left:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
  border-bottom:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));
}
/* 贴在视口左缘一类贴边情况：隐藏箭头的左侧描边，避免半截线 */
.owned-pop.pop-flush::before{display:none}

.owned-head{display:flex;align-items:baseline;gap:6px}
.owned-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.owned-cost{font-size:11px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}
.owned-desc{
  margin-top:5px;font-size:11.5px;line-height:1.5;
  color:var(--color-text-secondary);
}
.owned-lore{
  margin-top:7px;padding-top:7px;
  border-top:1px solid color-mix(in srgb,var(--color-border) 70%,transparent);
  font-size:11.5px;line-height:1.62;
  color:var(--color-text-tertiary);
  font-style:italic;
}

/* ---- 顶部状态区：算力 / 昼夜·计时·潮汛 / 进度条 ---- */
.game-left-head{
  position:relative;z-index:2;flex:none;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.game-power{text-align:center}
.game-power-label{display:block;font-size:12px;color:var(--color-text-tertiary);letter-spacing:.14em}
.game-power-value{
  display:block;margin-top:2px;
  font-size:42px;line-height:1.08;font-weight:600;
  color:var(--color-text-primary);font-variant-numeric:tabular-nums;
}
.game-panel.finished .game-power-value{color:var(--color-primary)}

.game-goal{width:100%;max-width:320px}
.goal-bar{height:6px;border-radius:var(--radius-full);background:var(--color-surface-2);overflow:hidden}
.goal-fill{height:100%;width:0;border-radius:var(--radius-full);background:var(--color-primary);transition:width .2s}
.goal-text{margin-top:6px;font-size:12px;color:var(--color-text-tertiary);text-align:center}

/* 舞台：电源开关落在左框中部偏下，四周留白 */
.game-stage{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.click-core{
  position:relative;display:flex;align-items:center;justify-content:center;pointer-events:auto;
  /* 开关整体略低于几何中心，避免视觉重心被上方状态区拉高 */
  transform:translateY(var(--click-drop,34px));
}

.game-click{
  width:158px;height:158px;padding:0;border:none;border-radius:var(--radius-full);
  cursor:pointer;color:#fff;background:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 34px -14px var(--color-primary);
  transition:transform .09s,filter .15s,box-shadow .2s;
}
.game-click:hover{filter:brightness(1.06);box-shadow:0 16px 40px -14px var(--color-primary)}
.game-click:active{transform:scale(.94)}
.click-icon{width:64px;height:64px}

/* ---- 待机律动：不点击时，开关四周缓慢流转的光亮纹路 ----
   --aura-scale / --aura-alpha 由 game.js 按当前算力写入：
   算力每涨一个数量级往外推一步；满算力时纹路铺满整个游戏面板，而不只是左框。
   各层的线宽与角周期都写成 calc(… / var(--aura-scale))：放大的是「范围」，
   线条本身不长粗、角向间距保持不变——是铺开而不是拉伸，所以撑到大框也不会糊成色块。
   所有硬边一律靠渐变带柔化：放射纹两端、弧段切口、环带内外全都是渐隐的。 */
.click-aura{
  position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;pointer-events:none;
  transform:scale(var(--aura-scale,1));
  opacity:var(--aura-alpha,1);
  will-change:transform;
  /* 这里千万不能加 mask：mask 会把元素连同所有子层裁进自身盒子，
     纹路就被切成一个方块（各子层比它大得多，正是靠溢出铺满整个面板的）。
     外缘的柔和收边交给各子层自己的环带遮罩，面板的圆角裁剪负责收口。 */
  transition:opacity .3s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
/* 点击的瞬间让位给扩散特效，待机纹路淡到背景 */
.click-core.is-clicking .click-aura{opacity:calc(var(--aura-alpha,1) * .14)}

/* 呼吸光雾：大范围柔光的兜底层，铺满整个面板主要靠它 */
.aura-glow{
  position:absolute;left:50%;top:50%;width:236%;height:236%;margin:-118% 0 0 -118%;
  border-radius:var(--radius-full);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--aura-tint) 26%,transparent) 0%,
    color-mix(in srgb,var(--aura-tint) 13%,transparent) 34%,
    color-mix(in srgb,var(--aura-tint) 5%,transparent) 64%,
    transparent 86%);
  animation:auraGlow 3.6s ease-in-out infinite;
}
@keyframes auraGlow{
  0%,100%{transform:scale(.93);opacity:.5}
  50%{transform:scale(1.07);opacity:1}
}

/* 光亮纹路 · 放射层：三层用互质的角周期与不同环带半径，
   叠加后线条长短不一、疏密不均，绝不对齐；转速与方向也各不相同。
   每条线的角向两端都是渐隐带（透明 → 实色 → 透明），不留硬直切口。 */
.aura-rays{
  --rw:.34deg;--rc:.94deg;--re:1.5deg;--rp:17deg;
  position:absolute;left:50%;top:50%;width:186%;height:186%;margin:-93% 0 0 -93%;
  border-radius:var(--radius-full);pointer-events:none;
  color:color-mix(in srgb,var(--aura-tint) 30%,transparent);
  background:repeating-conic-gradient(from 0deg,
    transparent 0deg,
    currentColor calc(var(--rw) / var(--aura-pat,1)) calc(var(--rc) / var(--aura-pat,1)),
    transparent calc(var(--re) / var(--aura-pat,1)) calc(var(--rp) / var(--aura-pat,1)));
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 2%,#000 12%,#000 26%,transparent 36%);
  mask:radial-gradient(circle at 50% 50%,transparent 2%,#000 12%,#000 26%,transparent 36%);
  animation:auraSpin 26s linear infinite,auraBreathe 5.2s ease-in-out infinite;
}
.aura-rays-2{
  --rw:.26deg;--rc:.72deg;--re:1.2deg;--rp:29deg;
  width:168%;height:168%;margin:-84% 0 0 -84%;
  color:color-mix(in srgb,var(--aura-tint) 22%,transparent);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 16%,#000 26%,#000 48%,transparent 58%);
  mask:radial-gradient(circle at 50% 50%,transparent 16%,#000 26%,#000 48%,transparent 58%);
  animation:auraSpin 38s linear infinite reverse,auraBreathe 6.8s ease-in-out .8s infinite;
}
.aura-rays-3{
  --rw:.2deg;--rc:.55deg;--re:.95deg;--rp:47deg;
  width:202%;height:202%;margin:-101% 0 0 -101%;
  color:color-mix(in srgb,var(--aura-tint) 14%,transparent);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 40%,#000 50%,#000 74%,transparent 88%);
  mask:radial-gradient(circle at 50% 50%,transparent 40%,#000 50%,#000 74%,transparent 88%);
  animation:auraSpin 19s linear infinite,auraBreathe 4.4s ease-in-out .4s infinite;
}

/* 光亮纹路 · 同心断续弧（非放射性）：纹路沿圆周断开、反向流转。
   弧线宽度写成 px / var(--aura-scale)，铺到整个面板时依然是一条细线，
   不会因为放大而变成粗圆环；弧段两端同样是渐隐的。 */
.aura-arcs{
  --aw:calc(1.35px / var(--aura-pat,1));
  position:absolute;left:50%;top:50%;width:200%;height:200%;margin:-100% 0 0 -100%;
  border-radius:var(--radius-full);pointer-events:none;
  color:color-mix(in srgb,var(--aura-tint) 26%,transparent);
  background:radial-gradient(circle at 50% 50%,
    transparent 0 calc(14% - var(--aw) * 2),
    currentColor calc(14% - var(--aw)) calc(14% + var(--aw)),
    transparent calc(14% + var(--aw) * 2) calc(30% - var(--aw) * 2),
    currentColor calc(30% - var(--aw)) calc(30% + var(--aw)),
    transparent calc(30% + var(--aw) * 2) calc(46% - var(--aw) * 2),
    currentColor calc(46% - var(--aw)) calc(46% + var(--aw)),
    transparent calc(46% + var(--aw) * 2) calc(62% - var(--aw) * 2),
    currentColor calc(62% - var(--aw)) calc(62% + var(--aw)),
    transparent calc(62% + var(--aw) * 2) calc(78% - var(--aw) * 2),
    currentColor calc(78% - var(--aw)) calc(78% + var(--aw)),
    transparent calc(78% + var(--aw) * 2));
  -webkit-mask:repeating-conic-gradient(from 17deg,transparent 0deg,#000 8deg 18deg,transparent 26deg 43deg);
  mask:repeating-conic-gradient(from 17deg,transparent 0deg,#000 8deg 18deg,transparent 26deg 43deg);
  animation:auraSpin 42s linear infinite reverse,auraBreathe 7.4s ease-in-out infinite;
}

/* 光亮纹路 · 散点光屑（非放射性）：不沿任何轴向，各自随机明灭；
   光点半径同样反缩，铺开时依旧是细细的光点而非光斑。 */
.aura-sparks{
  position:absolute;left:50%;top:50%;width:240%;height:240%;margin:-120% 0 0 -120%;
  border-radius:var(--radius-full);pointer-events:none;
  color:color-mix(in srgb,var(--aura-tint) 72%,transparent);
  background-image:
    radial-gradient(circle at 31% 21%,currentColor 0 calc(1.4px / var(--aura-pat,1)),transparent calc(1.5px / var(--aura-pat,1))),
    radial-gradient(circle at 73% 33%,currentColor 0 calc(1.1px / var(--aura-pat,1)),transparent calc(1.2px / var(--aura-pat,1))),
    radial-gradient(circle at 21% 66%,currentColor 0 calc(1.3px / var(--aura-pat,1)),transparent calc(1.4px / var(--aura-pat,1))),
    radial-gradient(circle at 65% 81%,currentColor 0 calc(1px / var(--aura-pat,1)),transparent calc(1.1px / var(--aura-pat,1))),
    radial-gradient(circle at 48% 9%,currentColor 0 calc(1.2px / var(--aura-pat,1)),transparent calc(1.3px / var(--aura-pat,1))),
    radial-gradient(circle at 88% 57%,currentColor 0 calc(1px / var(--aura-pat,1)),transparent calc(1.1px / var(--aura-pat,1))),
    radial-gradient(circle at 9% 45%,currentColor 0 calc(1.1px / var(--aura-pat,1)),transparent calc(1.2px / var(--aura-pat,1))),
    radial-gradient(circle at 57% 52%,currentColor 0 calc(.9px / var(--aura-pat,1)),transparent calc(1px / var(--aura-pat,1))),
    radial-gradient(circle at 37% 91%,currentColor 0 calc(1px / var(--aura-pat,1)),transparent calc(1.1px / var(--aura-pat,1))),
    radial-gradient(circle at 79% 73%,currentColor 0 calc(.9px / var(--aura-pat,1)),transparent calc(1px / var(--aura-pat,1)));
  animation:auraSpin 46s linear infinite,auraTwinkle 6.2s ease-in-out infinite;
}
@keyframes auraTwinkle{
  0%,100%{opacity:.26}
  27%{opacity:.78}
  54%{opacity:.4}
  78%{opacity:.7}
}
@keyframes auraSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes auraBreathe{
  0%,100%{opacity:.4}
  50%{opacity:.95}
}

/* 缓推环：两枚错峰向外飘散，形成持续的呼吸脉冲 */
.aura-ring{
  position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:var(--radius-full);
  border:calc(1.5px / var(--aura-pat,1)) solid color-mix(in srgb,var(--aura-tint) 72%,transparent);
  opacity:0;
  animation:auraRing 2.9s cubic-bezier(.25,.6,.35,1) infinite;
}
.aura-ring-2{animation-delay:1.45s}
@keyframes auraRing{
  0%{transform:scale(1.02);opacity:0}
  16%{opacity:.85}
  100%{transform:scale(1.62);opacity:0}
}

/* ---- 点击特效：光晕环 / 放射线条 / 上浮文字 ---- */
.click-fx{position:absolute;inset:0;pointer-events:none}

.click-halo{
  position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:var(--radius-full);
  border:2px solid var(--aura-tint);opacity:0;
  animation:clickHalo .58s cubic-bezier(.2,.62,.35,1) forwards;
}
@keyframes clickHalo{
  0%{transform:scale(.92);opacity:.8}
  100%{transform:scale(2.2);opacity:0}
}

.click-burst{
  position:absolute;left:50%;top:50%;width:212px;height:212px;margin:-106px 0 0 -106px;
  border-radius:var(--radius-full);
  color:var(--aura-tint);opacity:0;
  background:repeating-conic-gradient(from 0deg,transparent 0deg,currentColor .7deg 2.4deg,transparent 4.2deg 30deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent 29%,#000 37%,#000 57%,transparent 65%);
  mask:radial-gradient(circle at 50% 50%,transparent 29%,#000 37%,#000 57%,transparent 65%);
  animation:clickBurst .62s cubic-bezier(.16,.62,.3,1) forwards;
}
@keyframes clickBurst{
  0%{transform:scale(.82) rotate(0deg);opacity:1}
  58%{opacity:.72}
  100%{transform:scale(1.34) rotate(20deg);opacity:0}
}

/* 浮字起点压在开关上缘之内、终点飘到开关上方，全程不糊在按钮上 */
.click-pop{
  position:absolute;top:calc(50% - 92px);left:calc(50% + var(--dx,0px));
  font-size:14px;font-weight:600;white-space:nowrap;
  color:var(--color-primary);opacity:0;
  text-shadow:0 1px 2px var(--color-surface),0 0 9px var(--color-surface);
  animation:clickPop .5s ease-out forwards;
}
@keyframes clickPop{
  0%{transform:translate(-50%,14px) scale(.9);opacity:0}
  18%{opacity:1}
  100%{transform:translate(-50%,-40px) scale(1);opacity:0}
}

/* ---- 注入脉冲：买道具时纹路胀一下，并从开关向外推出注入环 ----
   「快胀慢落」靠两套过渡时长：加类时 .16s 有弹性，撤类后回到基础规则的 0.7s。 */
.click-core.is-buying .click-aura{
  transform:scale(calc(var(--aura-scale,1) * 1.1));
  transition:opacity .12s ease,transform .16s cubic-bezier(.3,.85,.4,1.15);
}
/* 万级以上的重道具，胀得更明显 */
.click-core.is-buying.is-buying-lg .click-aura{
  transform:scale(calc(var(--aura-scale,1) * 1.2));
}
.click-core.is-buying .game-click{
  box-shadow:
    0 0 0 6px color-mix(in srgb,var(--aura-tint) 20%,transparent),
    0 18px 44px -12px var(--aura-tint);
}

.buy-ring{
  position:absolute;left:50%;top:50%;width:100%;height:100%;
  margin:-50% 0 0 -50%;border-radius:var(--radius-full);
  border:3px solid var(--aura-tint);opacity:0;
  animation:buyRing .62s cubic-bezier(.2,.7,.3,1) forwards;
}
.buy-ring-2{animation-delay:.12s}
@keyframes buyRing{
  0%{transform:scale(.86);opacity:0}
  16%{opacity:.88}
  100%{transform:scale(1.98);opacity:0}
}

/* 系统开启「减弱动态效果」时，只保留最轻的浮字反馈 */
@media (prefers-reduced-motion:reduce){
  .click-halo,.click-burst,.click-aura,.buy-ring{display:none}
}

/* 底部：连击与速率 */
.game-left-foot{
  position:relative;z-index:2;flex:none;margin-top:auto;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}

.game-combo{
  padding:4px 12px;border-radius:var(--radius-full);
  background:var(--color-primary-light);color:var(--color-primary);font-size:12px;
}
.game-combo.hot{background:var(--color-danger);color:#fff}
.game-stats{font-size:12px;color:var(--color-text-tertiary);text-align:center}

/* 面板偏矮时缩小开关，避免与上下的状态区挤到一起 */
@media (max-height:640px){
  .click-core{--click-drop:20px}
  .game-click{width:124px;height:124px}
  .click-icon{width:50px;height:50px}
}

/* ---- 右：道具商店 ---- */
.game-right{flex:1;min-width:0;padding:var(--space-lg);display:flex;flex-direction:column}
.game-right-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:var(--space-sm);padding-right:62px}
.shop-title{font-size:15px;font-weight:500;color:var(--color-text-primary)}
.shop-note{font-size:12px;color:var(--color-text-tertiary)}
.shop-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:6px}

.shop-item{
  display:flex;align-items:center;gap:var(--space-md);padding:10px;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--game-glass-card);transition:border-color .15s;
}
.shop-item:hover{border-color:var(--color-primary)}
.shop-item.done{opacity:.62}
.shop-badge{
  width:64px;height:64px;flex:none;border-radius:var(--radius-md);
  position:relative;overflow:hidden;
  background:var(--color-primary-light);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;
  line-height:1;user-select:none;
}
/* 兜底首字：图标未就绪时可见；一旦 img.onload 给 badge 挂上 .has-icon 就藏起来。
   用 visibility 而不是 display，是为了让首字层的存在不影响 64px 盒子的几何。 */
.shop-badge .shop-icon{position:absolute;inset:0;width:64px;height:64px;display:block;object-fit:cover}
.shop-badge.has-icon{color:transparent;background:var(--game-glass-card)}
.shop-badge.has-icon .shop-icon{visibility:visible}
.shop-badge:not(.has-icon) .shop-icon{visibility:hidden}
.shop-badge.icon-failed{background:var(--color-primary-light);color:var(--color-primary)}
.shop-badge.icon-failed .shop-icon{display:none}
.shop-info{flex:1;min-width:0}
.shop-name{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.shop-desc{font-size:12px;color:var(--color-text-secondary);margin-top:1px}
.shop-meta{font-size:11px;color:var(--color-text-tertiary);margin-top:2px}
.shop-btn{
  flex:none;min-width:92px;padding:7px 10px;border:none;border-radius:var(--radius-sm);
  cursor:pointer;background:var(--color-primary);color:#fff;font-size:12px;transition:opacity .15s;
}
.shop-btn:hover:not(:disabled){opacity:.86}
.shop-btn:disabled{background:var(--color-surface-2);color:var(--color-text-placeholder);cursor:not-allowed}

/* ---- 改名区（10 万算力解锁） ---- */
.rename-row{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}
.rename-hint{font-size:12px;color:var(--color-primary);margin-bottom:6px}
.rename-form{display:flex;gap:6px}
.rename-input{
  flex:1;min-width:0;padding:7px 10px;
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-background);color:var(--color-text-primary);
  font-size:13px;outline:none;
}
.rename-input:focus{border-color:var(--color-primary)}
.rename-btn{padding:7px 14px;border:none;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;font-size:12px;cursor:pointer}

/* ---- 回溯按钮（与关闭按钮并排） ---- */
.game-reset{
  position:absolute;top:12px;right:48px;z-index:3;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  background:var(--game-glass-card);color:var(--color-text-secondary);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .15s,border-color .15s;
}
.game-reset:hover{color:var(--color-primary);border-color:var(--color-primary)}
.game-reset.spin svg{animation:resetSpin .55s ease}
.game-reset.armed{color:var(--color-danger);border-color:var(--color-danger);animation:surgePulse .8s ease-in-out infinite}
@keyframes resetSpin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* ---- 游戏内轻提示 ---- */
.game-toast{
  position:absolute;left:50%;bottom:18px;z-index:5;
  transform:translateX(-50%) translateY(6px);
  padding:7px 15px;border-radius:var(--radius-full);
  background:var(--color-text-primary);color:var(--color-background);
  font-size:12px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s,transform .2s;
}
.game-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 昼夜时段指示 + 游戏内切换 ---- */
.game-phase{
  display:flex;align-items:center;gap:8px;
  padding:3px 5px 3px 11px;border-radius:var(--radius-full);
  border:1px solid var(--color-border);background:var(--color-background);
  font-size:12px;color:var(--color-text-secondary);
}
.game-phase[hidden]{display:none}
.game-phase.day{border-color:#EF9F27}
.game-phase.night{border-color:#7F77DD}
.phase-dot{width:7px;height:7px;border-radius:50%;background:#EF9F27;flex:0 0 auto}
.game-phase.night .phase-dot{background:#7F77DD}
.phase-name{font-weight:500;color:var(--color-text-primary)}
.phase-switch{
  padding:3px 10px;border:none;border-radius:var(--radius-full);
  background:var(--color-surface-2);color:var(--color-text-secondary);
  font-size:11px;cursor:pointer;transition:color .15s;
}
.phase-switch:hover{color:var(--color-primary)}

/* ---- 本局计时 + 潮汛状态 ---- */
.game-clocks{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  font-size:12px;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums;
  /* 左边留出图鉴条的宽度（44px + 6px 内缩）：昼夜/潮汛文案变长时是横向撑开的，
     不留inset 就会顶到图标列上，字和图叠在一起。 */
  padding-left:50px;box-sizing:border-box;
}
.game-timer{letter-spacing:.02em}
.game-surge{padding:2px 9px;border:1px solid var(--color-border);border-radius:var(--radius-full);transition:all .15s}
.game-surge.warn{border-color:var(--color-primary);color:var(--color-primary)}
.game-surge.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;animation:surgePulse 1.1s ease-in-out infinite}
@keyframes surgePulse{0%,100%{opacity:1}50%{opacity:.55}}
.game-surge.dim{opacity:.55}

/* ---- 通关记录折叠栏 ---- */
.game-records{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--color-border)}
.rec-summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:500;color:var(--color-text-primary);user-select:none;
}
.rec-summary::-webkit-details-marker{display:none}
.rec-title{flex:1}
.rec-badge{padding:1px 7px;border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text-tertiary);font-size:11px;font-weight:400}
.rec-chevron{
  width:6px;height:6px;border-right:1.5px solid var(--color-text-tertiary);border-bottom:1.5px solid var(--color-text-tertiary);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s;
}
.game-records[open] .rec-chevron{transform:rotate(-135deg) translateY(-2px)}
.rec-list{margin-top:8px;max-height:130px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.rec-item{
  display:flex;align-items:baseline;gap:8px;padding:5px 8px;
  border-radius:var(--radius-sm);background:var(--color-surface-2);
  font-size:12px;color:var(--color-text-secondary);font-variant-numeric:tabular-nums;
}
.rec-round{color:var(--color-text-tertiary)}
.rec-when{font-size:10px;color:var(--color-text-tertiary);opacity:.9}
.rec-tag{padding:1px 6px;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:10px}
.rec-time{margin-left:auto;font-weight:500;color:var(--color-text-primary)}
.rec-item.best{background:transparent;outline:1px solid var(--color-primary);outline-offset:-1px}
.rec-item.best .rec-time{color:var(--color-primary)}
.rec-empty{padding:6px 0;font-size:12px;color:var(--color-text-tertiary)}

@media (max-width:820px){
  .game-panel{flex-direction:column;height:100%}
  /* 高度按几何反推：开关顶 = 左框top + H/2 + drop(34) − 55，要让它落在
     顶部状态区（约 160px 高）之下，H 至少要 347px，取 360 留一点余量 */
  .game-left{width:100%;min-height:360px;padding:var(--space-lg)}
  /* 窄屏改为上下堆叠，分栏线转成底部的横向渐变 */
  .game-left::before{
    top:auto;left:0;right:0;bottom:0;width:auto;height:1px;
    background:linear-gradient(to right,
      transparent 0%,
      color-mix(in srgb,var(--aura-tint) 46%,transparent) 15%,
      color-mix(in srgb,var(--color-primary) 42%,transparent) 38%,
      color-mix(in srgb,var(--color-border) 90%,transparent) 50%,
      color-mix(in srgb,var(--color-primary) 36%,transparent) 64%,
      color-mix(in srgb,var(--aura-tint) 40%,transparent) 86%,
      transparent 100%);
  }
  .game-click{width:110px;height:110px}
  .game-power-value{font-size:34px}
}