/* 全局：纯白背景，清空默认边距 */
html, body {
  height: 100%; /* 高度占满视口 */
  margin: 0; /* 清除默认外边距 */
  background: #ffffff; /* 白色背景 */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; /* 系统字体栈，支持中英文 */
}

/* ============ 左上角 Logo 区域（紧贴左上角） ============ */
.logo-container {
  position: fixed; /* 固定定位 */
  left: 10px; /* 距离左侧10px */
  top: 0; /* 距离顶部0px */
  z-index: 100; /* 层级100 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  transform: translate(0, 0); /* 确保完全紧贴 */
}

/* 视频 logo 容器：绝对定位到左上角，必须 position: relative 才能让 poster/vid 以它为基准绝对定位 */
.logo {
  position: absolute; /* 绝对定位，紧贴左上角 */
  left: 0; /* 距离左侧0px，相对于logo-container */
  top: 0; /* 距离顶部0px */
  width: 115px; /* 固定宽度115px */
  height: 115px; /* 固定高度115px */
  min-width: 0; /* 最小宽度0 */
  min-height: 0; /* 最小高度0 */
  overflow: hidden; /* 隐藏溢出内容 */
  background: #ffffff; /* 白色背景 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  z-index: 101; /* 层级101 */
}

/* poster/vid 全部铺满容器 */
.poster {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 四个方向都为0，铺满父容器 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  object-fit: cover; /* 覆盖整个容器，保持比例 */

  user-select: none; /* 禁止文本选择 */
  -webkit-user-drag: none; /* 禁止拖拽 */
  pointer-events: none; /* 禁止鼠标事件 */
}

.vid {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 四个方向都为0，铺满父容器 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  object-fit: cover; /* 覆盖整个容器，保持比例 */

  opacity: 0; /* 默认透明 */
  pointer-events: none; /* 禁止鼠标事件 */
}

.vid.is-on {
  opacity: 1; /* 显示视频 */
}

.hitbox {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 四个方向都为0，铺满父容器 */
  background: transparent; /* 透明背景 */
  cursor: default; /* 默认鼠标样式 */
}

