:root {
  --tooltip-bg-color: #ffffff;
  --tooltip-border-color: #d1d9e0;
  --tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --tooltip-bg-color: #1e1e1e;
    --tooltip-border-color: #444444;
    --tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

.tooltip-link {
  position: relative;
  /* display: inline-block; */
  cursor: pointer;
  font-weight: 500;
  z-index: 100;
  /* 所有的link的高度都要超过overlay，低于浮窗 */
  -webkit-tap-highlight-color: transparent;

  /* 桌面端hover/移动端第一次点击 */
  &.is-peeking {
    background-color: var(--bg-color-active);
    outline: 1px solid var(--link-color);
    border-radius: 3px;
  }
}

/* 2. 浮窗容器通用重置 (不分设备) */
#global-tooltip {
  position: fixed;
  /* 默认隐藏状态 */
  visibility: hidden;
  opacity: 0;
  transition: var(--transition-hidden);

  z-index: 101;
  color: var(--text-color);
  padding: 12px 20px;

  background-color: var(--tooltip-bg-color);
  border: 1px solid var(--tooltip-border-color);
  box-shadow: var(--tooltip-shadow);
  border-radius: 8px;
  & > p {
    text-align: left;
    white-space: normal;
    font-size: 0.9em;
    margin: 0;
  }
  p + p {
    margin-top: 0.5lh;
  }
}
/* 展开弹窗 */
body:has(.tooltip-link.is-peeking) #global-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-timing-function: var(--ease-out-apple);
  transition-duration: 0.25s;
}

/* ============================================================
   设备适配逻辑
   ============================================================ */
/* 4. 桌面端 (769px 以上)：相对于引用文字悬浮（由js实现） */
@media screen and (min-width: 769px) {
  #global-tooltip {
    transform: translateY(20px);
    width: 300px;
    /* 小箭头 这个画法太天才了 */
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
    }
    &:not(.is-bottom)::after {
      top: 100%;
      border-top-color: var(--tooltip-bg-color);
      filter: drop-shadow(0 1px 0 var(--tooltip-border-color));
    }
    &.is-bottom::after {
      bottom: 100%;
      border-bottom-color: var(--tooltip-bg-color);
      filter: drop-shadow(0 -1px 0 var(--tooltip-border-color));
    }
  }
}

/* 5. 移动端 (768px 以下)：强制吸底 */
@media screen and (max-width: 768px) {
  #global-tooltip {
    /* 浮于nav上方 */
    inset: auto var(--floating-side-gap) var(--nav-height-space) var(--floating-side-gap);
    transform: translateY(120%); /* 动画：从下方滑入 */
  }

  #tooltip-overlay {
    z-index: 90;
  }

  body:has(.tooltip-link.is-peeking) #tooltip-overlay {
    visibility: visible;
  }
}