/* 开口项目 — CSS变量（色彩/圆角/间距/字体） */

:root {
  /* === 背景色系 === */
  --bg-main: #F8F0E8;              /* 米粉底色 */
  --bg-main-light: #FCEBDD;        /* 浅暖粉，渐变起点 */
  --bg-card: rgba(0, 0, 0, 0.04);  /* 卡片半透明 */
  --bg-input: rgba(0, 0, 0, 0.06); /* 输入框底 */
  --bg-divider: rgba(0, 0, 0, 0.06); /* 分隔线 */

  /* === 暖光色系（开口的体温） === */
  --accent: #FB9170;               /* 珊瑚橙，主强调 */
  --accent-btn: #FB8F6E;           /* 按钮专用，稍深 */
  --accent-light: #FCEBDD;         /* 浅珊瑚，背景光晕 */
  --accent-glow: rgba(251, 145, 112, 0.3); /* 选中态发光边 */

  /* === 文字色系 === */
  --text-primary: #332622;         /* 深暖灰，主文字 */
  --text-secondary: #998E86;       /* 暖灰，副文字 */
  --text-dim: #5A5260;             /* 暗灰，淡文字 */
  --text-on-accent: #FEFAF7;       /* 强调色上的白字 */

  /* === 关系主题色 === */
  --relation-lover: #FF9C6C;       /* 恋人-暖橙 */
  --relation-confidant: #FFD166;   /* 知己-暖黄 */
  --relation-buddy: #6ECB9E;       /* 朋友-薄荷绿 */
  --relation-coach: #64B5F6;       /* 教练-冷蓝 */
  --relation-advisor: #B39DDB;     /* 顾问-淡紫 */

  /* === 气泡色 === */
  --bubble-kaikou: #FB9170;        /* 开口气泡-珊瑚橙 */
  --bubble-user: rgba(0, 0, 0, 0.04); /* 用户气泡-半透明 */
  --status-online: #7CFF6B;        /* 在线绿 */
  --status-offline: #5A5260;       /* 离线灰 */

  /* === 圆角 === */
  --radius-lg: 20px;   /* 弹窗、大卡片 */
  --radius-md: 12px;   /* 按钮、输入框、气泡 */
  --radius-sm: 8px;    /* 标签、徽章 */
  --radius-full: 50%;  /* 头像 */

  /* === 间距 === */
  --spacing-page: 24px;   /* 页面安全边距 */
  --spacing-card: 16px;   /* 卡片间距 */
  --spacing-bubble: 16px; /* 气泡间距 */
  --spacing-title: 36px;  /* 标题与内容间距 */

  /* === 字体 === */
  --font-title: 'LXGW WenKai', cursive, serif; /* 手写体 */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 正文 */

  /* === 字号 === */
  --fs-hero: 44px;      /* 品牌名"开口" */
  --fs-page-title: 22px; /* 页面主标题 */
  --fs-subtitle: 13px;   /* 副文案 */
  --fs-guide: 20px;      /* 引导文案 */
  --fs-body: 16px;       /* 正文 */
  --fs-small: 13px;      /* 小字 */
  --fs-tiny: 11px;       /* 时间戳 */

  /* === 字间距 === */
  --ls-hero: 0.25em;    /* 主标题 */
  --ls-subtitle: 0.3em; /* 副文案 */
  --ls-guide: 0.15em;   /* 引导文案 */

  /* === 按钮尺寸 === */
  --btn-width: 58.9%;   /* 主按钮宽度 */
  --btn-height: 52px;   /* 主按钮高度 */
  --btn-radius: 12px;

  /* === 头像尺寸 === */
  --avatar-sm: 32px;    /* 聊天页小头像 */
  --avatar-md: 56px;    /* 音色选择页 */
  --avatar-lg: 120px;   /* 通话页超大头像 */

  /* === 动效时长 === */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-breathe: 3s;

  /* === 安全区 === */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* === 深色模式 === */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #1E191A;
    --bg-main-light: #2A2224;
    --bg-card: rgba(255, 255, 255, 0.06);
    --bg-input: rgba(255, 255, 255, 0.08);
    --bg-divider: rgba(255, 255, 255, 0.08);
    --text-primary: #F0E8E0;
    --text-secondary: #9A9098;
    --text-dim: #7A7078;
    --bubble-user: rgba(255, 255, 255, 0.06);
  }
}

