/* FX-PLUS-BEGIN */
/* ==========================================================================
   fx-plus.css · 视觉效果增强
   全部引用自样式库：liuyiming2024/css_effect_map_collection
     · 毛玻璃效果/index.html    → backdrop-filter 毛玻璃顶栏 / 浮层
     · 滚动指示器/index.html    → 顶部滚动进度条
     · css边框四角/index.html   → 卡片四角装饰线
     · 纯css气泡背景/index.css  → Hero 区上浮气泡背景

   设计约束：
     1. 只做「追加」，不改动站点原有任何一条规则；
     2. 不接管主题 —— 各站点已有自己的亮暗方案（Cloud / Code 用
        [data-theme="dark"]，Chat / 主页用 body.dark），本文件只对
        这两种写法各补一份深色取值，不新增第三套机制；
     3. 效果所需 DOM 由 fx-plus.js 注入，不要求改页面结构。
   ========================================================================== */

/* ---------- 1. 毛玻璃效果（样式库：毛玻璃效果/index.html）---------- */

/* ⚠⚠ 这一段踩过一个真实的坑，删掉前务必先读：
   最初把 backdrop-filter 加在 #topbar 上，结果右上角「新建文件」菜单
   被侧栏盖住了 —— 点了没反应、被文件树遮在下面。

   根因：backdrop-filter 和 filter / transform 一样，会给元素同时创建
   ① 层叠上下文  ② 绝对定位后代的包含块。
   .top-menu 是 #topbar 的子元素，它的 z-index:60 本来是相对【根层叠
   上下文】算的（所以盖得住 z-index:55 的侧栏）；#topbar 一变成层叠上下
   文，这个 60 就被关在了 #topbar 内部，而 #topbar 自己在根上下文里相当
   于 0 —— 于是整个顶栏子树掉到侧栏下面。
   实测（Chromium + elementFromPoint）：
     加 backdrop-filter 前，菜单中心命中 BUTTON；加之后命中侧栏的 .name。

   修法：给 #topbar 显式 position + z-index，把整个顶栏子树抬回 60
   —— 正好是 .top-menu 原本的层级，相对顺序与改动前一致。
   注意：只加 position:relative 不够，z-index:auto 不抬层级，实测仍被盖。

   同类排查清单：以后给任何容器加 backdrop-filter / filter / transform /
   will-change 前，先确认它里面没有需要"浮出"去盖别的元素的子节点。 */

.nav, #topbar, .glass {
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  background: rgba(255, 255, 255, .72);
}
/* Code 的顶栏原本是 position:static、无 z-index，必须显式抬层级 */
#topbar {
  position: relative;
  z-index: 60;
}
/* 侧栏与浮层用弱一档的模糊（这些本来就是浮层，不存在"关住子节点"的问题） */
.sidebar, #sidebar, .modal, .dropdown {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* 深色取值：同时兼容 [data-theme="dark"] 与 body.dark 两种既有写法 */
html[data-theme="dark"] .nav,
html[data-theme="dark"] #topbar,
html[data-theme="dark"] .glass,
body.dark .nav,
body.dark #topbar,
body.dark .glass {
  background: rgba(23, 27, 34, .72);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] #sidebar,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .dropdown,
body.dark .sidebar,
body.dark #sidebar,
body.dark .modal,
body.dark .dropdown {
  background: rgba(23, 27, 34, .88);
}

/* ---------- 2. 滚动指示器（样式库：滚动指示器/index.html）---------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  background: linear-gradient(90deg, var(--brand, #3b7ff2), #7ee787);
  pointer-events: none;
  transition: width .08s linear;
}

/* ---------- 3. CSS 边框四角（样式库：css边框四角/index.html）---------- */
/* 伪元素实现四角各画两条 1px 短线，不需要改 DOM */
.corner-box { position: relative; }
.corner-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  --c: var(--brand, #3b7ff2);
  background:
    linear-gradient(var(--c), var(--c)) 0    0    / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    0    / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / 1px 14px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 14px no-repeat;
  opacity: .5;
  transition: opacity .2s ease;
}
.corner-box:hover::before { opacity: 1; }

/* ---------- 4. 纯 CSS 气泡背景（样式库：纯css气泡背景/index.css）---------- */
.hero { position: relative; overflow: hidden; }
.bubble-bgwall {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  pointer-events: none;
  z-index: 0;
}
/* ⚠ 第一版填充只有 .16 透明度的蓝，实测在浅色底上几乎看不见 ——
   白底 + 16% 蓝算出来的实际反差低于肉眼可辨阈值，等于白做。
   所以填充提到 .38，并加一道同色内描边：气泡上升时会经过文字后方，
   纯色块容易和文字糊在一起，有描边才有清晰的轮廓。 */