/* ============ 左下角 Character Logo ============ */
.bottom-left-logos {
  position: fixed; /* 固定定位 */
  left: 5px; /* 距离左侧5px */
  bottom: 10px; /* 距离底部10px */
  z-index: 100; /* 层级100 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
}

.character-logo-link {
  display: block; /* 块级显示 */
  text-decoration: none; /* 去除下划线 */
  cursor: pointer; /* 鼠标指针样式 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
}

.character-logo-bottom {
  height: auto; /* 高度自适应 */
  width: auto; /* 宽度自适应 */
  max-height: 30px; /* 最大高度30px */
  display: block; /* 块级显示 */
  user-select: none; /* 禁止文本选择 */
  -webkit-user-drag: none; /* 禁止拖拽 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
}

/* ============ 右下角社交媒体 Logo ============ */
.bottom-right-logos {
  position: fixed; /* 固定定位 */
  right: 10px; /* 距离右侧10px */
  bottom: 10px; /* 距离底部10px */
  z-index: 100; /* 层级100 */
  display: flex; /* 弹性布局 */
  align-items: flex-end; /* 底部对齐 */
  gap: 5px; /* 社交媒体logo之间5px间距 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
}

.social-logo-link {
  display: block; /* 块级显示 */
  line-height: 0; /* 消除链接的默认行高 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  text-decoration: none; /* 去除下划线 */
  cursor: pointer; /* 鼠标指针样式 */
}

.social-logo {
  height: auto; /* 高度自适应 */
  width: auto; /* 宽度自适应 */
  max-height: 30px; /* 最大高度30px */
  display: block; /* 块级显示 */
  user-select: none; /* 禁止文本选择 */
  -webkit-user-drag: none; /* 禁止拖拽 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  filter: opacity(0.35); /* 默认35%透明度，显示为灰色 */
  transition: filter 0.2s ease; /* 透明度过渡动画0.2秒 */
}

.social-logo-link:hover .social-logo,
.social-logo-link:focus .social-logo {
  filter: opacity(1); /* hover时恢复100%不透明度，显示原色（黑色） */
}

/* ============ 左侧标签面板 ============ */
/* top/height 会被 JS 动态覆盖（根据视频 logo 的高度） */
.left-panel {
  position: fixed; /* 固定定位 */
  left: 5px; /* 距离左侧5px */
  top: 115px; /* 兜底值：JS 会改，距离顶部115px */
  width: 200px; /* 宽度200px */
  height: calc(100vh - 115px); /* 兜底值：JS 会改，高度为视口高度减去115px */
  padding: 0px 16px 16px 16px; /* 内边距：上0px 右16px 下16px 左16px */
  background: #ffffff; /* 白色背景 */
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
}

.tabs {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
  gap: 7px; /* 标签之间间距7px */
}

.tab {
  appearance: none; /* 移除浏览器默认样式 */
  border: none; /* 移除边框 */
  background: #ffffff; /* 白色背景 */
  color: #111; /* 文字颜色深灰 */
  font-family: 'Inter', system-ui, -apple-system, sans-serif; /* 使用Inter字体 */
  font-size: 14px; /* 字体大小14px */
  font-weight: 500; /* 字重450，中等粗细 */
  padding: 10px 12px 10px 14px; /* 内边距：上10px 右12px 下10px 左14px */
  cursor: pointer; /* 鼠标指针样式 */
  text-align: left; /* 文字左对齐 */
  border-radius: 10px; /* 圆角半径10px */
  transition: all 0.2s; /* 所有属性过渡动画0.2秒 */
}

.tab:hover {
  background: rgb(245, 245, 245); /* hover时背景色#f5f5f5 */
}

.tab.is-active {
  background: rgb(245, 245, 245); /* 激活状态背景色#f5f5f5 */
}

/* ============ 右侧 Notion 页面区域 ============ */
.notion-container {
  position: fixed; /* 固定定位 */
  left: 225px; /* 距离左侧220px */
  right: 0; /* 距离右侧0px */
  top: 0; /* 距离顶部0px */
  bottom: 50px; /* 距离底部50px */
  background: #ffffff; /* 白色背景 */
}

.notion-frame {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 四个方向都为0，铺满父容器 */
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  border: none; /* 无边框 */
  display: none; /* 默认隐藏 */
}

.notion-frame.is-active {
  display: block; /* 激活时显示为块级元素 */
}

/* 小屏适配 */
@media (max-width: 900px) {
  .logo-container {
    display: none; /* 隐藏视频logo */
  }

  .left-panel {
    width: 100vw; /* 宽度占满视口宽度 */
    height: auto !important; /* 高度自适应，覆盖JS设置 */
    max-height: 200px; /* 最大高度200px */
    top: 10px !important; /* 距离顶部0px，紧贴顶部，覆盖JS设置的115px */
    padding: 0px 0px 10px 16px; /* 内边距：上0px 右0px 下0px 左16px */
    border-right: none; /* 无右边框 */
    border-bottom: none; /* 无底部边框*/
    overflow-x: auto; /* 水平方向允许滚动 */
    overflow-y: hidden; /* 垂直方向隐藏溢出 */
    box-sizing: border-box; /* 盒模型包含边框和内边距 */
    padding-right: 16px; /* 右侧内边距16px */
    scrollbar-width: none; /* Firefox: 隐藏滚动条 */
    -ms-overflow-style: none; /* IE和Edge: 隐藏滚动条 */
  }

  .left-panel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera: 隐藏滚动条 */
  }

  .tabs {
    flex-direction: row; /* 水平排列 */
    flex-wrap: nowrap; /* 不换行 */
  }

  .tab {
    white-space: nowrap; /* 文字不换行 */
    flex-shrink: 0; /* 不收缩 */
    font-size: 15px; /* 小屏时字体大小，可在此修改 */
  }

  .notion-container {
    left: 0; /* 距离左侧0px */
    top: 50px; /* 距离顶部160px */
  }
}