/* 开口项目 — 全局样式reset */

/* 开口项目 — CSS变量（色彩/圆角/间距/字体） */

:root {
  /* === 背景色系 === */
  --bg-main: #F8F0E8;              /* 米粉底色 */
  --bg-main-light: #FCEBDD;        /* 浅暖粉，渐变起点 */
  --bg-card: rgba(0, 0, 0, 0.04);  /* 卡片半透明 */
  --bg-input: rgba(0, 0, 0, 0.06); /* 输入框底 */
  --bg-divider: rgba(0, 0, 0, 0.06); /* 分隔线 */

  /* === 暖光色系（开口的体温） === */
  --accent: #FB9170;               /* 珊瑚橙，主强调 */
  --accent-btn: #FB8F6E;           /* 按钮专用，稍深 */
  --accent-light: #FCEBDD;         /* 浅珊瑚，背景光晕 */
  --accent-glow: rgba(251, 145, 112, 0.3); /* 选中态发光边 */

  /* === 文字色系 === */
  --text-primary: #332622;         /* 深暖灰，主文字 */
  --text-secondary: #998E86;       /* 暖灰，副文字 */
  --text-dim: #5A5260;             /* 暗灰，淡文字 */
  --text-on-accent: #FEFAF7;       /* 强调色上的白字 */

  /* === 关系主题色 === */
  --relation-lover: #FF9C6C;       /* 恋人-暖橙 */
  --relation-confidant: #FFD166;   /* 知己-暖黄 */
  --relation-buddy: #6ECB9E;       /* 朋友-薄荷绿 */
  --relation-coach: #64B5F6;       /* 教练-冷蓝 */
  --relation-advisor: #B39DDB;     /* 顾问-淡紫 */

  /* === 气泡色 === */
  --bubble-kaikou: #FB9170;        /* 开口气泡-珊瑚橙 */
  --bubble-user: rgba(0, 0, 0, 0.04); /* 用户气泡-半透明 */
  --status-online: #7CFF6B;        /* 在线绿 */
  --status-offline: #5A5260;       /* 离线灰 */

  /* === 圆角 === */
  --radius-lg: 20px;   /* 弹窗、大卡片 */
  --radius-md: 12px;   /* 按钮、输入框、气泡 */
  --radius-sm: 8px;    /* 标签、徽章 */
  --radius-full: 50%;  /* 头像 */

  /* === 间距 === */
  --spacing-page: 24px;   /* 页面安全边距 */
  --spacing-card: 16px;   /* 卡片间距 */
  --spacing-bubble: 16px; /* 气泡间距 */
  --spacing-title: 36px;  /* 标题与内容间距 */

  /* === 字体 === */
  --font-title: 'LXGW WenKai', cursive, serif; /* 手写体 */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 正文 */

  /* === 字号 === */
  --fs-hero: 44px;      /* 品牌名"开口" */
  --fs-page-title: 22px; /* 页面主标题 */
  --fs-subtitle: 13px;   /* 副文案 */
  --fs-guide: 20px;      /* 引导文案 */
  --fs-body: 16px;       /* 正文 */
  --fs-small: 13px;      /* 小字 */
  --fs-tiny: 11px;       /* 时间戳 */

  /* === 字间距 === */
  --ls-hero: 0.25em;    /* 主标题 */
  --ls-subtitle: 0.3em; /* 副文案 */
  --ls-guide: 0.15em;   /* 引导文案 */

  /* === 按钮尺寸 === */
  --btn-width: 58.9%;   /* 主按钮宽度 */
  --btn-height: 52px;   /* 主按钮高度 */
  --btn-radius: 12px;

  /* === 头像尺寸 === */
  --avatar-sm: 32px;    /* 聊天页小头像 */
  --avatar-md: 56px;    /* 音色选择页 */
  --avatar-lg: 120px;   /* 通话页超大头像 */

  /* === 动效时长 === */
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-breathe: 3s;

  /* === 安全区 === */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* === 深色模式 === */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #1E191A;
    --bg-main-light: #2A2224;
    --bg-card: rgba(255, 255, 255, 0.06);
    --bg-input: rgba(255, 255, 255, 0.08);
    --bg-divider: rgba(255, 255, 255, 0.08);
    --text-primary: #F0E8E0;
    --text-secondary: #9A9098;
    --text-dim: #7A7078;
    --bubble-user: rgba(255, 255, 255, 0.06);
  }
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background-color: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* 防止iOS弹性滚动 */
  overscroll-behavior: none;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 页面容器通用样式 */

