/* ============================================
   dynamic-island.css - 灵动岛（液态玻璃长条）
   开启后隐藏导航栏，顶部显示可伸缩的灵动岛
   by yuyu
   ============================================ */

/* ---- 灵动岛容器（默认收缩为小胶囊，不显示内容） ---- */
.di-island {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  width: 46px;
  border-radius: 26px;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  cursor: default;
  /* 高斯模糊（与导航栏按钮一致），更透 */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16));
  /* 外圈发光与导航栏主题圆点一致：黑页发橙光 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 30px rgba(0, 0, 0, 0.18),
    0 0 20px rgba(255, 105, 0, 0.5);
  transform-origin: 50% 50%;
  transition: width 0.45s cubic-bezier(0.34, 1.3, 0.4, 1),
    border-radius 0.45s ease,
    transform 0.45s cubic-bezier(0.34, 1.3, 0.4, 1);
}

/* 悬浮时拉长（宽度由 JS 计算内容自然宽度；竖屏下整个外壳按 --di-scale 等比缩小） */
.di-island.expanded {
  width: var(--di-expanded-width, min(94vw, 560px));
  border-radius: 28px;
  justify-content: center;
  transform: translateX(-50%) scale(var(--di-scale, 1));
}

/* ---- 灵动岛内容（默认隐藏，悬浮后显示） ---- */
.di-content {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.35s ease 0.12s, visibility 0.35s ease 0.12s, transform 0.35s ease 0.12s;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
}

.di-island.expanded .di-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- 通用胶囊按钮 ---- */
.di-pill {
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary, #fff);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.di-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.di-pill svg {
  width: 17px;
  height: 17px;
}

/* ---- 语言选择器 ---- */
.di-lang {
  position: relative;
}

.di-lang-card {
  position: fixed;
  bottom: auto;
  z-index: 2147482100;
  min-width: 190px;
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.di-lang-card.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.di-lang-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text-primary, #fff);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}

.di-lang-option:hover {
  background: rgba(255, 255, 255, 0.10);
}

.di-lang-option.active {
  background: rgba(255, 255, 255, 0.16);
  color: #007AFF;
}

.di-lang-region {
  font-size: 11px;
  color: var(--text-muted, #9090a0);
}

/* ---- 主题圆点 ---- */
.di-theme-dots {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
}

.di-theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.di-theme-dot[data-theme="dark"]   { background: #0a0a0f; }
.di-theme-dot[data-theme="light"]  { background: #f5f5f7; }
.di-theme-dot[data-theme="orange"] { background: #ff6900; }

.di-theme-dot:hover {
  transform: scale(1.2);
}

/* 选中主题圆点外圈发光（与导航栏主题切换一致） */
/* 黑色圆点选中发橙光 */
html[data-theme="dark"] .di-theme-dot[data-theme="dark"].active,
.di-theme-dot[data-theme="dark"].active {
  box-shadow: 0 0 10px 2px rgba(255, 105, 0, 0.75);
}

/* 白色圆点选中发黑光 */
html[data-theme="light"] .di-theme-dot[data-theme="light"].active,
.di-theme-dot[data-theme="light"].active {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.55);
}

/* 橙色圆点选中发白光（与参考文件一致） */
html[data-theme="orange"] .di-theme-dot[data-theme="orange"].active,
.di-theme-dot[data-theme="orange"].active {
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
}

/* ---- 图标按钮（粒子 / 图片 / 齿轮） ---- */
.di-icon-btn {
  width: 34px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.di-icon-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

/* 关闭状态：改为灰暗 + 斜杠划掉，表示已停用 */
.di-icon-btn.inactive {
  opacity: 1;
  background: rgba(120, 120, 130, 0.14);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5);
}

.di-icon-btn.inactive svg {
  opacity: 1;
}

.di-icon-btn.inactive .di-off-slash {
  display: block;
}

.di-off-slash {
  display: none;
  position: absolute;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  transform: rotate(-45deg);
  pointer-events: none;
}

/* 图标按钮容器相对定位，用于放置斜杠 */
.di-icon-btn {
  position: relative;
}

.di-icon-btn svg {
  width: 17px;
  height: 17px;
}

/* 链接型按钮（返回首页 / 设置） */
a.di-pill {
  text-decoration: none;
}

.v-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 2px;
}

/* 浅色主题适配 */
[data-theme="light"] .di-island {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 26px rgba(0, 0, 0, 0.14),
    0 0 20px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .di-pill,
[data-theme="light"] .di-icon-btn {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.12);
}

/* 橙色页面：发橙光（与导航栏主题圆点一致） */
[data-theme="orange"] .di-island {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 26px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(255, 105, 0, 0.55);
}

[data-theme="light"] .di-icon-btn.inactive {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .di-off-slash {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .di-lang-card {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

/* 橙色主题：灵动岛语言切换卡片背景改为橙色，文字颜色做相应调整 */
[data-theme="orange"] .di-lang-card {
  background: #ff6900;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}
[data-theme="orange"] .di-lang-card .di-lang-option {
  color: #ffffff;
}
[data-theme="orange"] .di-lang-card .di-lang-option:hover {
  background: rgba(255, 255, 255, 0.22);
}
[data-theme="orange"] .di-lang-card .di-lang-option.active {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
[data-theme="orange"] .di-lang-card .di-lang-region {
  color: rgba(255, 235, 220, 0.92);
}

/* ============================================
   全站性能：后台标签页暂停 CSS 动画
   site-config.js 会给 <html> 加 perf-idle 类
   ============================================ */
html.perf-idle *,
html.perf-idle *::before,
html.perf-idle *::after {
  animation-play-state: paused !important;
}

/* ============================================
   全站性能：系统开启“减弱动态效果”时降级
   仅关闭装饰性动画，保留布局与关键过渡
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}