src/components/controls/FloatingControls.astro

---
import type { MarkdownHeading } from "astro";
import BackToHome from "./BackToHome.astro";
import BackToTop from "./BackToTop.astro";
import FloatingTOC from "./FloatingTOC.astro";

interface Props {
	headings?: MarkdownHeading[];
}

const { headings } = Astro.props;
---

<div class="floating-controls-container">
  <FloatingTOC headings={headings ?? []} />
  <BackToHome />
  <BackToTop />
</div>

<style>
  .floating-controls-container {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end; /* 右对齐 */
    pointer-events: none; /* 容器不阻挡点击 */
    
    /* 默认桌面端位置 - 对应 BackToTop 的位置 */
    right: 2rem;
    bottom: 4rem;
  }

  /* 响应式调整 - 保持原有的位置逻辑 */
  @media (max-width: 1024px) {
    .floating-controls-container {
      right: 1rem;
      bottom: 4rem;
    }
  }

  @media (max-width: 768px) {
    .floating-controls-container {
      right: 0.75rem;
      bottom: 4rem;
      gap: 0.5rem;
    }
  }

  @media (max-width: 480px) {
    .floating-controls-container {
      right: 0.5rem;
      bottom: 4rem;
    }
  }

  /* 高缩放比例适配 */
  @media (min-resolution: 2dppx) {
    .floating-controls-container {
      right: max(0.5rem, 2rem - 2vw);
      bottom: max(3rem, 4rem - 5vh);
    }
  }
  
  /* 横屏模式适配 */
  @media (orientation: landscape) and (max-height: 500px) {
    .floating-controls-container {
      bottom: 4rem; 
    }
  }

  /* 极低分辨率适配 */
  @media (max-width: 320px) {
    .floating-controls-container {
        right: 0.125rem;
        bottom: 4rem;
    }
  }
</style>