@charset "UTF-8";
/* ==========================================================================
   全局样式变量定义
   ========================================================================== */
/**
 * 定义微信风格聊天应用的全局CSS变量
 * @type {color} --primary-color - 微信主色 (绿色)
 * @type {color} --primary-hover - 悬停状态颜色
 * @type {color} --text-primary - 主要文本颜色
 * @type {color} --text-secondary - 次要文本颜色
 * @type {color} --border-color - 边框颜色
 * @type {color} --bg-white - 白色背景
 * @type {color} --bg-gray - 灰色背景
 * @type {shadow} --shadow-sm - 小阴影效果
 * @type {shadow} --shadow-md - 中等阴影效果
 * @type {shadow} --shadow-lg - 大阴影效果
 * @type {size} --radius-sm - 小圆角半径
 * @type {size} --radius-md - 中等圆角半径
 * @type {size} --radius-lg - 大圆角半径
 * @type {size} --radius-xl - 超大圆角半径
 * @type {size} --vh - 用于修复iOS Safari的100vh问题
 */

:root {
    --primary-color: #07c160;      /* 微信主色 */
    --primary-hover: #06ad56;       /* 悬停态 */
    --primary-light: #e6f7ff;       /* 浅色背景 */
    --text-primary: #333;           /* 主要文本 */
    --text-secondary: #999;         /* 次要文本 */
    --text-light: #ccc;             /* 轻量文本 */
    --border-color: #e0e0e0;        /* 边框颜色 */
    --bg-white: #ffffff;            /* 白色背景 */
    --bg-gray: #f5f5f5;             /* 灰色背景 */
    --bg-hover: #f0f0f0;            /* 悬停背景 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Safari和iOS优化 */
    --vh: 1vh;  /* 用于修复iOS Safari的100vh问题 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    background-color: var(--bg-gray);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}