.bubble-bgwall li {
  position: absolute;
  bottom: -60px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: rgba(59, 127, 242, .38);
  box-shadow: inset 0 0 0 1px rgba(59, 127, 242, .55);
  animation: bubble-up 16s linear infinite;
}
/* 深色底反过来：气泡要比背景亮才看得见，换成更亮的蓝 */
html[data-theme="dark"] .bubble-bgwall li,
body.dark .bubble-bgwall li {
  background-color: rgba(125, 179, 255, .30);
  box-shadow: inset 0 0 0 1px rgba(125, 179, 255, .48);
}

.bubble-bgwall li:nth-child(1)  { left: 10%; animation-duration: 15s; }
.bubble-bgwall li:nth-child(2)  { left: 20%; width: 34px; height: 34px; animation-duration: 11s; animation-delay: 2s; }
.bubble-bgwall li:nth-child(3)  { left: 25%; animation-duration: 13s; animation-delay: 4s; }
.bubble-bgwall li:nth-child(4)  { left: 40%; width: 28px; height: 28px; animation-duration: 9s; }
.bubble-bgwall li:nth-child(5)  { left: 70%; animation-duration: 14s; animation-delay: 1s; }
.bubble-bgwall li:nth-child(6)  { left: 80%; width: 40px; height: 40px; animation-duration: 12s; animation-delay: 3s; }
.bubble-bgwall li:nth-child(7)  { left: 32%; width: 46px; height: 46px; animation-duration: 17s; animation-delay: 2s; }
.bubble-bgwall li:nth-child(8)  { left: 55%; width: 18px; height: 18px; animation-duration: 15s; animation-delay: 4s; }
.bubble-bgwall li:nth-child(9)  { left: 25%; width: 20px; height: 20px; animation-duration: 12s; animation-delay: 2s; }
.bubble-bgwall li:nth-child(10) { left: 85%; width: 44px; height: 44px; animation-duration: 16s; animation-delay: 5s; }

@keyframes bubble-up {
  0%   { opacity: 0;   transform: translateY(0)      rotate(0deg); }
  15%  { opacity: .65; }
  50%  { opacity: .85; transform: translateY(-55vh)  rotate(90deg); }
  100% { opacity: 0;   transform: translateY(-110vh) rotate(180deg); }
}
/* 让 Hero 里原有内容浮在气泡之上 */
.hero > *:not(.bubble-bgwall) { position: relative; z-index: 1; }

/* ---------- 5. 浮出面板：毛玻璃 + 四角 + 入场动画 ---------- */
/* 只作用于"自己本来就在最上层"的浮出面板。
   这里加 transform / backdrop-filter 是安全的：它们是层叠的终点，
   内部没有还要再往外浮的子节点（对比上面 #topbar 那个坑）。
   入场动画参考样式库「实现modal弹框动画」的位移+淡入思路。 */
.top-menu,
.modal-box,
.dropdown {
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}
html[data-theme="dark"] .top-menu,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .dropdown,
body.dark .top-menu,
body.dark .modal-box,
body.dark .dropdown {
  background: rgba(23, 27, 34, .88);
}

/* 四角装饰直接画在浮出面板上（不必等 JS 加 .corner-box） */
.top-menu::before,
.modal-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  --c: var(--brand, #3b7ff2);
  background:
    linear-gradient(var(--c), var(--c)) 0    0    / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    0    / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0    / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0    100% / 1px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 12px no-repeat;
  opacity: .45;
}

@keyframes fx-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.top-menu.open,
.modal-box,
.dropdown {
  animation: fx-pop-in .16s ease-out;
}

/* ---------- 6. 编辑区两层对齐的加固（预防性，非已验证修复）---------- */
/* Code 的编辑区是「透明 textarea 盖在高亮 div 上」的双层结构，两层必须
   用完全相同的字号/行高渲染，否则每行的偏差会累积 —— 表现为点第 8 行却
   输入到第 9 行，而行号槽还停在第 8 行。

   本环境实测（Chromium，桌面 1280 与手机 390 视口、14/20px、换行开关）
   两层逐行扫描全部对齐，复现不出来：因为默认文本缩放是 100%。
   真机上若开了系统「字体大小 / 网页文字缩放」，div 与 textarea 可能被按
   不同倍率放大，偏差就从第 8、9 行开始显形。
   这里把自动缩放锁死，强制两层用同一个倍率。代价是编辑器不跟随系统字号
   缩放 —— 对代码编辑区是合理的，代码需要精确对齐优先于可读性缩放。 */
#editor, #highlight {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 7. 尊重系统的减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bubble-bgwall { display: none; }
  .corner-box::before,
  .top-menu::before,
  .modal-box::before { transition: none; }
  .top-menu.open,
  .modal-box,
  .dropdown { animation: none; }
}
/* FX-PLUS-END */