/* ============================================================
 *  主题切换控件 · Theme Toggle  (zxcloudai)  v4
 *  ------------------------------------------------------------
 *  v4 重做要点（针对「太丑 / 图标不在圆圈中间」）：
 *    1. 几何：整块是 42px 正圆 + display:grid + place-items:center，
 *       图标层与背景层都绝对居中；标签改为「左侧浮层 tooltip」，
 *       不再参与 flex 布局 —— 旧版 gap:9px + 标签 max-width:0 会把
 *       24px 图标挤偏 4~5px，且 hover 时整颗钮会被撑宽变形。
 *    2. 视觉：去掉 conic-gradient 旋转光斑（那团紫色雾）与描边脉冲环，
 *       改为「深色玻璃 + 1px 暖金描边 + 极轻内高光」，与站点琥珀体系同源。
 *    3. 配色：暗色态暖金、浅色态深琥珀，两种主题都与页面主色协调。
 *    4. 图标：月牙换成几何居中的标准 crescent（原先 path 偏右下角）。
 *
 *  依赖：theme-toggle.js 生成 .tt-halo / .tt-ripple / .tt-icons / .tt-label
 *        （.tt-halo / .tt-ripple 保留占位但不再产出可见装饰）
 *  加载顺序：本文件在 light.css 之后（index.html 末尾），直接接管控件。
 * ============================================================ */

/* 登录后隐藏主题切换按钮（已登录态无意义且干扰）；
   退出登录后 body 去掉该类，按钮自动恢复。由 front-theme.js 控制。 */
body.tt-auth-hide #tt-toggle {
  display: none !important;
}

html.tt-ready,
html.tt-ready body {
  transition: background-color .45s cubic-bezier(.4, 0, .2, 1),
              color .45s cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------
 *  1. 本体：正圆玻璃钮
 * ---------------------------------------------------------- */
#tt-toggle {
  /* 深色（默认）—— 暖金 */
  --tt-size: 42px;
  --tt-bg: rgba(26, 23, 19, .74);
  --tt-bg-hover: rgba(38, 33, 26, .90);
  --tt-line: rgba(255, 190, 110, .22);
  --tt-line-hover: rgba(255, 190, 110, .48);
  --tt-fg: #e8a44a;
  --tt-fg-hover: #ffc478;
  --tt-shadow: 0 10px 26px -16px rgba(0, 0, 0, .92);
  --tt-inset: inset 0 1px 0 rgba(255, 236, 214, .10);
  --tt-tip-bg: rgba(30, 26, 21, .96);
  --tt-tip-fg: #f2e6d5;
  --tt-tip-line: rgba(255, 190, 110, .22);

  position: fixed;
  right: 26px;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;

  display: grid;
  place-items: center;
  width: var(--tt-size);
  height: var(--tt-size);
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 1px solid var(--tt-line);
  border-radius: 50%;
  background: var(--tt-bg);
  color: var(--tt-fg);
  box-shadow: var(--tt-shadow), var(--tt-inset);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  cursor: pointer;
  overflow: visible;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color .24s ease,
              border-color .24s ease,
              color .24s ease,
              box-shadow .24s ease,
              transform .3s cubic-bezier(.22, 1, .36, 1);
}

/* 浅色 —— 暖白玻璃 + 深琥珀图标（与浅色主题的纸感底色同族） */
html:not(.dark) #tt-toggle {
  --tt-bg: rgba(255, 253, 249, .94);
  --tt-bg-hover: #ffffff;
  --tt-line: rgba(52, 38, 20, .13);
  --tt-line-hover: rgba(169, 100, 27, .42);
  --tt-fg: #a9641b;
  --tt-fg-hover: #8c5213;
  --tt-shadow: 0 8px 22px -14px rgba(58, 40, 18, .38);
  --tt-inset: inset 0 1px 0 rgba(255, 255, 255, .9);
  --tt-tip-bg: rgba(255, 253, 249, .98);
  --tt-tip-fg: #352a1d;
  --tt-tip-line: rgba(52, 38, 20, .12);
}

#tt-toggle:hover {
  background: var(--tt-bg-hover);
  border-color: var(--tt-line-hover);
  color: var(--tt-fg-hover);
  transform: translateY(-1px) scale(1.04);
}
#tt-toggle:active {
  transform: translateY(0) scale(.95);
}
#tt-toggle:focus-visible {
  outline: 2px solid var(--tt-fg);
  outline-offset: 3px;
}

/* 旧版的旋转光斑 / 涟漪：保留节点，彻底隐去（纯装饰噪声） */
#tt-toggle .tt-halo,
#tt-toggle .tt-ripple {
  display: none !important;
}

/* ------------------------------------------------------------
 *  2. 图标层：三个图标叠在同一个 20px 方格中心
 * ---------------------------------------------------------- */
#tt-toggle .tt-icons {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  pointer-events: none;
}
#tt-toggle .tt-ic {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0;
  transform: rotate(-35deg) scale(.62);
  transition: opacity .26s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  overflow: visible;
}
#tt-toggle .tt-ic.is-active {
  opacity: 1;
  transform: rotate(0) scale(1);
}
/* 太阳光芒缓慢自转 */
#tt-toggle .tt-sun .tt-rays {
  transform-origin: 12px 12px;
  animation: tt-rays 24s linear infinite;
}
@keyframes tt-rays { to { transform: rotate(360deg); } }

/* 悬停时图标轻微放大（只动图标，不动钮，避免整颗钮抖） */
#tt-toggle:hover .tt-ic.is-active { transform: scale(1.06); }

/* ------------------------------------------------------------
 *  3. 标签 → 左侧浮层提示（绝对定位，绝不影响图标居中）
 * ---------------------------------------------------------- */
#tt-toggle .tt-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--tt-tip-line);
  background: var(--tt-tip-bg);
  color: var(--tt-tip-fg);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 500 12px/1 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}
#tt-toggle .tt-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tt-fg);
  box-shadow: 0 0 6px var(--tt-line-hover);
}
#tt-toggle .tt-text {
  white-space: nowrap;
  font: 500 12px/1 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: .3px;
}
#tt-toggle:hover .tt-label,
#tt-toggle:focus-visible .tt-label,
#tt-toggle.tt-hint .tt-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* 首次访问提示：不再画描边脉冲环，改为「描边呼吸」一次，克制不刺眼 */
#tt-toggle.tt-hint {
  animation: tt-hint-breathe 2.4s ease-in-out 1.2s 2;
}
@keyframes tt-hint-breathe {
  0%, 100% { border-color: var(--tt-line); }
  50%      { border-color: var(--tt-line-hover); }
}

/* ------------------------------------------------------------
 *  4. 无障碍 / 小屏
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #tt-toggle,
  #tt-toggle .tt-ic,
  #tt-toggle .tt-sun .tt-rays,
  #tt-toggle .tt-label,
  #tt-toggle.tt-hint {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 480px) {
  #tt-toggle {
    --tt-size: 38px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  #tt-toggle .tt-label { display: none !important; }
}