/* ========================================
   主应用样式文件 (App.css)
   用途：定义全局主题变量、应用布局和响应式设计
   ======================================== */

/* ========================================
   CSS 自定义属性 (主题变量)
   ======================================== */

/* CSS 自定义属性 (主题变量) - GitHub 主题 */
:root {
  /* GitHub 颜色系统 */
  --color-bg: #ffffff;                    /* 主背景色 - 纯白 */
  --color-surface: #f6f8fa;               /* 表面背景色 - GitHub 浅灰 */
  --color-surface-alt: #ffffff;           /* 替代表面色 - 纯白 */
  --color-border: #d0d7de;                /* 边框颜色 - GitHub 边框灰 */
  --color-text: #24292f;                  /* 主文本颜色 - GitHub 黑 */
  --color-muted: #57606a;                 /* 次要文本颜色 - GitHub 灰 */
  --color-accent: #0969da;                /* 强调色 - GitHub 蓝 */
  --color-accent-soft: rgba(9, 105, 218, 0.1); /* 柔和强调色 - 半透明蓝色 */
  --color-danger: #cf222e;                /* 危险/错误色 - GitHub 红 */
  --color-success: #2da44e;               /* 成功色 - GitHub 绿 */
  
  /* 布局尺寸 - 定义组件的尺寸规范 */
  --sidebar-width: clamp(250px, 20vw, 300px);        /* 桌面端侧边栏宽度 - 响应式 */
  --sidebar-width-mobile: clamp(250px, 35vw, 280px); /* 移动端侧边栏宽度 - 响应式 */
  
  /* 视觉效果 - GitHub 风格 */
  --shadow-soft: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
  --radius-md: 6px;                       /* 中等圆角半径 - GitHub 标准 */
  
  /* 字体系统 - LXGWWenKaiMono 字体族 */
  --font-family-base: 'LXGWWenKaiMono', ui-monospace, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ========================================
   全局样式重置
   ======================================== */

/* 盒模型重置 - 确保所有元素使用 border-box */
* {
  box-sizing: border-box;
  font-family: 'LXGWWenKaiMono', ui-monospace, var(--font-family-base);
}

/* ========================================
   页面基础布局
   ======================================== */

/* HTML 和 Body 基础样式 - GitHub 风格 */
html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* GitHub 风格纯色背景 */
  background: #ffffff;
  color: var(--color-text);
  font-family: var(--font-family-base);
  overflow-x: hidden;                     /* 防止水平滚动 */
  width: 100%;
  max-width: 100vw;
  /* 全局隐藏滚动条 - 提供更清洁的视觉体验 */
  scrollbar-width: none;                  /* Firefox */
  -ms-overflow-style: none;               /* IE and Edge */
}

/* 全局隐藏 WebKit 浏览器的滚动条 */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* ========================================
   浮动展开按钮（侧边栏关闭时显示）
   ======================================== */

.floating-open-button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  /* 柔和的 GitHub 风格 */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  color: var(--color-muted);
  border: 1px solid rgba(208, 215, 222, 0.6);
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.08);
  font-family: 'LXGWWenKaiMono', ui-monospace, var(--font-family-base);
  opacity: 0.8;
}

.floating-open-button:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--color-accent);
  border-color: var(--color-accent);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(9, 105, 218, 0.15);
}

.floating-open-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(9, 105, 218, 0.12);
}

/* ========================================
   应用根容器布局
   ======================================== */

/* React 根容器 */
#root {
  min-height: 100vh;
  display: flex;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* 主应用容器 - GitHub 风格 */
.app {
  flex: 1;
  display: flex;
  min-height: 100vh;
  border-radius: 0;
  /* GitHub 风格纯色背景 */
  background: #ffffff;
  border: none;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

/* ========================================
   全局交互样式
   ======================================== */

/* ========================================
   全局交互样式
   ======================================== */

/* 文本选择样式 - GitHub 风格 */
body ::selection {
  background-color: rgba(9, 105, 218, 0.15);
  color: var(--color-text);
}

/* 全局隐藏所有滚动条 - 统一的滚动条隐藏策略 */
::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;                  /* Firefox */
  -ms-overflow-style: none;               /* IE and Edge */
}

/* 焦点样式 - GitHub 风格 */
button:focus,
a:focus {
  outline: 2px solid #0969da;
  outline-offset: 2px;
}

/* ========================================
   响应式设计 - 移动端适配
   ======================================== */

/* 手机屏幕适配 (768px 以下) */
@media (max-width: 768px) {
  /* 手机端字体放大 - 提高移动端可读性 */
  html {
    font-size: 150%;                      /* 基础字体大小放大 1.5 倍 */
  }

  /* 移动端侧边栏宽度变量 */
  :root {
    --sidebar-width-mobile: 280px;
  }

  /* 移动端页面布局优化 */
  html, body {
    overflow-x: hidden;                   /* 严格防止水平滚动 */
    width: 100%;
    max-width: 100vw;
  }

  /* 移动端根容器 */
  #root {
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 移动端应用容器 */
  .app {
    min-height: 100vh;
    border-radius: 0;                     /* 移动端去除圆角 */
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    flex-direction: row;                  /* 保持水平布局 */
  }
}
