/* ================================================================
   NOTHING · 界面皮肤层  skins.css        v2 · 2026-09-26
   ------------------------------------------------------------------
   v2 修复两处真机实测出来的可读性缺陷（均由无头浏览器量到，非猜测）：
     a) 暗底皮肤下 logo.png（黑字标）在深色侧栏上**隐身** → 加反相滤镜
     b) 霓虹强调色底 + 白字对比度不足（metal 白/青 = 1.5:1，远低于 4.5）
        → 引入 --sk-on-accent「强调底上的文字色」，暗底皮肤改深色墨
        同时把用户气泡渐变由「亮端」压深，保证同一文字色两端都达标
   ------------------------------------------------------------------
   设计把「皮肤」拆成两件事，互不干扰：
     ① 配色令牌 —— 直接覆盖主站既有 CSS 变量
        (--bg / --bg-sidebar / --card / --text / --border / --accent …)
     ② 背景艺术层 —— 固定在最底的 body::before（自带一层 scrim 保证正文可读）

   为了透出艺术层，只做三处「面」的调整：
     · .page / .welcome-zone  → 透明（原先是实底 var(--bg)，会盖住艺术层）
     · .sidebar / .topbar     → 磨砂半透明
     · 卡片类                   → 本来就是 var(--bg-card)，令牌里给 rgba 即自动半透明

   加载顺序：必须排在 style.css / nothing.css 之后。
   选择器 html[data-skin=x] 权重 (0,1,1) > :root / [data-theme] (0,1,0)，稳赢。
   主站原生配色 == 皮肤 "classic"（不覆盖任何变量，零风险）。
   ================================================================ */

html{ --sk-art:none; --sk-scrim:transparent; --sk-on-accent:#FFFFFF; --sk-logo:none; }

/* ================= ② 背景艺术层 + 磨砂面（classic 不生效） ================= */
html[data-skin]:not([data-skin="classic"]) body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--sk-scrim),var(--sk-scrim)), var(--sk-art);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
html[data-skin]:not([data-skin="classic"]) .page,
html[data-skin]:not([data-skin="classic"]) .welcome-zone{ background:transparent; }

/* ★ v3 修正（真机截图取证）：原来 blur(18px) 把侧栏磨成了一片平色 ——
   右侧主区能看到明显的背景纹理，左侧 320px 侧栏却是死板一块，
   观感就是「左边的功能模块背景没渲染」。降到 5px 保留玻璃感又留得住纹理。 */
html[data-skin]:not([data-skin="classic"]) .sidebar,
html[data-skin]:not([data-skin="classic"]) .topbar{
  -webkit-backdrop-filter:blur(5px) saturate(1.12);
  backdrop-filter:blur(5px) saturate(1.12);
}
/* ★ v3 修正（真机点击取证）：backdrop-filter 会让元素变成「层叠上下文」。
   .topbar 是 position:static，因此它连同内部的浮层（皮肤面板 / GPU 面板 / 语言菜单）
   会被整体退回普通文档流层，掉到 #pageWelcome（style.css:1602 z-index:2）之下 ——
   表现为「面板看得见、鼠标点上去却命中欢迎区」。实测事故：皮肤选过一次就再也切不回来
   （classic 没有这层滤镜，所以永远是好的，这就是「用了皮肤之后才点不动」的真因）。
   对策：显式给 .topbar 建立层级，浮层重新盖在页面内容之上。 */
html[data-skin]:not([data-skin="classic"]) .topbar{
  position:relative; z-index:600;
}
/* 磨砂面板（下拉类）也跟随皮肤 */
html[data-skin]:not([data-skin="classic"]) .gpu-panel,
html[data-skin]:not([data-skin="classic"]) .lang-menu,
html[data-skin]:not([data-skin="classic"]) .skin-panel{
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  backdrop-filter:blur(20px) saturate(1.2);
}

/* ================= ① 配色令牌 ================= */