.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-page);
  padding-bottom: calc(var(--spacing-page) + var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* 沉浸页面 — 带暖橙光晕 */

.page-immersive {
  position: relative;
  background: var(--bg-main);
}

.page-immersive::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 60%;
  background: radial-gradient(ellipse at center, var(--accent-light) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.page-immersive > * {
  position: relative;
  z-index: 1;
}

/* 禁止选中文字（移动端体验） */

.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* 链接重置 */

a {
  color: inherit;
  text-decoration: none;
}

/* 图片自适应 */

img {
  max-width: 100%;
  display: block;
}

/* 输入框重置 */

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

/* 按钮重置 */

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* 开口项目 — 公共组件样式 */

/* === 主按钮 === */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-width);
  height: var(--btn-height);
  margin: 0 auto;
  background-color: var(--accent-btn);
  color: var(--text-on-accent);
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--btn-radius);
  letter-spacing: 0.05em;
  transition: opacity var(--duration-fast) ease;
}

.btn-primary:active {
  opacity: 0.85;
}

/* === 次要按钮（描边） === */
.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-width);
  height: var(--btn-height);
  margin: 0 auto;
  background-color: transparent;
  color: var(--accent);
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--accent);
  letter-spacing: 0.05em;
  transition: opacity var(--duration-fast) ease;
}

.btn-outline:active {
  opacity: 0.85;
}

/* === 危险按钮 === */
.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-width);
  height: var(--btn-height);
  margin: 0 auto;
  background-color: #E54D42;
  color: #FFFFFF;
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--btn-radius);
  transition: opacity var(--duration-fast) ease;
}

.btn-danger:active {
  opacity: 0.85;
}

/* === 圆形头像 === */
.avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
}

.avatar-md {
  width: var(--avatar-md);
  height: var(--avatar-md);
}

.avatar-lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

/* === 顶部栏 === */
.header {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--spacing-page);
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === 输入框通用 === */
.input-field {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background-color: var(--bg-input);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--text-primary);
}

.input-field::placeholder {
  color: var(--text-secondary);
}

/* === 卡片通用 === */
.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-card);
}

/* === Tab切换 === */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bg-divider);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  position: relative;
  transition: color var(--duration-fast) ease;
}

.tab-item.active {
  color: var(--text-primary);
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background-color: var(--accent);
  border-radius: 2px;
}

/* === 在线状态指示 === */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.online {
  background-color: var(--status-online);
  animation: breathe-dot 2s ease-in-out infinite;
}

.status-dot.offline {
  background-color: var(--status-offline);
}

/* 呼吸动画（在线绿点） */
@keyframes breathe-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 呼吸动画（头像光晕） */
@keyframes breathe-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 156, 108, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 156, 108, 0.6);
  }
}

/* 通话页头像呼吸（加强） */
@keyframes breathe-glow-strong {
  0%, 100% {
    box-shadow: 0 0 30px rgba(255, 156, 108, 0.4);
  }
  50% {
    box-shadow: 0 0 60px rgba(255, 156, 108, 0.7);
  }
}

/* 消息淡入动画 */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 底部滑入动画 */
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}