/* ========================================= */
/* 文件：base.css                              */
/* 功能：整个页面的地基 —— 配色变量、iOS全屏   */
/*       修复、星空背景底图、页面容器四角打钉， */
/*       所有页面共享的最底层零件都在这         */
/* ========================================= */

/* --- 配色变量 --- */
:root {
  /* 默认聊天背景：这里填你原来的那张图 */
  --chat-bg-url: url("../../assets/聊天背景.jpg");
}

/* --- iOS 全屏修复 --- */
html {
  background-color: #05070f;
  min-height: calc(100% + env(safe-area-inset-top));
}

/* --- 页面底色与背景 --- */
body {
  margin: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  background: linear-gradient(rgba(11,15,26,0.86), rgba(11,15,26,0.86)), url("../../assets/星泊地.webp") no-repeat center center;
  background-size: cover;
  background-color: #05070f;
  color: #fff;
  height: 100dvh;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  overscroll-behavior: none;
}

/* --- 全局盒子模型 --- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* --- 动态背景层 --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(5,7,15,0.7), rgba(5,7,15,0.7)), url("../../assets/星泊地.webp") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* --- 页面主容器 --- */
.app-container {
  width: 100%;
  max-width: 420px;

  /* 四角打钉，物理焊死在屏幕上 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;

  /* 夹层壁纸层 */
  background: linear-gradient(rgba(11,15,26,0.86), rgba(11,15,26,0.86)), url("../../assets/星泊地.webp") no-repeat center center;
  background-size: cover;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- 电脑端适配 --- */
@media (min-width: 450px) {
  .app-container {
    border-radius: 16px;
    max-height: 720px;
    margin-top: auto;
    margin-bottom: auto;
  }
}