/* ---------- 日系治愈（亮底 · 暖色 · 手绘田园） ---------- */
html[data-skin="anime"]{
  --bg:#F8F4EA;
  --bg-sidebar:rgba(255,253,247,.70);
  --bg-card:rgba(255,254,250,.88); --card:rgba(255,254,250,.88);
  --bg-soft:rgba(244,239,227,.86); --bg-input:rgba(255,254,250,.78);
  --bg-hover:rgba(47,125,90,.09); --bg-active:rgba(47,125,90,.16);
  --text:#23302A; --text-secondary:#4C5B53; --text-muted:#7E8C85;
  --accent:#2F7D5A; --accent-hover:#25684A; --accent-soft:rgba(47,125,90,.13);
  --border:rgba(35,48,42,.14); --border-light:rgba(35,48,42,.08);
  --user-bubble:linear-gradient(135deg,#25684A,#2F7D5A);
  --ai-bubble:rgba(255,254,250,.88);
  --shadow:0 2px 12px rgba(60,50,30,.07); --shadow-md:0 4px 16px rgba(60,50,30,.09);
  --shadow-lg:0 8px 32px rgba(60,50,30,.13);
  --sk-art:url(/kjdex/skins/anime.jpg);
  --sk-scrim:rgba(250,247,238,.72);
}

/* ---------- 韩系清新（亮底 · 粉紫柔光） ---------- */
html[data-skin="kawaii"]{
  --bg:#FDF3F8;
  --bg-sidebar:rgba(255,252,254,.70);
  --bg-card:rgba(255,255,255,.88); --card:rgba(255,255,255,.88);
  --bg-soft:rgba(250,240,247,.86); --bg-input:rgba(255,255,255,.80);
  --bg-hover:rgba(184,66,111,.09); --bg-active:rgba(184,66,111,.16);
  --text:#33232C; --text-secondary:#5E4C57; --text-muted:#94828D;
  --accent:#B8426F; --accent-hover:#9E345D; --accent-soft:rgba(184,66,111,.13);
  --border:rgba(51,35,44,.12); --border-light:rgba(51,35,44,.07);
  --user-bubble:linear-gradient(135deg,#9E345D,#B8426F);
  --ai-bubble:rgba(255,255,255,.88);
  --shadow:0 2px 12px rgba(120,60,95,.08); --shadow-md:0 4px 16px rgba(120,60,95,.10);
  --shadow-lg:0 8px 32px rgba(120,60,95,.14);
  --sk-art:url(/kjdex/skins/kawaii.jpg);
  --sk-scrim:rgba(253,246,250,.72);
}

/* ---------- 重金属朋克（深底 · 霓虹青） ---------- */
html[data-skin="metal"]{
  --bg:#0E0F12;
  --bg-sidebar:rgba(15,16,20,.68);
  --bg-card:rgba(24,25,31,.86); --card:rgba(24,25,31,.86);
  --bg-soft:rgba(26,27,33,.8); --bg-input:rgba(24,25,31,.74);
  --bg-hover:rgba(255,255,255,.07); --bg-active:rgba(255,255,255,.12);
  --text:#E8E7E3; --text-secondary:#BAB8B2; --text-muted:#8B8A85;
  --accent:#10E0CD; --accent-hover:#35F2E1; --accent-soft:rgba(16,224,205,.15);
  --border:rgba(232,231,227,.16); --border-light:rgba(232,231,227,.09);
  --user-bubble:linear-gradient(135deg,#10E0CD,#23A8F0);
  --ai-bubble:rgba(30,31,38,.88);
  --shadow:0 2px 12px rgba(0,0,0,.45); --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 32px rgba(0,0,0,.55);
  --sk-art:url(/kjdex/skins/metal.jpg);
  --sk-scrim:rgba(8,9,11,.80);
  --sk-on-accent:#04201E;
  --sk-logo:invert(1) hue-rotate(180deg);
}

/* ---------- 美式涂鸦（深底 · 霓虹粉） ---------- */
html[data-skin="graffiti"]{
  --bg:#141218;
  --bg-sidebar:rgba(21,18,25,.68);
  --bg-card:rgba(30,26,35,.86); --card:rgba(30,26,35,.86);
  --bg-soft:rgba(28,25,34,.8); --bg-input:rgba(30,26,35,.74);
  --bg-hover:rgba(255,255,255,.07); --bg-active:rgba(255,255,255,.12);
  --text:#F3F0EE; --text-secondary:#C6C0BB; --text-muted:#948D88;
  --accent:#FF2F8E; --accent-hover:#FF5AA6; --accent-soft:rgba(255,47,142,.17);
  --border:rgba(243,240,238,.17); --border-light:rgba(243,240,238,.09);
  --user-bubble:linear-gradient(135deg,#FF2F8E,#FFD400);
  --ai-bubble:rgba(35,30,40,.88);
  --shadow:0 2px 12px rgba(0,0,0,.45); --shadow-md:0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:0 8px 32px rgba(0,0,0,.55);
  --sk-art:url(/kjdex/skins/graffiti.jpg);
  --sk-scrim:rgba(11,9,13,.80);
  --sk-on-accent:#1A040E;
  --sk-logo:invert(1) hue-rotate(180deg);
}


/* ================= 皮肤选择器（顶栏，复刻 gpu-switch 结构） ================= */
.skin-switch{position:relative;flex:0 0 auto;display:inline-flex;align-items:center}
.skin-pill{border:1px solid currentColor;background:transparent;color:inherit;opacity:.85;
  border-radius:18px;padding:4px 11px;font-size:13px;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;font-family:inherit;white-space:nowrap;transition:opacity .2s}
.skin-pill:hover{opacity:1}
.skin-panel{display:none;position:absolute;right:0;top:calc(100% + 6px);
  width:400px;max-width:calc(100vw - 24px);
  background:var(--bg-card,#fff);border:1px solid var(--border,rgba(13,13,14,.14));
  border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.22);z-index:1300;padding:12px;
  color:var(--text,#0d0d0e);font-size:13px;text-align:left}
.skin-switch.open .skin-panel{display:block}
.skin-panel-hd{display:flex;align-items:baseline;justify-content:space-between;
  padding:2px 2px 9px;border-bottom:1px solid var(--border-light,rgba(13,13,14,.09));margin-bottom:10px}
.skin-panel-hd b{font-size:13px;font-weight:600}
.skin-panel-hd span{font-size:11px;opacity:.55}
.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.skin-card{position:relative;border:1px solid var(--border,rgba(13,13,14,.14));border-radius:12px;
  padding:0;cursor:pointer;overflow:hidden;background:var(--bg-soft,rgba(128,128,128,.06));
  text-align:left;transition:transform .18s, box-shadow .18s, border-color .18s;font-family:inherit;color:inherit}
.skin-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.skin-card.active{border-color:var(--accent,#1A1A1A);
  box-shadow:0 0 0 2px var(--accent-soft,rgba(0,0,0,.08))}
.skin-thumb{height:60px;background-size:cover;background-position:center;display:block;position:relative}
.skin-thumb.plain{background:linear-gradient(135deg,#FAFAF8,#E9E9E6)}
.skin-thumb .sw{position:absolute;left:8px;bottom:7px;display:flex;gap:4px}
.skin-thumb .sw i{width:12px;height:12px;border-radius:50%;display:block;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.skin-meta{padding:7px 9px 8px;display:block}
.skin-meta .nm{font-size:12.5px;font-weight:600;display:block;line-height:1.3}
.skin-meta .ds{font-size:10.5px;opacity:.6;display:block;margin-top:2px;line-height:1.3}
.skin-card .tick{position:absolute;top:7px;right:7px;width:18px;height:18px;border-radius:50%;
  background:var(--accent,#1A1A1A);color:#fff;font-size:11px;line-height:18px;text-align:center;display:none}
.skin-card.active .tick{display:block}
.skin-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--border-light,rgba(13,13,14,.09));
  font-size:11px;opacity:.55;line-height:1.5}

/* ================= 可读性补丁（v2 · 均由无头真机量测发现，非猜） ================= */
/* a) logo.png 是黑字标，压在深色侧栏上会「隐身」 → 反相保色（黑→白，红点仍是红）
   注：classic 不套滤镜，保证与改造前像素级一致 */
html[data-skin]:not([data-skin="classic"]) .sb-logo,
html[data-skin]:not([data-skin="classic"]) .login-logo{ filter:var(--sk-logo,none); }

/* b) 「强调色作底 + 文字」的组件：文字色统一取 --sk-on-accent
      （metal 白/青只有 1.5:1；换成深墨后 11.2:1。anime/kawaii/classic 仍为白，值不变） */
.sb-new-btn, .sb-login-btn, .tool-send, .ec-btn:hover,
.cat-chip.active, .f-chip.active, .msg-user .msg-bubble{ color:var(--sk-on-accent,#FFFFFF); }
/* 皮肤面板对勾（本文件内定义，故需压过上面的 color:#fff） */
html[data-skin] .skin-card .tick{ color:var(--sk-on-accent,#FFFFFF); }

/* c) 用户气泡：style.css:740 用 `!important` 把气泡锁死在深色渐变上，
      导致皮肤的 --user-bubble 成为死代码。这里以更高权重的 !important 放行，
      令气泡跟随皮肤强调色；classic 不碰，保证与改造前像素级一致。 */
html[data-skin]:not([data-skin="classic"]) .msg-user .msg-bubble{
  background:var(--user-bubble) !important;
  color:var(--sk-on-accent,#FFFFFF) !important;
}
/* AI 气泡在 style.css:716 是「近乎全透明」的绿蓝薄雾，暗底上会直接透出背景图、
   失去卡片托底 → 非 classic 补一层卡片底色（渐变仍叠加其上） */
html[data-skin]:not([data-skin="classic"]) .msg-ai .msg-bubble{
  background-color:var(--bg-card);
}


/* ================= 可读性补丁 v4（2026-09-28 深夜 · 用户报障） =================
   症状：metal/graffiti 两套暗底皮肤下，桌面文字与背景糊在一起。
   真因：两款艺术背景图（霓虹涂鸦/金属反光）整体偏亮，scrim .58 压不暗，
         而 --text 已切浅色 → 浅字压亮区，对比度崩。
   对策：① scrim .58→.80（纹理仍可透出，正文可读性回到 4.5:1 以上）
         ② welcome 输入框水印「N O T H I N G」原为固定 rgba(200,200,198,.62)，
            暗皮肤下接 var(--text-muted) 随皮肤提亮 */
html[data-skin]:not([data-skin="classic"]) .welcome-zone::before{
  color:var(--text-muted,#949494);
  text-shadow:none;
}