/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 基础混合器文件 */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
  
  .mobile-full-width {
    width: 100%;
  }
  
  .mobile-flex-column {
    flex-direction: column;
  }
  
  .mobile-no-padding {
    padding: 0;
  }
  
  .mobile-no-margin {
    margin: 0;
  }
  
  .mobile-no-border-radius {
    border-radius: 0;
  }
  
  .mobile-no-box-shadow {
    box-shadow: none;
  }
  
  .mobile-text-center {
    text-align: center;
  }
  
  .mobile-bg-white {
    background-color: var(--white);
  }
  
  /* 移动端字体大小调整 */
  .mobile-font-sm {
    font-size: var(--font-size-sm);
  }
  
  .mobile-font-xs {
    font-size: var(--font-size-xs);
  }
  
  /* 移动端星盘字体大小调整 */
  .iztro-astrolabe-theme-default {
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
  }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .xs-hidden {
    display: none;
  }
  
  .xs-full-width {
    width: 100%;
  }
  
  .xs-flex-column {
    flex-direction: column;
  }
  
  .xs-no-padding {
    padding: 0;
  }
  
  .xs-no-margin {
    margin: 0;
  }
  
  /* 超小屏幕设备字体大小调整 */
  .iztro-astrolabe-theme-default {
    --iztro-star-font-size-big: 10px;
    --iztro-star-font-size-small: 9px;
  }
}

/* 平板设备 */
@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-hidden {
    display: none;
  }
  
  .tablet-full-width {
    width: 100%;
  }
}

/* 桌面设备 */
@media (min-width: 1025px) {
  .desktop-hidden {
    display: none;
  }
}

/* 横屏模式 */
@media (orientation: landscape) and (max-width: 768px) {
  .landscape-hidden {
    display: none;
  }
}

/* 竖屏模式 */
@media (orientation: portrait) and (max-width: 768px) {
  .portrait-hidden {
    display: none;
  }
}

/* 高分辨率设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina-hidden {
    display: none;
  }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .dark-hidden {
    display: none;
  }
}

/* 亮色模式 */
@media (prefers-color-scheme: light) {
  .light-hidden {
    display: none;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
 * 工具类文件
 * 包含常用的布局、间距、文本、颜色等工具类
 */

/* 布局工具类 */
.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* 网格布局工具类 */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-rows-1 {
  grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
  grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
  grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
  grid-template-rows: repeat(4, 1fr);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* 间距工具类 */
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }

.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }

.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* 文本工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }

.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.text-nowrap { white-space: nowrap; }
.text-wrap { white-space: normal; }
.text-break { word-break: break-word; }

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 颜色工具类 */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.text-light { color: var(--light-color); }
.text-dark { color: var(--dark-color); }
.text-white { color: var(--white); }
.text-black { color: var(--black); }

.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }
.bg-light { background-color: var(--light-color); }
.bg-dark { background-color: var(--dark-color); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }

/* 边框工具类 */
.border { border: 1px solid var(--gray-300); }
.border-top { border-top: 1px solid var(--gray-300); }
.border-right { border-right: 1px solid var(--gray-300); }
.border-bottom { border-bottom: 1px solid var(--gray-300); }
.border-left { border-left: 1px solid var(--gray-300); }

.border-0 { border: 0; }
.border-top-0 { border-top: 0; }
.border-right-0 { border-right: 0; }
.border-bottom-0 { border-bottom: 0; }
.border-left-0 { border-left: 0; }

.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }
.rounded-0 { border-radius: 0; }

/* 显示工具类 - 简化重复代码 */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-row { display: table-row !important; }
.d-table-cell { display: table-cell !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* 定位工具类 */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* 溢出工具类 */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

/* 阴影工具类 */
.shadow-sm { box-shadow: var(--box-shadow-sm) !important; }
.shadow-md { box-shadow: var(--box-shadow-md) !important; }
.shadow-lg { box-shadow: var(--box-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* 可见性工具类 */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* 不透明度工具类 */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* Z-index工具类 */
.z-index-0 { z-index: 0; }
.z-index-10 { z-index: 10; }
.z-index-20 { z-index: 20; }
.z-index-30 { z-index: 30; }
.z-index-40 { z-index: 40; }
.z-index-50 { z-index: 50; }
.z-index-auto { z-index: auto; }

/* 光标工具类 */
.cursor-auto { cursor: auto !important; }
.cursor-default { cursor: default !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-wait { cursor: wait !important; }
.cursor-text { cursor: text !important; }
.cursor-move { cursor: move !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* 用户选择工具类 */
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }
.user-select-none { user-select: none !important; }

/* 聊天组件特定工具类 */
.chat-loading-fallback {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: var(--text-color);
}

.chat-skeleton-fallback {
  display: flex;
  flex-direction: column;
  height: 400px;
  padding: var(--spacing-md);
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

/* ChatInput 组件工具类 */
.chat-input-form {
  display: flex;
  padding: 0;
  gap: 15px;
  align-items: center;
}

.chat-input-field {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid var(--input-border);
  border-radius: 24px;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
  height: 40px;
  box-sizing: border-box;
  background-color: var(--input-bg);
  color: var(--text-color);
}

.chat-input-field:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.25);
}

.chat-send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  line-height: 40px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(123, 85, 239, 0.3);
  margin-top: 0;
}

.chat-send-button svg {
  fill: #ffffff;
  stroke: #ffffff;
}

.chat-stop-icon {
  color: #ffffff;
  font-weight: bold;
}

.chat-toggle-icon {
  color: #ffffff;
  font-weight: bold;
}

/* MessageItem 组件工具类 */
.message-item {
  scroll-snap-align: start;
  margin-bottom: 15px;
  display: flex;
}

/* 第一条消息的特殊处理，确保顶部不被遮挡 */
.message-item:first-child {
  margin-top: 10px;
}

.message-item.user-message {
  justify-content: flex-end;
}

.message-item.assistant-message {
  justify-content: flex-start;
}

.message-wrapper {
  display: flex;
  flex-direction: column;
}

.message-wrapper.user-message {
  align-items: flex-end;
}

.message-wrapper.assistant-message {
  align-items: flex-start;
}

.message-content {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow: hidden;
  overflow-x: hidden;
  word-break: break-word;
}

.message-content.user-message {
  background-color: var(--primary-color);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.message-content.assistant-message {
  background-color: var(--message-bg);
  color: var(--text-color);
  border-bottom-left-radius: 4px;
}

.message-markdown {
  line-height: 1.6;
}

.message-spacer {
  height: 2px;
}

.regenerate-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
}

.regenerate-button {
  padding: 4px 10px;
  background-color: var(--quick-action-bg);
  border: 1px solid var(--quick-action-border);
  border-radius: 16px;
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.message-actions-container {
  display: flex;
  gap: 8px;
}

/* QuestionPanel 组件工具类 */
.question-panel {
  max-height: 30vh;
  overflow-y: auto;
  background-color: transparent;
  margin-bottom: 0;
  height: auto;
}

/* 移除question-tabs的通用样式定义，避免与专用样式冲突 */
/* .question-tabs {
  display: flex;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
} */

.question-tab-button {
  padding: 10px 16px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
  font-weight: normal;
}

.question-tab-button.active {
  color: var(--primary-color);
  font-weight: 600;
}

.question-tab-button:hover {
  color: var(--primary-color);
}

.question-content {
  height: calc(100% - 48px);
  overflow-y: auto;
  padding-right: 10px;
}

.question-group {
  margin-bottom: 16px;
}

.category-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 12px;
  margin-top: 0;
}

.questions-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-text {
  background-color: var(--quick-action-bg);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-color);
  line-height: 1.4;
  margin: 0;
  transition: background-color 0.3s;
}

.question-text:hover {
  background-color: var(--quick-action-hover-bg);
}

/* QuickActions 组件工具类 - 容器样式 */
/* 注意：.quick-action-button 的具体样式已移至 quick-actions.css 文件中 */
.quick-actions-container {
  padding: 5px;
  border-radius: 8px;
}

.quick-actions {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  align-items: center;
}

/* TypingIndicator 组件工具类 */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.typing-dot {
  height: 8px;
  width: 8px;
  background-color: var(--typing-indicator-color);
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
  animation: typing 1s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

/* 
 * 网格布局模块
 * 专门处理CSS Grid布局相关的样式
 */

/* 主容器网格布局 */
.app-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: var(--spacing-md);
}

/* 表单区域网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  max-width: 600px;
  margin: 0 auto;
}

/* 结果区域网格布局 */
.result-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--spacing-lg);
  height: 100%;
}

/* 标签导航网格布局 */
.tab-navigation-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--spacing-sm);
}

/* 合盘模式网格布局 */
.synastry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  width: 100%;
}

/* 星盘内容网格布局 */
.astrolabe-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--spacing-md);
  height: 100%;
  align-items: center;
  justify-items: center;
}

/* 响应式网格布局调整 */
@media (max-width: 768px) {
  .app-grid {
    grid-template-rows: auto 1fr auto;
    gap: 0;
    height: 100vh;
    height: 100dvh;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: var(--spacing-md);
  }
  
  .result-grid {
    grid-template-rows: auto 1fr;
    gap: 0;
    height: 100vh;
    height: 100dvh;
  }
  
  .synastry-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .astrolabe-grid {
    grid-template-rows: auto 1fr auto;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }
}

/* 超小屏幕网格布局调整 */
@media (max-width: 480px) {
  .form-grid {
    padding: var(--spacing-sm);
  }
  
  .astrolabe-grid {
    padding: var(--spacing-xs);
  }
}
/* 
 * Flexbox布局模块
 * 专门处理Flexbox布局相关的样式
 */

/* 基础Flexbox容器 */
.flex-container {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* 对齐方式 */
.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-center {
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-around {
  justify-content: space-around;
}

.flex-evenly {
  justify-content: space-evenly;
}

/* 交叉轴对齐 */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* 多行对齐 */
.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-stretch {
  align-content: stretch;
}

/* 项目属性 */
.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

/* 应用特定Flexbox布局 */
.app-flex {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.form-flex {
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: 0 auto;
  gap: var(--spacing-md);
}

.result-flex {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-lg);
}

.tab-navigation-flex {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.tab-content-flex {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

.synastry-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.synastry-person-flex {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.astrolabe-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.rechart-button-flex {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
  width: 100%;
}

.loading-indicator-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl);
  font-size: var(--font-size-md);
  color: var(--gray-600);
  background-color: var(--gray-100);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-lg) 0;
}

.background-ai-indicator-flex {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* 响应式Flexbox布局调整 */
@media (max-width: 768px) {
  .app-flex {
    height: 100vh;
    height: 100dvh;
  }
  
  .form-flex {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--white);
    height: 100vh;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    position: relative;
  }
  
  .result-flex {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100vh;
    margin: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--white);
  }
  
  .tab-navigation-flex {
    padding: var(--spacing-sm);
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-300);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 10;
  }
  
  .tab-content-flex {
    min-height: 300px;
    overflow: hidden;
  }
  
  .synastry-flex {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-sm);
    box-sizing: border-box;
  }
  
  .synastry-person-flex {
    width: 100%;
    margin-bottom: var(--spacing-md);
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--box-shadow-sm);
    box-sizing: border-box;
  }
  
  .astrolabe-flex {
    padding: 0 var(--spacing-sm);
    box-sizing: border-box;
  }
  
  .rechart-button-flex {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    width: 100%;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }
}

/* 超小屏幕Flexbox布局调整 */
@media (max-width: 480px) {
  .form-flex {
    padding: var(--spacing-sm);
  }
  
  .astrolabe-flex {
    padding: 0 var(--spacing-xs);
  }
  
  .rechart-button-flex {
    padding: 0 var(--spacing-sm);
  }
}
/* 
 * 响应式布局模块
 * 专门处理响应式设计相关的样式
 */

/*
 * 响应式布局模块
 * 专门处理响应式设计相关的样式
 */

/* 全局响应式样式 */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--gray-100);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App容器响应式样式 */
.App {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 内容区域响应式样式 */
.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 响应式特定样式 - 基础布局已在layout.css中定义 */

/* 加载指示器响应式样式 */
.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-xl);
  font-size: var(--font-size-md);
  color: var(--gray-600);
  background-color: var(--gray-100);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-lg) 0;
}

.loading-indicator::after {
  content: '';
  width: 20px;
  height: 20px;
  margin-left: var(--spacing-sm);
  border: 2px solid var(--gray-300);
  border-top-color: var(--primary-color);
  border-radius: var(--border-radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 后台AI生成指示器响应式样式 */
.background-ai-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
}

.indicator-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-text {
  font-size: 12px;
  white-space: nowrap;
}

/* 后台AI指示器中的打字动画 */
.background-ai-indicator .typing-indicator {
  display: flex;
  align-items: center;
}

.background-ai-indicator .typing-indicator span {
  height: 6px;
  width: 6px;
  background-color: white;
  border-radius: var(--border-radius-full);
  display: inline-block;
  margin: 0 1px;
  animation: typing 1.4s infinite;
}

.background-ai-indicator .typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.background-ai-indicator .typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(0, 123, 255, 0.5);
  }
  100% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
}

/* 移动端全局样式 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  body {
    background-color: var(--white);
    overflow-x: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* 移除任何可能的边框或阴影 */
    border: none;
    box-shadow: none;
    /* 确保全屏显示 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 防止滚动条 */
    overflow: hidden;
  }
  
  .App {
    padding: 0;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .content {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
}

/* 移动端表单区域样式 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  .form-section {
    width: 100%;
    padding: var(--spacing-md);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--white);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 全屏沉浸式体验 */
    margin: 0;
    max-width: 100%;
    /* 安全区域适配 */
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
    /* iOS Safari 特殊处理：确保内容区域正确计算 */
    min-height: -webkit-fill-available;
    /* 防止内容被工具栏遮挡 */
    padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom) + 80px);
  }
  
  /* 合盘表单区域优化 */
  .form-section form {
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    /* 确保表单底部有足够空间显示按钮 */
    padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom) + 40px);
  }
  
  /* 合盘表单分组优化 */
  .form-section h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-lg) 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-300);
    color: var(--gray-800);
    font-weight: 600;
  }
  
  /* 第一个分组不添加上边距 */
  .form-section h3:first-of-type {
    margin-top: var(--spacing-sm);
  }
}

/* 移动端星盘区域样式 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  .astrolabe-section {
    background: var(--white);
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* 全屏沉浸式体验 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 适配安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .astrolabe-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    /* 全屏沉浸式体验 */
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
    /* 适配安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .iztro-astrolabe {
    min-width: 280px;
    max-width: 100%;
    margin: 0 auto;
    transform-origin: center;
  }
  
  .rechart-button-container {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    width: 100%;
    padding: 0 var(--spacing-md);
    box-sizing: border-box;
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }
  
  .rechart-button {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-md);
  }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .astrolabe-container {
    padding: 0 var(--spacing-xs);
  }
  
  .iztro-astrolabe {
    min-width: 260px;
    max-width: 100%;
  }
  
  .rechart-button-container {
    padding: 0 var(--spacing-sm);
  }
}

/* 移动端result-section样式 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  .result-section {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: var(--white);
    /* 全屏沉浸式体验 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 确保内容填满整个屏幕 */
    max-width: 100%;
    max-height: 100%;
    /* 确保完全填满屏幕，不显示卡片部分 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 移除任何可能的边距 */
    border: none;
    outline: none;
  }
  
  .tab-navigation {
    padding: var(--spacing-sm);
    background-color: var(--white);
    border-bottom: 1px solid var(--gray-300);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 10;
  }
  
  .tab-content {
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 44px);
    height: calc(100dvh - 44px);
    /* 确保完全填满屏幕，不显示卡片部分 */
    min-height: calc(100vh - 44px);
    min-height: calc(100dvh - 44px);
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    /* 全屏沉浸式体验 */
    min-height: 0;
    position: relative;
  }
  
  .ai-content {
    flex-grow: 1;
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    /* 全屏沉浸式体验 */
    min-height: 0;
    position: relative;
    /* 适配安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 移动端星盘内容样式 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  .astrolabe-content {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    width: 100%;
    /* 全屏沉浸式体验 */
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    /* 移除任何卡片式外观 */
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* 适配安全区域 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 在小屏幕上垂直排列 */
@media (max-width: 768px) {
  .synastry-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-sm);
    box-sizing: border-box;
    /* 全屏沉浸式体验 */
    min-height: 0;
    position: relative;
    /* 适配安全区域 */
    padding-top: max(var(--spacing-sm), env(safe-area-inset-top));
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  }
  
  .synastry-person {
    width: 100%;
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--box-shadow-sm);
    box-sizing: border-box;
  }
  
  .synastry-person:last-child {
    margin-bottom: 0;
  }
  
  .synastry-person h3 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--gray-800);
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--gray-200);
  }
}

/* 隐藏垂直滚动条但保持滚动功能 */
.astrolabe-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.synastry-container::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox隐藏滚动条 */
.astrolabe-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.synastry-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 移动端后台AI指示器样式 */
@media (max-width: 768px) {
  .background-ai-indicator {
    top: 5px;
    right: 5px;
    padding: 4px 8px;
  }
  
  .indicator-text {
    font-size: 10px;
  }
  
  .background-ai-indicator .typing-indicator span {
    height: 4px;
    width: 4px;
  }
}

/* 布局样式 - 已重构为模块化结构 */

/* 导入布局模块 */

/* 保留的特定布局样式 */
/* 这里放置一些不适合分类到具体模块的特殊布局样式 */

/* 特定组件布局样式 */
/* 这里放置一些不适合分类到具体模块的特殊布局样式 */

/* 表单区域特定样式 */
.form-section {
  background: var(--gray-100);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-md);
  width: 600px;
  margin: 0 auto;
}

/* 星盘区域特定样式 */
.astrolabe-section {
  background: var(--gray-100);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-md);
}

.astrolabe-header {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.astrolabe-header h2 {
  color: var(--gray-800);
  margin-bottom: var(--spacing-sm);
}

.astrolabe-header p {
  color: var(--gray-600);
  margin: 0;
}

.astrolabe-container {
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* AI聊天区域特定样式 */
.ai-chat-section {
  margin-top: var(--spacing-xl);
}

/* 结果区域特定样式 */
.result-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-lg);
  height: calc(100vh - 80px);
}

/* 标签导航特定样式 */
.tab-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}

.tab-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* 星盘内容特定样式 */
.astrolabe-content {
  height: 100%;
  overflow: hidden;
}

/* AI内容特定样式 */
.ai-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* 合盘模式特定样式 */
.synastry-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.synastry-person {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.synastry-person h3 {
  margin-bottom: var(--spacing-md);
  color: var(--gray-800);
  text-align: center;
}

.rechart-button-container {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-lg);
  width: 100%;
}

/* 隐藏垂直滚动条但保持滚动功能 */
.astrolabe-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.synastry-container::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox隐藏滚动条 */
.astrolabe-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.synastry-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 加载指示器特定样式 */
.loading-indicator {
  padding: var(--spacing-xl);
  font-size: var(--font-size-md);
  color: var(--gray-600);
  background-color: var(--gray-100);
  border-radius: var(--border-radius-md);
  margin: var(--spacing-lg) 0;
}

.loading-indicator::after {
  content: '';
  width: 20px;
  height: 20px;
  margin-left: var(--spacing-sm);
  border: 2px solid var(--gray-300);
  border-top-color: var(--primary-color);
  border-radius: var(--border-radius-full);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 后台AI生成指示器特定样式 */
.background-ai-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
}

.indicator-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-text {
  font-size: 12px;
  white-space: nowrap;
}

/* 后台AI指示器中的打字动画 */
.background-ai-indicator .typing-indicator {
  display: flex;
  align-items: center;
}

.background-ai-indicator .typing-indicator span {
  height: 6px;
  width: 6px;
  background-color: white;
  border-radius: var(--border-radius-full);
  display: inline-block;
  margin: 0 1px;
  animation: typing 1.4s infinite;
}

.background-ai-indicator .typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.background-ai-indicator .typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(0, 123, 255, 0.5);
  }
  100% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
}

.rechart-button-container {
  margin-top: var(--spacing-lg);
  width: 100%;
}
/* 
 * 安全区域适配统一样式文件
 * 统一处理移动端底部安全区域、虚拟键盘等问题
 */

:root {
  /* 安全区域CSS变量 */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  
  /* 键盘相关变量 */
  --keyboard-height: 0px;
  --is-keyboard-visible: false;
  
  /* 安卓小白条（导航栏）相关变量 */
  --android-navigation-bar-height: 0px;
}

/* 全局安全区域适配 */
body {
  /* 确保body占据全屏高度 */
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 安全区域适配混入类 */
.safe-area-top {
  padding-top: var(--safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: var(--safe-area-inset-left);
}

.safe-area-right {
  padding-right: var(--safe-area-inset-right);
}

.safe-area-all {
  padding: var(--safe-area-inset-top) 
             var(--safe-area-inset-right) 
             var(--safe-area-inset-bottom) 
             var(--safe-area-inset-left);
}

/* 移动端基础适配 */
@media (max-width: 768px) {
  /* 移动端容器 */
  .mobile-container {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  
  /* 移动端内容区域 */
  .mobile-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    /* 确保内容区域不会被顶部和底部遮挡 */
    margin-top: var(--safe-area-inset-top);
    margin-bottom: var(--safe-area-inset-bottom);
  }
  
  /* 移动端底部固定区域 */
  .mobile-bottom-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* 使用max()确保最小内边距 */
    padding-bottom: max(var(--spacing-sm, 8px), var(--safe-area-inset-bottom));
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: transform 0.3s ease;
  }
  
  /* 键盘可见时的样式 */
  .keyboard-visible {
    /* 键盘可见时的全局样式 */
    height: calc(100vh - var(--keyboard-height));
    height: calc(100dvh - var(--keyboard-height));
    overflow: hidden;
  }
  
  .keyboard-visible .mobile-bottom-fixed {
    /* 键盘可见时底部固定区域的样式 */
    z-index: 1000;
    transform: translateY(calc(-1 * var(--keyboard-height)));
    -webkit-transform: translateY(calc(-1 * var(--keyboard-height)));
  }
  
  .keyboard-visible .mobile-content {
    /* 键盘可见时内容区域的样式 */
    margin-bottom: calc(var(--safe-area-inset-bottom) + var(--keyboard-height));
  }
}

/* iOS Safari 特殊处理 */
@supports (-webkit-touch-callout: none) {
  :root {
    /* iOS Safari 不支持 dvh，使用 vh 替代 */
    --ios-viewport-height: 100vh;
    /* iOS PWA 模式下增加额外的底部安全区域 */
    --ios-pwa-bottom-offset: 20px;
    /* iOS Safari 上增加额外的顶部安全区域，处理刘海区域 */
    --ios-pwa-top-offset: 20px;
  }
  
  @media (max-width: 768px) {
    .mobile-container {
      height: var(--ios-viewport-height);
    }
    
    /* 通用iOS安全区域适配 */
    .mobile-top-fixed,
    .chat-container-safe-area {
      /* iOS Safari 上需要更大的顶部内边距，避免被刘海区域遮挡 */
      padding-top: max(20px, calc(var(--safe-area-inset-top) + var(--ios-pwa-top-offset)));
    }
    
    .mobile-bottom-fixed {
      /* iOS Safari 上需要更大的内边距 */
      padding-bottom: max(20px, calc(var(--safe-area-inset-bottom) + var(--ios-pwa-bottom-offset)));
    }
    
    .keyboard-visible .mobile-bottom-fixed {
      /* iOS Safari 上键盘可见时的特殊处理 */
      padding-bottom: max(20px, calc(var(--safe-area-inset-bottom) + var(--ios-pwa-bottom-offset)));
      margin-bottom: 0;
      min-height: auto;
    }
    
    .keyboard-visible .mobile-content {
      /* iOS Safari 上键盘可见时内容区域的特殊处理 */
      max-height: calc(var(--ios-viewport-height) - 200px);
    }
  }
}

/* iOS PWA 模式特殊处理 */
@media (max-width: 768px) and (display-mode: standalone) {
  :root {
    /* PWA 模式下增加额外的底部安全区域 */
    --pwa-bottom-offset: 25px;
    /* PWA 模式下增加额外的顶部安全区域，处理刘海区域 */
    --pwa-top-offset: 25px;
  }
  
  /* 通用PWA安全区域适配 */
  .mobile-top-fixed,
  .chat-container-safe-area {
    /* PWA 模式下需要更大的顶部内边距，避免被刘海区域遮挡 */
    padding-top: max(25px, calc(var(--safe-area-inset-top) + var(--pwa-top-offset)));
  }
  
  .mobile-bottom-fixed,
  .chat-input-safe-area {
    /* PWA 模式下需要更大的内边距 */
    padding-bottom: max(25px, calc(var(--safe-area-inset-bottom) + var(--pwa-bottom-offset)));
  }
  
  .keyboard-visible .mobile-bottom-fixed,
  .keyboard-visible .chat-input-safe-area {
    /* PWA 模式下键盘可见时的特殊处理 */
    padding-bottom: max(25px, calc(var(--safe-area-inset-bottom) + var(--pwa-bottom-offset)));
  }
}

/* 暗色模式下的安全区域适配 */
@media (prefers-color-scheme: dark) {
  .mobile-bottom-fixed {
    background-color: #2d2d2d;
    border-top-color: #495057;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  }
}

/* 支持max()函数的现代浏览器处理 */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    .mobile-bottom-fixed {
      padding-bottom: max(var(--spacing-sm, 8px), var(--safe-area-inset-bottom));
    }
    
    .keyboard-visible .mobile-bottom-fixed {
      padding-bottom: max(var(--spacing-sm, 8px), var(--safe-area-inset-bottom));
    }
  }
}

/* 安卓设备小白条特殊处理 */
.android-device .mobile-bottom-fixed,
.android-device .chat-input-safe-area {
  /* 安卓设备上增加额外的底部内边距，避免被小白条遮挡 */
  padding-bottom: max(var(--spacing-sm, 8px), calc(var(--safe-area-inset-bottom) + var(--android-navigation-bar-height)));
}

.android-device.keyboard-visible .mobile-bottom-fixed,
.android-device.keyboard-visible .chat-input-safe-area {
  /* 安卓设备键盘可见时，确保底部区域不被小白条和键盘遮挡 */
  padding-bottom: max(var(--spacing-sm, 8px), calc(var(--safe-area-inset-bottom) + var(--android-navigation-bar-height)));
  transform: translateY(calc(-1 * var(--keyboard-height)));
  -webkit-transform: translateY(calc(-1 * var(--keyboard-height)));
  transition: transform 0.3s ease;
}

.android-device.keyboard-visible .chat-messages-safe-area {
  /* 安卓设备键盘可见时，确保消息区域有足够的空间 */
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--android-navigation-bar-height) + var(--keyboard-height) + 90px);
  min-height: 0;
  box-sizing: border-box;
}

/* 聊天相关组件的安全区域适配 */
.chat-container-safe-area {
  @media (max-width: 768px) {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* 确保顶部有足够的空间，避免被刘海区域遮挡 */
    padding-top: env(safe-area-inset-top);
  }
}

.chat-messages-safe-area {
  @media (max-width: 768px) {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    padding: var(--spacing-sm);
    /* 确保内容区域不会被顶部和底部遮挡 */
    padding-top: calc(env(safe-area-inset-top) + 60px);
    /* 确保底部有足够的空间，不被输入区域遮挡 */
    padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
    /* 确保内容区域可以滚动 */
    box-sizing: border-box;
  }
}

.chat-input-safe-area {
  @media (max-width: 768px) {
    flex-shrink: 0;
    padding: var(--spacing-sm);
    background-color: var(--white);
    border-top: 1px solid var(--gray-300);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* 使用max()确保最小内边距 */
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* 键盘可见时聊天组件的特殊处理 */
.keyboard-visible .chat-input-safe-area {
  z-index: 1000;
  transform: translateY(calc(-1 * var(--keyboard-height)));
  -webkit-transform: translateY(calc(-1 * var(--keyboard-height)));
  transition: transform 0.3s ease;
}

.keyboard-visible .chat-messages-safe-area {
  /* 确保底部有足够的空间，不被输入区域遮挡 */
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--keyboard-height) + 90px);
  /* 确保消息区域可以缩小 */
  min-height: 0;
  /* 确保内容区域可以滚动 */
  box-sizing: border-box;
}
/* 表单样式 */

.form-group {
  margin-bottom: var(--spacing-lg);
}

/* 移动端表单组样式 */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: var(--spacing-md);
  }
}

/* 通用标签样式 */
.form-group label,
.form-group-segmented label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--gray-700);
  font-size: var(--font-size-sm);
}

.form-group-segmented {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  /* 添加防缩放和偏移的样式 */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* 确保在移动端设备上正确显示 */
  will-change: transform;
  -webkit-will-change: transform;
  /* 防止在点击时出现偏移 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 防止整个组件在移动端点击时上移 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 1000;
  -webkit-perspective: 1000;
  /* 确保在移动端点击时不会改变位置 */
  position: relative;
  z-index: 1;
}

.form-group-segmented .segmented-control {
  margin: 0;
  width: auto;
  /* 防止在点击时出现偏移 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* 确保在移动端设备上正确显示 */
  will-change: transform;
  -webkit-will-change: transform;
  /* 防止在点击时出现偏移 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 防止整个组件在移动端点击时上移 */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  perspective: 1000;
  -webkit-perspective: 1000;
}

/* 通用输入框样式 */
.form-group input,
.form-group select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--gray-400);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-md);
  box-sizing: border-box;
  transition: border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
}

/* 移动端输入框样式优化 */
@media (max-width: 768px) {
  .form-group input,
  .form-group select {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--gray-300);
    background-color: var(--white);
    /* 触摸区域优化 */
    min-height: 44px;
    /* 防止iOS缩放 */
    touch-action: manipulation;
    /* 确保输入框在移动端有足够的间距 */
    margin-bottom: var(--spacing-xs);
    /* 减少内边距，提高紧凑度 */
    box-sizing: border-box;
    /* 增强触摸体验 */
    -webkit-tap-highlight-color: transparent;
    /* 禁用自动放大 */
    font-size: 16px;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: var(--iztro-color-active);
    outline: none;
    box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.2);
    background-color: var(--white);
  }
  
  /* 优化选择框在移动端的显示 */
  .form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
    /* 修复iOS设备上select字体蓝色问题 */
    color: #333333;
  }
  
  /* 优化数字输入框在移动端的体验 */
  .form-group input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
  }
  
  .form-group input[type="number"]::-webkit-outer-spin-button,
  .form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}


.form-group-inline {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

/* 移动端内联表单组样式 */
@media (max-width: 768px) {
  .form-group-inline {
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .form-group-inline .form-group {
    margin-bottom: 0;
  }
}

.form-group-inline .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-group-inline .form-group input {
  width: 100%;
}

/* 移动端保持水平排列的表单组 */
@media (max-width: 768px) {
  /* 对于性别和日期类型，在移动端保持水平排列 */
  .form-group-inline-mobile.gender-date {
    flex-direction: row;
    gap: var(--spacing-sm);
  }
  
  /* 对于年月日，在移动端保持水平排列 */
  .form-group-inline-mobile.date-fields {
    flex-direction: row;
    gap: var(--spacing-sm);
  }
  
  /* 保持其他内联表单组的水平排列 */
  .form-group-inline-mobile {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .form-group-inline-mobile .form-group {
    flex: 1;
    margin-bottom: 0;
  }
  
  .form-group-inline-mobile .form-group label {
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
  }
}

/* 移动端特定样式 */
@media (max-width: 768px) {
  .form-group-segmented {
    /* 在移动端保持适当的高度 */
    min-height: 28px;
    /* 确保在移动端有足够的触摸区域 */
    padding: 4px 12px;
    /* 防止点击时的默认缩放行为 */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* 防止在点击时出现偏移 */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    /* 确保在移动端设备上正确显示 */
    will-change: transform;
    -webkit-will-change: transform;
    /* 防止在点击时出现偏移 */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 防止整个组件在移动端点击时上移 */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    perspective: 1000;
    -webkit-perspective: 1000;
    /* 确保在移动端点击时不会改变位置 */
    position: relative;
    z-index: 1;
  }
}

/* 暗色模式表单样式 */
@media (prefers-color-scheme: dark) {
  .form-group label,
  .form-group-segmented label {
    color: var(--iztro-color-text);
  }
  
  .form-group input,
  .form-group select {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #ffffff;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: var(--iztro-color-active);
    box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.2);
  }
  
  /* 移动端暗色模式表单样式 */
  @media (max-width: 768px) {
    .form-group input,
    .form-group select {
      background-color: #2d2d2d;
      border-color: #495057;
      color: #ffffff;
      /* 确保iOS设备上select字体颜色正确 */
      color: #ffffff !important;
    }
    
    .form-group input:focus,
    .form-group select:focus {
      background-color: #2d2d2d;
    }
  }
}

/* 通用按钮基础样式 */
.btn {
  padding: var(--spacing-md);
  background-color: var(--iztro-color-active);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background-color var(--transition-normal);
  font-weight: 500;
  box-shadow: var(--box-shadow-sm);
}

.btn:hover {
  background-color: var(--iztro-color-active);
  filter: brightness(1.1);
}

/* 移动端按钮样式优化 */
@media (max-width: 768px) {
  .btn {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-md);
    /* 禁用双击缩放 */
    touch-action: manipulation;
    /* 添加反馈效果 */
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    /* 减小最小高度 */
    min-height: 36px;
    /* 禁用iOS上的默认点击效果 */
    -webkit-tap-highlight-color: transparent;
    /* 防止文本选择 */
    user-select: none;
  }
  
  .btn:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}

/* 重新排盘按钮特殊样式 */
.rechart-button {
  width: auto;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  background-color: var(--primary-color);
  color: white;
  display: block;
  margin: var(--spacing-md) auto 0;
}

@media (max-width: 768px) {
  .rechart-button {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 36px;
    margin-top: var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-weight: 500;
  }
}

/* 按钮变体 - 统一过渡效果 */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-link {
  transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease, filter var(--transition-normal) ease, text-decoration var(--transition-normal) ease;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-info {
  color: var(--white);
}

.btn-primary {
  background-color: var(--primary-color);
}

.btn-secondary {
  background-color: var(--iztro-color-text);
}

.btn-success {
  background-color: var(--iztro-color-nice);
}

.btn-danger {
  background-color: var(--iztro-color-awesome);
}

.btn-warning {
  background-color: var(--iztro-color-decorator-1);
  color: var(--gray-800);
}

.btn-info {
  background-color: var(--iztro-color-quan);
}

.btn-light {
  background-color: var(--gray-200);
  color: var(--gray-800);
}

.btn-dark {
  background-color: var(--gray-800);
  color: var(--white);
}

.btn-link {
  background-color: transparent;
  color: var(--iztro-color-active);
  text-decoration: none;
  box-shadow: none;
}

/* 按钮悬停效果 */
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-link:hover {
  filter: brightness(1.1);
}

.btn-light:hover {
  background-color: var(--gray-300);
}

.btn-dark:hover {
  background-color: var(--gray-900);
}

.btn-link:hover {
  text-decoration: underline;
}

/* 按钮大小 */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
}

.btn-md {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  border-radius: var(--border-radius-md);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--border-radius-md);
}

.btn-block {
  display: block;
  width: 100%;
}

/* 按钮状态 */
.btn:disabled,
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.2);
}

/* 轮廓按钮 - 统一过渡效果 */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  background-color: transparent;
  border: 1px solid;
  transition: background-color var(--transition-normal) ease, color var(--transition-normal) ease;
}

.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-secondary {
  color: var(--iztro-color-text);
  border-color: var(--iztro-color-text);
}

.btn-outline-success {
  color: var(--iztro-color-nice);
  border-color: var(--iztro-color-nice);
}

.btn-outline-danger {
  color: var(--iztro-color-awesome);
  border-color: var(--iztro-color-awesome);
}

.btn-outline-warning {
  color: var(--iztro-color-decorator-1);
  border-color: var(--iztro-color-decorator-1);
}

.btn-outline-info {
  color: var(--iztro-color-quan);
  border-color: var(--iztro-color-quan);
}

.btn-outline-light {
  color: var(--gray-200);
  border-color: var(--gray-200);
}

.btn-outline-dark {
  color: var(--gray-800);
  border-color: var(--gray-800);
}

/* 轮廓按钮悬停效果 */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover {
  color: var(--white);
}

.btn-outline-primary:hover {
  background-color: var(--primary-color);
}

.btn-outline-secondary:hover {
  background-color: var(--iztro-color-text);
}

.btn-outline-success:hover {
  background-color: var(--iztro-color-nice);
}

.btn-outline-danger:hover {
  background-color: var(--iztro-color-awesome);
}

.btn-outline-warning:hover {
  background-color: var(--iztro-color-decorator-1);
  color: var(--gray-800);
}

.btn-outline-info:hover {
  background-color: var(--iztro-color-quan);
}

.btn-outline-light:hover {
  background-color: var(--gray-200);
  color: var(--gray-800);
}

.btn-outline-dark:hover {
  background-color: var(--gray-800);
  color: var(--white);
}

/* 移动端轮廓按钮优化 */
@media (max-width: 768px) {
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-success,
  .btn-outline-danger,
  .btn-outline-warning,
  .btn-outline-info,
  .btn-outline-light,
  .btn-outline-dark {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
}

/* 暗色模式按钮样式 */
@media (prefers-color-scheme: dark) {
  .btn {
    background-color: var(--primary-color);
    color: white;
  }
  
  .btn:hover {
    filter: brightness(1.2);
  }
  
  .rechart-button {
    background-color: var(--primary-color);
    color: white;
  }
  
  .btn-warning {
    color: var(--gray-800);
  }
  
  .btn-outline-warning:hover {
    color: var(--gray-800);
  }
  
  .btn-light {
    background-color: var(--gray-700);
    color: var(--white);
  }
  
  .btn-light:hover {
    background-color: var(--gray-600);
  }
  
  .btn-outline-light {
    color: var(--gray-400);
    border-color: var(--gray-400);
  }
  
  .btn-outline-light:hover {
    background-color: var(--gray-400);
    color: var(--gray-800);
  }
}

/* 历史记录按钮 - 纯文字样式 */
.history-button {
  background-color: transparent;
  color: var(--iztro-color-active);
  border: none;
  padding: 0;
  margin: var(--spacing-md) auto 0;
  font-size: var(--font-size-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  font-weight: normal;
  display: block;
  width: auto;
  transition: color var(--transition-normal) ease;
  text-align: center;
}

.history-button:hover {
  background-color: transparent;
  color: var(--iztro-color-active);
  filter: brightness(1.2);
  text-decoration: underline;
}

/* 移动端历史记录按钮样式 */
@media (max-width: 768px) {
  .history-button {
    padding: 0;
    margin: var(--spacing-md) auto 0;
    font-size: var(--font-size-md);
    min-height: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    width: auto;
    display: block;
    text-align: center;
    /* iOS Safari 特殊处理：确保历史记录按钮在底部完全可见 */
    margin-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom) + 20px);
    /* 确保按钮不会被键盘或工具栏遮挡 */
    position: relative;
    z-index: 10;
  }
  
  .history-button:active {
    transform: none;
    box-shadow: none;
  }
}

/* 暗色模式历史记录按钮样式 */
@media (prefers-color-scheme: dark) {
  .history-button {
    background-color: transparent;
    color: var(--iztro-color-active);
  }
  
  .history-button:hover {
    background-color: transparent;
    filter: brightness(1.2);
  }
}

/* 滚动到底部按钮样式 */
.scroll-to-bottom-button {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow-md);
  transition: all var(--transition-normal) ease;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
}

.scroll-to-bottom-button.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.scroll-to-bottom-button:hover {
  background-color: var(--iztro-color-active);
  transform: scale(1.1);
  box-shadow: var(--box-shadow-lg);
}

.scroll-to-bottom-button:active {
  transform: scale(0.95);
}

/* 移动端滚动到底部按钮样式 */
@media (max-width: 768px) {
  .scroll-to-bottom-button {
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    width: 44px;
    height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    z-index: 101;
  }
  
  .scroll-to-bottom-button.visible {
    transform: translateX(-50%) scale(1);
  }
  
  .scroll-to-bottom-button:hover {
    transform: translateX(-50%) scale(1.05);
  }
  
  .scroll-to-bottom-button:active {
    transform: translateX(-50%) scale(0.9);
  }
  
  /* 移动端 SVG 图标放大 */
  .scroll-to-bottom-button svg {
    width: 28px;
    height: 28px;
  }
}

/* 暗色模式滚动到底部按钮样式 */
@media (prefers-color-scheme: dark) {
  .scroll-to-bottom-button {
    background-color: var(--primary-color);
    color: white;
  }
  
  .scroll-to-bottom-button:hover {
    background-color: var(--iztro-color-active);
    filter: brightness(1.2);
  }
}

/* 动画样式 */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,123,255,.4)}70%{box-shadow:0 0 0 10px rgba(0,123,255,0)}100%{box-shadow:0 0 0 0 rgba(0,123,255,0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}}
@keyframes scaleIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}
@keyframes typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes loading{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* 动画工具类 - 统一管理 */
.animate-spin,
.animate-pulse,
.animate-typing,
.animate-loading {
  will-change: transform;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

.animate-fade-out {
  animation: fadeOut 0.5s ease-in-out;
}

.animate-slide-in {
  animation: slideIn 0.5s ease-in-out;
}

.animate-slide-out {
  animation: slideOut 0.5s ease-in-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-in-out;
}

.animate-bounce {
  animation: bounce 1s ease-in-out;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-typing {
  animation: typing 1s ease-in-out infinite;
}

.animate-loading {
  animation: loading 1s linear infinite;
}

/* 限制无限循环动画的使用，避免热更新问题 */
@media (prefers-reduced-motion: no-preference) {
  .animate-spin {
    animation: spin 1s linear infinite;
  }

  .animate-pulse {
    animation: pulse 2s infinite;
  }

  .animate-typing {
    animation: typing 1s ease-in-out infinite;
  }

  .animate-loading {
    animation: loading 1s linear infinite;
  }
}

/* 过渡效果 - 统一管理 */
.transition-all,
.transition-colors,
.transition-opacity,
.transition-transform,
.transition-width,
.transition-height,
.transition-padding,
.transition-margin,
.transition-border,
.transition-box-shadow {
  will-change: transform;
}

.transition-all {
  transition: all var(--transition-normal) ease;
}

.transition-colors {
  transition: color var(--transition-normal) ease, background-color var(--transition-normal) ease, border-color var(--transition-normal) ease;
}

.transition-opacity {
  transition: opacity var(--transition-normal) ease;
}

.transition-transform {
  transition: transform var(--transition-normal) ease;
}

.transition-width {
  transition: width var(--transition-normal) ease;
}

.transition-height {
  transition: height var(--transition-normal) ease;
}

.transition-padding {
  transition: padding var(--transition-normal) ease;
}

.transition-margin {
  transition: margin var(--transition-normal) ease;
}

.transition-border {
  transition: border-color var(--transition-normal) ease, border-width var(--transition-normal) ease;
}

.transition-box-shadow {
  transition: box-shadow var(--transition-normal) ease;
}

/* 延迟动画 */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-700 {
  animation-delay: 700ms;
}

.delay-1000 {
  animation-delay: 1000ms;
}

/* 动画持续时间 */
.duration-100 {
  animation-duration: 100ms;
}

.duration-200 {
  animation-duration: 200ms;
}

.duration-300 {
  animation-duration: 300ms;
}

.duration-500 {
  animation-duration: 500ms;
}

.duration-700 {
  animation-duration: 700ms;
}

.duration-1000 {
  animation-duration: 1000ms;
}

/* 动画填充模式 */
.fill-none {
  animation-fill-mode: none;
}

.fill-forwards {
  animation-fill-mode: forwards;
}

.fill-backwards {
  animation-fill-mode: backwards;
}

.fill-both {
  animation-fill-mode: both;
}

/* 动画迭代次数 */
.iterate-1 {
  animation-iteration-count: 1;
}

.iterate-2 {
  animation-iteration-count: 2;
}

.iterate-3 {
  animation-iteration-count: 3;
}

.iterate-infinite {
  animation-iteration-count: infinite;
}

/* 动画方向 */
.direction-normal {
  animation-direction: normal;
}

.direction-reverse {
  animation-direction: reverse;
}

.direction-alternate {
  animation-direction: alternate;
}

.direction-alternate-reverse {
  animation-direction: alternate-reverse;
}

/* 动画播放状态 */
.play-running {
  animation-play-state: running;
}

.play-paused {
  animation-play-state: paused;
}
/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/* 
 * 聊天组件 CSS Grid 布局样式
 * 使用现代 CSS Grid 实现响应式布局，替代固定高度计算
 */

/* 导入变量 */

/* 主容器 Grid 布局 */
.ai-chat {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  min-height: 0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: var(--background-color);
}

.ai-chat.hidden {
  display: none;
}

.ai-chat.visible {
  display: grid;
}

/* 消息区域 Grid 布局 */
.chat-messages {
  grid-row: 1;
  overflow-y: auto;
  min-height: 0;
  scroll-snap-type: y proximity;
  padding: var(--spacing-md);
}

/* 输入区域 Grid 布局 */
.chat-input-container {
  grid-row: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  padding: var(--spacing-sm);
}

/* 移动端 Grid 布局优化 */
@media (max-width: 768px) {
  .ai-chat {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    /* 使用 CSS Grid 自动计算布局 */
    grid-template-rows: 
      var(--header-height) 
      1fr 
      var(--keyboard-height) 
      auto;
  }
  
  .chat-messages {
    grid-row: 2;
    padding: var(--spacing-sm);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* 使用 Grid 自动分配空间，移除固定 margin 计算 */
    margin-top: 0;
    margin-bottom: 0;
    
    /* 使用 padding 替代 margin 来处理安全区域 */
    padding-top: calc(var(--safe-area-top) + var(--header-height));
    padding-bottom: var(--safe-area-bottom);
  }
  
  .chat-input-container {
    grid-row: 4;
    position: sticky;
    bottom: 0;
    z-index: 100;
    padding: var(--spacing-sm);
    padding-bottom: max(var(--spacing-sm), var(--safe-area-bottom));
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: 0;
  }
  
  /* 键盘可见时的特殊 Grid 布局处理 */
  .keyboard-visible .ai-chat {
    grid-template-rows: 
      var(--header-height) 
      1fr 
      var(--keyboard-height) 
      auto;
  }
  
  .keyboard-visible .chat-messages {
    /* 键盘可见时，消息区域自动调整 */
    padding-bottom: calc(var(--safe-area-bottom) + var(--spacing-md));
  }
  
  .keyboard-visible .chat-input-container {
    /* 确保输入区域在键盘上方 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
}

/* 消息项 Grid 布局 */
.message {
  scroll-snap-align: start;
  margin-bottom: var(--spacing-md);
  display: flex;
}

.user-message {
  justify-content: flex-end;
}

.assistant-message {
  justify-content: flex-start;
}

/* 消息内容 Grid 布局 */
.message-content {
  max-width: 80%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow: hidden;
}

.user-message .message-content {
  background-color: var(--primary-color);
  color: white;
  border-bottom-right-radius: var(--border-radius-sm);
}

.assistant-message .message-content {
  background-color: var(--message-bg);
  color: var(--text-color);
  border-bottom-left-radius: var(--border-radius-sm);
}

/* 移动端消息内容 Grid 布局优化 */
@media (max-width: 768px) {
  .message-content {
    max-width: 90%;
    font-size: var(--font-size-md);
    padding: 12px 16px;
  }
}

/* 问题面板 Grid 布局 */
.question-panel {
  max-height: 250px;
  overflow-y: auto;
  border-radius: var(--border-radius-md);
  background-color: var(--question-panel-bg);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

/* 移除question-tabs的Grid布局样式定义，避免与专用样式冲突 */
/* .question-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.question-tabs::-webkit-scrollbar {
  display: none;
} */

.question-content {
  height: calc(100% - 48px);
  overflow-y: auto;
  padding-right: var(--spacing-sm);
}

/* 移动端问题面板 Grid 布局优化 */
@media (max-width: 768px) {
  .question-panel {
    max-height: 30vh;
    max-height: 30dvh;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    background-color: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-top: 0;
  }
  
  .keyboard-visible .question-panel {
    box-shadow: none;
  }
}

/* 快捷操作 Grid 布局 */
.quick-actions-container {
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-sm);
}

.quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  align-items: center;
}

/* 移动端快捷操作 Grid 布局优化 */
@media (max-width: 768px) {
  .quick-actions {
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
}

/* 暗色主题 Grid 布局调整 */
@media (prefers-color-scheme: dark) {
  .ai-chat {
    background-color: var(--background-color);
  }
  
  .chat-input-container {
    background-color: var(--background-color);
    border-top-color: var(--border-color);
  }
  
  .question-panel {
    background-color: var(--question-panel-bg);
    border-bottom-color: var(--border-color);
  }
  
  .question-tabs {
    border-bottom-color: var(--border-color);
  }
  
  /* 移动端暗色主题 Grid 布局 */
  @media (max-width: 768px) {
    .chat-input-container {
      background-color: var(--background-color);
      border-top-color: var(--border-color);
    }
    
    .question-panel {
      background-color: transparent;
      box-shadow: none;
      border: none;
    }
    
    .keyboard-visible .chat-input-container {
      background-color: var(--background-color);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    }
    
    .keyboard-visible .question-panel {
      box-shadow: none;
    }
  }
}

/* 消息操作按钮样式 */
.message-actions-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout;
}

.copy-button,
.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  flex-shrink: 0;
  /* 性能优化：减少重绘和回流 */
  will-change: transform, background-color;
  /* 优化按钮点击性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.copy-button:hover,
.share-button:hover {
  background-color: var(--quick-action-bg);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.copy-button:active,
.share-button:active {
  transform: translateY(0);
}

/* 按钮图标样式 */
.copy-button svg,
.share-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* 去除移动端点击后的默认蓝色高光 */
.copy-button,
.share-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/* 
 * 聊天组件 Flexbox 布局样式
 * 使用 Flexbox 实现灵活的内部布局，与 Grid 布局配合使用
 */

/* 导入变量 */

/* 消息容器 Flexbox 布局 */
.assistant-message-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-message .assistant-message-wrapper {
  align-items: flex-end;
}

/* 重新生成按钮容器 Flexbox 布局 */
.regenerate-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.user-message .regenerate-container {
  justify-content: flex-end;
}

/* 输入区域 Flexbox 布局 */
.chat-input {
  display: flex;
  padding: 0;
  gap: var(--spacing-md);
  align-items: center;
}

.chat-input input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--input-border);
  border-radius: 24px;
  font-size: var(--font-size-md);
  outline: none;
  transition: all var(--transition-normal) ease;
  height: 40px;
  box-sizing: border-box;
  background-color: var(--input-bg);
  color: var(--text-color);
}

.chat-input input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.25);
}

/* 聊天操作按钮 Flexbox 布局 */
.chat-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius-full);
  cursor: pointer;
  font-size: 20px;
  line-height: 40px;
  transition: all var(--transition-normal) ease;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  margin-top: 0;
}

.chat-action-button:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

.chat-action-button:disabled {
  background-color: var(--text-secondary);
  cursor: not-allowed;
}

.chat-action-button svg {
  width: 20px;
  height: 20px;
  line-height: 1;
  fill: #ffffff;
  stroke: #ffffff;
}

.chat-action-button-text {
  color: #ffffff;
  font-weight: bold;
}

/* 强制设置按钮内所有文本为白色 */
.chat-action-button > *,
.chat-action-button > span {
  color: #ffffff;
}

/* 输入指示器 Flexbox 布局 */
.typing-indicator {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--typing-indicator-color);
  border-radius: var(--border-radius-full);
  display: inline-block;
  margin: 0 2px;
  animation: typing 1s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

/* 快捷操作按钮 Flexbox 布局 */
.quick-action-button {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--quick-action-bg);
  border: 1px solid var(--quick-action-border);
  border-radius: 16px;
  color: var(--text-color);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  max-width: none;
  margin: 0;
}

.quick-action-button:hover:not(:disabled) {
  background-color: var(--quick-action-hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(123, 85, 239, 0.2);
}

.quick-action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--quick-action-bg);
}

/* 问题面板 Flexbox 布局 */
.tab-button {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  white-space: nowrap;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.tab-button.active {
  color: var(--primary-color);
  font-weight: 600;
}

.tab-button:hover {
  color: var(--primary-color);
  background-color: transparent;
}

.question-group {
  margin-bottom: var(--spacing-md);
}

.category-heading {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
}

.questions-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.question-text {
  background-color: var(--quick-action-bg);
  border-radius: 12px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--text-color);
  line-height: 1.4;
  margin: 0;
  transition: background-color var(--transition-normal);
}

.question-text:hover {
  background-color: var(--quick-action-hover-bg);
}

/* 重新生成按钮 Flexbox 布局 */
.regenerate-button.quick-action-button {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--quick-action-bg);
  border: 1px solid var(--quick-action-border);
  border-radius: 16px;
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.regenerate-button.quick-action-button:hover:not(:disabled) {
  background-color: var(--quick-action-hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(123, 85, 239, 0.2);
}

.regenerate-button.quick-action-button svg {
  width: 14px;
  height: 14px;
}

.regenerate-button.quick-action-button span {
  font-size: 12px;
  line-height: 1;
}

/* 移动端 Flexbox 布局优化 */
@media (max-width: 768px) {
  .chat-input {
    flex-shrink: 0;
    margin-top: var(--spacing-xs);
  }
  
  .chat-input input {
    font-size: var(--font-size-sm);
    height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 36px;
  }
  
  .chat-action-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  
  .tab-button {
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    min-height: 32px;
  }
  
  .question-text {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 24px;
  }
  
  .regenerate-button.quick-action-button {
    font-size: 12px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .regenerate-button.quick-action-button svg {
    width: 14px;
    height: 14px;
  }
  
  .regenerate-button.quick-action-button span {
    font-size: 12px;
  }
  
  /* 键盘可见时的特殊处理 */
  .keyboard-visible .chat-input {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: all var(--transition-normal) ease;
    position: relative;
    z-index: 1000;
  }
}

/* 暗色主题 Flexbox 布局调整 */
@media (prefers-color-scheme: dark) {
  .chat-input input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
  }
  
  .chat-action-button {
    background-color: var(--primary-color);
    color: #ffffff;
  }
  
  .chat-action-button svg {
    fill: #ffffff;
    stroke: #ffffff;
    color: #ffffff;
  }
  
  .chat-action-button-text {
    color: #ffffff;
    font-weight: bold;
  }
  
  /* 强制设置按钮内所有文本为白色 */
  .chat-action-button > *,
  .chat-action-button > span {
    color: #ffffff;
  }
  
  .chat-action-button:hover:not(:disabled) {
    background-color: var(--primary-hover);
  }
  
  .chat-action-button:disabled {
    background-color: var(--text-secondary);
    color: var(--text-secondary);
  }
  
  .chat-action-button:disabled svg {
    fill: var(--text-secondary);
    stroke: var(--text-secondary);
    color: var(--text-secondary);
  }
  
  .typing-indicator span {
    background-color: var(--typing-indicator-color);
  }
  
  .quick-action-button {
    background-color: var(--quick-action-bg);
    border-color: var(--quick-action-border);
    color: var(--text-color);
  }
  
  .quick-action-button:hover:not(:disabled) {
    background-color: var(--quick-action-hover-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }
  
  .quick-action-button:disabled {
    background-color: var(--input-bg);
    color: var(--text-secondary);
  }
  
  .tab-button {
    color: var(--text-secondary);
  }
  
  .tab-button.active,
  .tab-button:hover {
    color: var(--primary-color);
  }
  
  .category-heading {
    color: var(--text-color);
    font-size: var(--font-size-md);
  }
  
  .question-text {
    background-color: var(--quick-action-bg);
    color: var(--text-color);
  }
  
  .question-text:hover {
    background-color: var(--quick-action-hover-bg);
  }
  
  .regenerate-button.quick-action-button {
    background-color: var(--quick-action-bg);
    border-color: var(--quick-action-border);
    color: var(--text-color);
  }
  
  .regenerate-button.quick-action-button:hover:not(:disabled) {
    background-color: var(--quick-action-hover-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }
  
  /* 移动端暗色主题 Flexbox 布局 */
  @media (max-width: 768px) {
    .chat-input input {
      background-color: var(--input-bg);
      border-color: var(--input-border);
      color: var(--text-color);
    }
    
    .chat-action-button {
      background-color: var(--primary-color);
      color: #ffffff;
    }
    
    .chat-action-button svg {
      fill: #ffffff;
      stroke: #ffffff;
      color: #ffffff;
    }
    
    .chat-action-button-text {
      color: #ffffff;
      font-weight: bold;
    }
    
    .chat-action-button:hover:not(:disabled) {
      background-color: var(--primary-hover);
    }
    
    .chat-action-button:disabled {
      background-color: var(--text-secondary);
      color: var(--text-secondary);
    }
    
    .chat-action-button:disabled svg {
      fill: var(--text-secondary);
      stroke: var(--text-secondary);
      color: var(--text-secondary);
    }
  }
}

/* Markdown内容样式 - 优化版本 */
.markdown-content {
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 标题样式优化 */
.markdown-content .markdown-h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.4em 0 0.3em 0;
  color: var(--text-color);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.3em;
}

.markdown-content .markdown-h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0.4em 0 0.3em 0;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.2em;
}

.markdown-content .markdown-h3 {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0.3em 0 0.2em 0;
  color: var(--text-color);
}

.markdown-content .markdown-h4 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.3em 0 0.2em 0;
  color: var(--text-color);
}

.markdown-content .markdown-h5 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.3em 0 0.2em 0;
  color: var(--text-color);
}

.markdown-content .markdown-h6 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.3em 0 0.2em 0;
  color: var(--text-secondary);
}

/* 段落样式优化 */
.markdown-content .markdown-p {
  margin: 0.2em 0;
  line-height: 1.5;
}

/* 列表样式优化 */
.markdown-content .markdown-ul {
  margin: 0.2em 0;
  padding-left: 1.5em;
  list-style-type: disc;
}

.markdown-content .markdown-ol {
  margin: 0.2em 0;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.markdown-content .markdown-li {
  margin: 0.1em 0;
  line-height: 1.4;
}

/* 任务列表样式 */
.markdown-content .task-list-item {
  list-style-type: none;
  padding-left: 0;
}

.markdown-content .markdown-task-checkbox {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* 链接样式优化 */
.markdown-content .markdown-a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all 0.3s ease;
}

.markdown-content .markdown-a:hover {
  border-bottom-color: var(--primary-color);
  text-decoration: underline;
  color: var(--primary-hover);
}

/* 代码样式优化 */
.markdown-content .markdown-code-inline {
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 0.85em;
  border-radius: 3px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: #24292e;
}

.markdown-content .markdown-code-wrapper {
  margin: 0.5em 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e1e4e8;
}

.markdown-content .markdown-code-header {
  background-color: #f6f8fa;
  padding: 0.3em 0.8em;
  border-bottom: 1px solid #e1e4e8;
  font-size: 0.8em;
  color: #586069;
}

.markdown-content .markdown-code-language {
  text-transform: uppercase;
  font-weight: 600;
}

.markdown-content .markdown-code-block {
  display: block;
  background-color: #f6f8fa;
  padding: 0.8em;
  margin: 0;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  line-height: 1.5;
  color: #24292e;
}

.markdown-content .markdown-pre {
  background-color: #f6f8fa;
  padding: 0.8em;
  margin: 0.5em 0;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  line-height: 1.5;
  color: #24292e;
}

/* 引用样式优化 */
.markdown-content .markdown-blockquote {
  margin: 0.5em 0;
  padding: 0.2em 1em;
  color: #6a737d;
  border-left: 0.3em solid #dfe2e5;
  background-color: #f8f9fa;
  border-radius: 0 3px 3px 0;
}

/* 表格样式优化 - 响应式支持 */
.markdown-content .markdown-table-wrapper {
  margin: 0.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1px solid #e1e4e8;
}

.markdown-content .markdown-table {
  margin: 0;
  border-collapse: collapse;
  width: 100%;
  min-width: 300px;
  background-color: #fff;
}

.markdown-content .markdown-thead {
  background-color: #f6f8fa;
}

.markdown-content .markdown-tbody {
  background-color: transparent;
}

.markdown-content .markdown-tr {
  border-top: 1px solid #e1e4e8;
}

.markdown-content .markdown-tr:hover {
  background-color: #f6f8fa;
}

.markdown-content .markdown-th {
  padding: 0.6em 1em;
  font-weight: 600;
  text-align: left;
  border: 1px solid #e1e4e8;
  background-color: #f6f8fa;
}

.markdown-content .markdown-td {
  padding: 0.6em 1em;
  border: 1px solid #e1e4e8;
  vertical-align: top;
}

/* 强调样式优化 */
.markdown-content .markdown-strong {
  font-weight: 600;
  color: #24292e;
}

.markdown-content .markdown-em {
  font-style: italic;
  color: #24292e;
}

/* 分割线样式优化 */
.markdown-content .markdown-hr {
  height: 1px;
  padding: 0;
  margin: 1em 0;
  background-color: #e1e4e8;
  border: 0;
  opacity: 0.8;
}

/* 新增：图片样式 */
.markdown-content .markdown-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.5em 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 新增：删除线样式 */
.markdown-content .markdown-del {
  text-decoration: line-through;
  color: #6a737d;
}

/* 暗色模式 Markdown 样式 */
@media (prefers-color-scheme: dark) {
  .markdown-content .markdown-h1,
  .markdown-content .markdown-h2,
  .markdown-content .markdown-h3,
  .markdown-content .markdown-h4,
  .markdown-content .markdown-h5 {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
  }
  
  .markdown-content .markdown-h6 {
    color: var(--text-secondary);
  }
  
  .markdown-content .markdown-a {
    color: var(--primary-color);
  }
  
  .markdown-content .markdown-a:hover {
    border-bottom-color: var(--primary-color);
    color: var(--primary-hover);
  }
  
  .markdown-content .markdown-code-inline {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
  }
  
  .markdown-content .markdown-code-wrapper {
    border-color: var(--border-color);
  }
  
  .markdown-content .markdown-code-header {
    background-color: var(--background-color);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
  }
  
  .markdown-content .markdown-code-block,
  .markdown-content .markdown-pre {
    background-color: var(--background-color);
    color: var(--text-color);
  }
  
  .markdown-content .markdown-blockquote {
    color: var(--text-secondary);
    border-left-color: var(--border-color);
    background-color: var(--background-color);
  }
  
  .markdown-content .markdown-table-wrapper {
    border-color: var(--border-color);
  }
  
  .markdown-content .markdown-table {
    background-color: var(--background-color);
  }
  
  .markdown-content .markdown-thead {
    background-color: var(--message-bg);
  }
  
  .markdown-content .markdown-tr {
    border-top-color: var(--border-color);
  }
  
  .markdown-content .markdown-tr:hover {
    background-color: var(--message-bg);
  }
  
  .markdown-content .markdown-th,
  .markdown-content .markdown-td {
    border-color: var(--border-color);
    background-color: var(--background-color);
  }
  
  .markdown-content .markdown-th {
    background-color: var(--message-bg);
  }
  
  .markdown-content .markdown-strong,
  .markdown-content .markdown-em {
    color: var(--text-color);
  }
  
  .markdown-content .markdown-hr {
    background-color: var(--border-color);
  }
  
  .markdown-content .markdown-del {
    color: var(--text-secondary);
  }
}
/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/* 
 * 聊天组件键盘处理样式
 * 优化虚拟键盘弹出时的布局处理，使用现代 CSS 技术
 */

/* 导入变量 */

/* 键盘可见时的全局样式 */
.keyboard-visible {
  /* 使用 CSS 变量动态调整布局 */
  --keyboard-height: 50vh;
}

/* 键盘可见时的聊天容器样式 */
.keyboard-visible .ai-chat {
  /* 使用 Grid 自动调整布局 */
  grid-template-rows:
    var(--header-height)
    minmax(0, 1fr)
    var(--keyboard-height)
    auto;
    
  /* 确保 Grid 容器正确分配空间 */
  grid-auto-rows: minmax(min-content, max-content);
}

/* 键盘可见时的消息区域样式 */
.keyboard-visible .chat-messages {
  
  /* 确保内容不会被键盘遮挡 */
  margin-bottom: 0;
  
  /* 确保消息区域可以缩小 */
  min-height: 0;
  
  /* 确保内容区域可以滚动 */
  box-sizing: border-box;
}

/* 键盘可见时的输入区域样式 */
.keyboard-visible .chat-input-container {
  /* 确保输入区域在键盘上方 */
  position: sticky;
  bottom: 0;
  z-index: 1000;
  
  /* 添加阴影，增强视觉层次 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  
  /* 确保背景色不透明 */
  background-color: var(--background-color);
  
  /* 限制最大高度，确保在键盘弹出时能够正确显示 */
  max-height: 30vh;
  max-height: 30dvh;
  
  /* 确保内容可以滚动 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 键盘可见时的快捷操作区域样式 */
.keyboard-visible .quick-actions-container {
  /* 确保快捷操作区域在键盘上方 */
  position: relative;
  z-index: 1000;
  
  /* 添加背景色，防止内容透过 */
  background-color: var(--background-color);
}

/* 键盘可见时的问题面板样式 */
.keyboard-visible .question-panel {
  /* 增强阴影效果 */
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
  
  /* 确保面板在键盘上方 */
  z-index: 1000;
}

/* 移动端键盘处理样式 */
@media (max-width: 768px) {
  /* 键盘可见时的聊天容器样式 */
  .keyboard-visible .ai-chat {
    /* 使用 CSS Grid 自动调整布局 */
    grid-template-rows:
      var(--header-height)
      minmax(0, 1fr)
      var(--keyboard-height)
      auto;
    
    /* 确保容器占据全屏 */
    height: 100dvh;
    width: 100%;
    
    /* 确保 Grid 容器正确分配空间 */
    grid-auto-rows: minmax(min-content, max-content);
  }
  
  /* 键盘可见时的消息区域样式 */
  .keyboard-visible .chat-messages {
    
    /* 确保内容不会被键盘遮挡 */
    margin-bottom: 0;
    
    /* 使用 Grid 自动分配空间 */
    grid-row: 2;
    
    /* 确保消息区域可以缩小 */
    min-height: 0;
    
    /* 确保内容区域可以滚动 */
    box-sizing: border-box;
  }
  
  /* 键盘可见时的输入区域样式 */
  .keyboard-visible .chat-input-container {
    /* 确保输入区域在键盘上方 */
    position: sticky;
    bottom: 0;
    z-index: 1000;
    
    /* 添加阴影，增强视觉层次 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    
    /* 确保背景色不透明 */
    background-color: var(--background-color);
    
    /* 使用 Grid 自动分配空间 */
    grid-row: 4;
    
    /* 确保在键盘弹出时输入区域不会被压缩 */
    min-height: auto;
    
    /* 添加底部内边距，确保内容不被键盘遮挡 */
    padding-bottom: max(var(--spacing-sm), calc(var(--safe-area-bottom) + 10px));
  }
  
  /* 键盘可见时的快捷操作区域样式 */
  .keyboard-visible .quick-actions-container {
    /* 确保快捷操作区域在键盘上方 */
    position: relative;
    z-index: 1000;
    
    /* 添加背景色，防止内容透过 */
    background-color: var(--background-color);
    
    /* 确保快捷操作区域在键盘弹出时不会被压缩 */
    min-height: auto;
  }
  
  /* 键盘可见时的问题面板样式 */
  .keyboard-visible .question-panel {
    /* 增强阴影效果 */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    
    /* 确保面板在键盘上方 */
    z-index: 1000;
    
    /* 动态调整最大高度 */
    max-height: 30vh;
    max-height: 30dvh;
    
    /* 确保面板在键盘弹出时不会被压缩 */
    min-height: auto;
  }
  
  /* 键盘可见时的输入框样式 */
  .keyboard-visible .chat-input input {
    /* 防止iOS Safari上输入框缩放 */
    font-size: 16px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* 键盘可见时的按钮样式 */
  .keyboard-visible .chat-action-button {
    /* 防止按钮在键盘弹出时变形 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
}

/* 暗色主题键盘处理样式 */
@media (prefers-color-scheme: dark) {
  /* 键盘可见时的输入区域样式 */
  .keyboard-visible .chat-input-container {
    /* 使用暗色主题背景色 */
    background-color: var(--background-color);
    
    /* 使用暗色主题阴影 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  }
  
  /* 键盘可见时的快捷操作区域样式 */
  .keyboard-visible .quick-actions-container {
    /* 使用暗色主题背景色 */
    background-color: var(--background-color);
  }
  
  /* 键盘可见时的问题面板样式 */
  .keyboard-visible .question-panel {
    /* 使用暗色主题阴影 */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
  }
  
  /* 移动端暗色主题键盘处理样式 */
  @media (max-width: 768px) {
    /* 键盘可见时的输入区域样式 */
    .keyboard-visible .chat-input-container {
      /* 使用暗色主题背景色 */
      background-color: var(--background-color);
      
      /* 使用暗色主题阴影 */
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
      
      /* 确保在键盘弹出时输入区域不会被压缩 */
      min-height: auto;
      
      /* 添加底部内边距，确保内容不被键盘遮挡 */
      padding-bottom: max(var(--spacing-sm), calc(var(--safe-area-bottom) + 10px));
    }
    
    /* 键盘可见时的快捷操作区域样式 */
    .keyboard-visible .quick-actions-container {
      /* 使用暗色主题背景色 */
      background-color: var(--background-color);
      
      /* 确保快捷操作区域在键盘弹出时不会被压缩 */
      min-height: auto;
    }
    
    /* 键盘可见时的问题面板样式 */
    .keyboard-visible .question-panel {
      /* 使用暗色主题阴影 */
      box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
    }
  }
}

/* 安卓设备特殊处理 */
.android-device .ai-chat {
  /* 安卓设备特定的布局调整 */
  transition: grid-template-rows 0.2s ease;
}

.android-device .chat-messages {
  /* 安卓设备消息区域特殊处理 */
  transition: padding-bottom 0.2s ease;
}

.android-device .chat-input-container {
  /* 安卓设备输入区域特殊处理 */
  transition: bottom 0.2s ease, transform 0.2s ease;
}

.android-device.keyboard-visible .chat-input-container {
  /* 安卓设备键盘可见时输入区域特殊处理 */
  position: fixed;
  bottom: calc(var(--keyboard-height) + var(--android-navigation-bar-height));
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(0);
}

/* 安卓设备非键盘状态下的输入区域处理 */
.android-device .chat-input-container {
  /* 安卓设备上增加额外的底部内边距，避免被小白条遮挡 */
  padding-bottom: calc(var(--safe-area-bottom) + var(--android-navigation-bar-height) + var(--spacing-sm));
}

/* 视口高度变化时的过渡效果 */
.ai-chat {
  /* 添加平滑过渡效果 */
  transition: grid-template-rows 0.3s ease;
}

.chat-messages {
  /* 添加平滑过渡效果 */
  transition: padding-bottom 0.3s ease;
}

.chat-input-container {
  /* 添加平滑过渡效果 */
  transition: box-shadow 0.3s ease, z-index 0.3s ease;
}

/* 禁用文本选择和点击高亮 */
.chat-input input,
.chat-action-button,
.quick-action-button,
.tab-button,
.question-text {
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* 确保在键盘弹出时元素不会变形 */
.chat-input,
.chat-action-button,
.quick-action-button,
.tab-button,
.question-text {
  /* 使用硬件加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
  /* 确保元素在键盘弹出时保持稳定 */
  will-change: transform;
}

/* 键盘弹出时的滚动优化 */
.keyboard-visible .chat-messages {
  /* 优化滚动性能 */
  -webkit-overflow-scrolling: touch;
  
  /* 确保滚动平滑 */
  scroll-behavior: smooth;
}
/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/* 
 * 聊天组件移动端专用样式
 * 针对移动设备进行特殊优化，使用现代 CSS 技术
 */

/* 导入变量 */

/* 移动端聊天容器样式 */
@media (max-width: 768px) {
  .ai-chat {
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 添加顶部安全区域，避免被刘海区域遮挡 */
    padding-top: var(--safe-area-inset-top);
  }
  
  .ai-chat.mobile {
    /* 移动端特定样式 */
    --mobile-header-height: 60px;
    --mobile-input-height: 90px;
  }
  
  /* 移动端消息区域样式 */
  .chat-messages {
    padding: var(--spacing-sm);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* 使用 Flexbox 自动分配空间 */
    flex: 1;
    
    /* 确保内容区域可以滚动 */
    box-sizing: border-box;
    
    /* 简单的上下边距，避免复杂计算 */
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    
    /* 性能优化：减少重绘和回流 */
    will-change: auto;
    contain: layout style paint;
    /* 优化滚动性能 */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    
    /* 修复移动端滚动到底部被遮挡的问题 */
    scroll-padding-bottom: calc(var(--safe-area-inset-bottom) + 90px);
  }
  
  /* 移动端消息内容样式 */
  .message-content {
    max-width: 90%;
    font-size: var(--font-size-md);
    padding: 12px 16px;
    overflow-x: hidden; /* 防止内容水平溢出 */
    word-break: break-word; /* 确保长单词能正确换行 */
  }
  
  /* 移动端输入区域样式 */
  .chat-input-container {
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    
    /* 使用 Flexbox 自动分配空间 */
    flex-shrink: 0;
    
    /* 移除固定的底部安全区域，避免问题面板隐藏时的空白 */
    padding-bottom: 0;
    
    /* 性能优化 */
    will-change: auto;
    contain: layout style;
    transform: translateZ(0);
    
    /* 减少顶部内边距，与问题面板更贴近 */
    padding-top: var(--spacing-xs);
  }
  
  /* 当问题面板显示时，为输入容器添加适当的底部间距 */
  .question-panel.show + .chat-input-container {
    padding-bottom: calc(var(--safe-area-inset-bottom) + var(--spacing-xs));
  }
  
  /* 移动端快捷操作区域样式 */
  .quick-actions-container {
    margin-bottom: var(--spacing-xs);
    flex-shrink: 0;
    
    /* 减少快捷操作区域的间距 */
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
  }
  
  .quick-actions {
    gap: var(--spacing-xs);
    padding-bottom: 0;
  }
  
  .quick-action-button {
    font-size: var(--font-size-md);
    /* 减少内间距，让按钮更紧凑 */
    padding: 2px 8px;
    
    /* 根据文字内容自适应宽度 */
    min-width: fit-content !important;
    width: auto !important;
    max-width: none !important;
    
    /* 允许按钮在空间不足时换行 */
    flex-wrap: wrap;
    
    /* 减少按钮的最小高度 */
    min-height: 24px;
  }
  
  /* 移动端问题面板样式 - 简化与电脑端保持一致 */
  /* 移除复杂的覆盖样式，让question-panel.css统一样式 */
  
  /* 移除移动端tab-navigation的分割线 */
  .tab-navigation {
    border-bottom: none;
  }
  
  /* 移除移动端tab-navigation-flex类的分割线 */
  .tab-navigation-flex {
    border-bottom: none;
  }
  
  /* 移动端输入框样式 */
  .chat-input {
    flex-shrink: 0;
    margin-top: var(--spacing-xs);
    /* 性能优化：减少重绘和回流 */
    will-change: auto;
    contain: layout style;
  }
  
  .chat-input input {
    font-size: var(--font-size-sm);
    height: 36px;
    padding: 4px 10px;
    
    /* 确保输入框不会占据全部宽度，为按钮留出空间 */
    flex: 1;
    min-width: 0;
    
    /* 防止iOS Safari上输入框缩放 */
    font-size: 16px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* 性能优化：减少重绘和回流 */
    will-change: auto;
    contain: layout style;
  }
  
  /* 移动端发送按钮样式 */
  .chat-action-button {
    width: 36px;
    height: 36px;
    color: #ffffff;
    min-width: 36px;
    
    /* 防止按钮在键盘弹出时变形 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* 确保按钮不会被压缩 */
    flex-shrink: 0;
    
    /* 性能优化：减少重绘和回流 */
    will-change: transform, background-color;
    contain: layout style;
    backface-visibility: hidden;
  }
  
  .chat-action-button svg {
    fill: #ffffff;
    stroke: #ffffff;
  }
  
  .chat-send-icon {
    fill: #ffffff;
    stroke: #ffffff;
    color: #ffffff;
  }
  
  .chat-action-button-text {
    color: #ffffff;
    font-weight: bold;
  }
  
  /* 移动端表格样式优化 */
  .markdown-content .markdown-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .markdown-content .markdown-th,
  .markdown-content .markdown-td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  /* 当虚拟键盘弹出时的调整 */
  @supports (padding: max(0px)) {
    .chat-input-container {
      padding-bottom: max(var(--spacing-sm), var(--safe-area-bottom));
    }
  }
  
  /* 键盘可见时的特殊处理 */
  .keyboard-visible .ai-chat {
    /* 简化键盘可见时的处理 */
    padding-bottom: var(--keyboard-height);
  }
  
  .keyboard-visible .chat-input-container {
    /* 键盘可见时输入区域固定在底部 */
    position: fixed;
    bottom: var(--keyboard-height);
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .keyboard-visible .quick-actions-container {
    /* 键盘可见时quick-actions区域背景色与输入容器一致 */
    background-color: var(--background-color);
  }
  
  .keyboard-visible .chat-messages {
    /* 键盘可见时消息区域自动调整，无需复杂计算 */
    flex: 1;
    margin-bottom: var(--spacing-md);
    /* 修复键盘可见时滚动到底部被遮挡的问题 */
    scroll-padding-bottom: calc(var(--keyboard-height) + var(--safe-area-inset-bottom) + 90px);
  }
  
  /* 移动端重新生成按钮样式 */
  .regenerate-container {
    width: 100%;
  }
  
  .regenerate-button.quick-action-button {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .regenerate-button.quick-action-button svg {
    width: 14px;
    height: 14px;
  }
  
  .regenerate-button.quick-action-button span {
    font-size: var(--font-size-sm);
  }
}

/* 安卓设备特殊处理 */
@media (max-width: 768px) {
  /* 安卓设备与其他设备使用统一的Flexbox布局 */
  .android-device .ai-chat {
    display: flex;
    flex-direction: column;
  }
  
  .android-device .chat-messages {
    /* 安卓设备使用与其他设备一致的简单布局 */
    flex: 1;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }
  
  .android-device.keyboard-visible .ai-chat {
    /* 安卓设备键盘可见时简化处理 - 与iOS保持一致 */
    padding-bottom: var(--keyboard-height);
  }
  
  .android-device.keyboard-visible .chat-messages {
    /* 安卓设备键盘可见时消息区域处理 - 与iOS保持一致 */
    flex: 1;
    margin-bottom: var(--spacing-md);
    /* 修复安卓设备键盘可见时滚动到底部被遮挡的问题 */
    scroll-padding-bottom: calc(var(--keyboard-height) + var(--safe-area-inset-bottom) + var(--android-navigation-bar-height) + 90px);
  }
  
  .android-device.keyboard-visible .chat-input-container {
    /* 安卓设备键盘可见时输入区域处理 - 使用fixed定位，紧贴键盘顶部 */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-sm);
    padding-bottom: calc(var(--safe-area-inset-bottom) + var(--spacing-sm));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .android-device.keyboard-visible .quick-actions-container {
    /* 安卓设备键盘可见时quick-actions区域背景色与输入容器一致 */
    background-color: var(--background-color);
  }
  
  /* 安卓设备非键盘状态下的输入区域处理 */
  .android-device .chat-input-container {
    /* 安卓设备底部安全区域处理 */
    padding-bottom: calc(var(--safe-area-inset-bottom) + var(--android-navigation-bar-height) + var(--spacing-sm));
  }
}

/* 移动端暗色主题样式 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .ai-chat {
    background-color: var(--background-color);
  }
  
  .chat-input-container {
    background-color: var(--background-color);
    border-top-color: var(--border-color);
  }
  
  .question-panel {
    background-color: transparent;
    box-shadow: none;
    border: none;
  }
  
  .keyboard-visible .chat-input-container {
    background-color: var(--background-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
  }
  
  .keyboard-visible .quick-actions-container {
    /* 暗色模式键盘可见时quick-actions区域背景色与输入容器一致 */
    background-color: var(--background-color);
  }
  
  /* 键盘可见时聊天消息区域的特殊处理 - 暗色模式 */
  .keyboard-visible .chat-messages {
    /* 暗色模式与常规模式使用相同的简单布局 */
    flex: 1;
    margin-bottom: var(--spacing-md);
    /* 修复暗色模式键盘可见时滚动到底部被遮挡的问题 */
    scroll-padding-bottom: calc(var(--keyboard-height) + var(--safe-area-inset-bottom) + 90px);
  }
  
  /* 移除移动端暗色模式下tab-navigation的分割线 */
  .question-tabs {
    border-bottom: none;
  }
  
  /* 移除移动端暗色模式下tab-navigation类的分割线 */
  .tab-navigation {
    border-bottom: none;
  }
  
  /* 移除移动端暗色模式下tab-navigation-flex类的分割线 */
  .tab-navigation-flex {
    border-bottom: none;
  }
  
  .chat-action-button {
    background-color: var(--primary-color);
    color: #ffffff;
  }
  
  .chat-action-button svg {
    fill: #ffffff;
    stroke: #ffffff;
    color: #ffffff;
  }
  
  .chat-send-icon {
    fill: #ffffff;
    stroke: #ffffff;
    color: #ffffff;
  }
  
  .chat-action-button-text {
    color: #ffffff;
    font-weight: bold;
  }
  
  /* 强制设置按钮内所有文本为白色 */
  .chat-action-button > *,
  .chat-action-button > span {
    color: #ffffff;
  }
  
  .chat-action-button:hover:not(:disabled) {
    background-color: var(--primary-hover);
  }
  
  .chat-action-button:disabled {
    background-color: var(--text-secondary);
    color: var(--text-secondary);
  }
  
  .chat-action-button:disabled svg {
    fill: var(--text-secondary);
    stroke: var(--text-secondary);
    color: var(--text-secondary);
  }
  
  /* 键盘可见时的问题面板暗色模式样式 */
  .keyboard-visible .question-panel {
    box-shadow: none;
  }
}

/*
 * 全局变量文件
 * 整合全局变量和聊天模块变量
 */

:root {
  /* 颜色变量 */
  --primary-color: #7B55EF;
  --primary-hover: #6344d3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  
  /* 中性颜色 */
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  
  /* 主题颜色 */
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
  
  /* 聊天特定颜色 */
  --background-color: #ffffff;
  --message-bg: #EEEEEE;
  --text-color: #333333;
  --text-secondary: #666666;
  --input-bg: #ffffff;
  --input-border: #dddddd;
  --border-color: #eeeeee;
  --quick-action-bg: #f0f4f9;
  --quick-action-border: #d0d7e0;
  --quick-action-hover-bg: #e1eaf2;
  --question-panel-bg: #f8f9fa;
  --typing-indicator-color: #666666;
  
  /* 间距变量 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小变量 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* 聊天字体大小 */
  --chat-font-size: 14px;
  
  /* 星盘字体大小 */
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  
  /* 边框半径变量 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 50%;
  
  /* 阴影变量 */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  
  /* 聊天阴影变量 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3);
  
  /* 断点变量 */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  
  /* 过渡变量 */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  /* Z-index变量 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  
  /* 布局变量 */
  --keyboard-height: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;
  --header-height: 0px;
  --min-touch-target-size: 4px;
  
  /* 移动端特定变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
  --android-navigation-bar-height: 20px;
}

/* 移动端特定变量 */
@media (max-width: 768px) {
  :root {
    /* 移动端间距变量 - 减少间距 */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    
    /* 移动端字体大小变量 - 稍微减小字体 */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    
    /* 移动端聊天字体大小 */
    --chat-font-size: 16px;
    
    /* 移动端星盘字体大小 - 减小星盘字体 */
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
    
    /* 移动端边框半径变量 - 增加圆角以改善视觉效果 */
    --border-radius-sm: 4px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* 移动端阴影变量 - 减少阴影 */
    --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端聊天阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.05);
    
    /* 移动端过渡变量 - 加快过渡 */
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    
    /* 确保在移动端有足够的触摸区域 */
    --min-touch-target-size: 4px;
  }
}

/* 暗色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    /* 文本颜色 */
    --color-text-primary: #efefef; /* 主要文本，接近白色 */
    --color-text-secondary: #9c9d9d; /* 次要文本、占位符 */
    --color-text-muted: #9c9d9d; /* 提示性文本 */
    --color-text-inverse: #1d1d1d; /* 反色文本，用于亮色背景 */

    /* 背景颜色 */
    --color-background: #1d1d1d; /* 主背景色 */
    --color-background-soft: #262628; /* 悬停或柔和背景 */
    --color-background-secondary: #1d1d1d; /* 组件、输入框等次级背景 */
    --color-background-muted: #1d1d1d; /* 禁用或更深的背景 */
    --color-background-elevated: #1d1d1d; /* 浮动面板、模态框背景 */

    /* 边框颜色 */
    --color-border: #2c2c2f; /* 默认边框 */
    --color-border-light: #2c2c2f; /* 亮边框 */
    --color-border-dark: #2c2c2f; /* 暗边框 */

    /* 侧边栏颜色 */
    --color-sidebar-background: #1d1d1d; /* 与主背景统一 */

    /* 品牌色 */
    --color-primary: #6b46c1; /* 紫色强调色 */
    --color-primary-light: #8c78f2; /* 亮紫色 */
    --color-primary-dark: #8A6DFF; /* 暗紫色 */

    /* 兼容旧版变量 */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-light);
    --secondary-color: #adb5bd;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #22b8cf;
    --light-color: #343a40;
    --dark-color: #f8f9fa;
    
    /* 暗色模式中性颜色 */
    --white: #1B1B1B;
    --gray-100: #343a40;
    --gray-200: #495057;
    --gray-300: #6c757d;
    --gray-400: #adb5bd;
    --gray-500: #ced4da;
    --gray-600: #dee2e6;
    --gray-700: #e9ecef;
    --gray-800: #f8f9fa;
    --gray-900: #ffffff;
    --black: #ffffff;
    
    /* 暗色模式主题颜色 */
    --iztro-color-major: #9775fa;
    --iztro-color-focus: #ffffff;
    --iztro-color-quan: #748ffc;
    --iztro-color-tough: #e8590c;
    --iztro-color-awesome: #ff6b6b;
    --iztro-color-active: #4dabf7;
    --iztro-color-happy: #fa5252;
    --iztro-color-nice: #69db7c;
    --iztro-color-decorator-1: #f59f00;
    --iztro-color-decorator-2: #e64980;
    --iztro-color-text: #ced4da;
    --iztro-color-border: #495057;
    --iztro-color-decadal: var(--iztro-color-active);
    --iztro-color-yearly: var(--iztro-color-decorator-2);
    --iztro-color-monthly: var(--iztro-color-nice);
    --iztro-color-daily: var(--iztro-color-decorator-1);
    --iztro-color-hourly: var(--iztro-color-text);
    
    /* 暗色模式聊天特定颜色 */
    --background-color: var(--color-background);
    --message-bg: var(--color-background-soft);
    --text-color: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --input-bg: var(--color-background-secondary);
    --input-border: var(--color-border);
    --border-color: var(--color-border);
    --quick-action-bg: #343a40;
    --quick-action-border: #495057;
    --quick-action-hover-bg: #495057;
    --question-panel-bg: #2d2d2d;
    --typing-indicator-color: #ced4da;
  }

  ::selection {
    background-color: var(--color-primary-dark);
    color: var(--color-text-primary);
  }
  
  /* 暗色模式移动端特定变量 */
  @media (max-width: 768px) {
    :root {
      /* 暗色模式移动端间距变量 */
      --spacing-xs: 2px;
      --spacing-sm: 4px;
      --spacing-md: 8px;
      --spacing-lg: 12px;
      --spacing-xl: 16px;
      --spacing-2xl: 24px;
      
      /* 暗色模式移动端字体大小变量 */
      --font-size-xs: 10px;
      --font-size-sm: 12px;
      --font-size-md: 14px;
      --font-size-lg: 16px;
      --font-size-xl: 18px;
      --font-size-2xl: 20px;
      
      /* 暗色模式移动端聊天字体大小 */
      --chat-font-size: 16px;
      
      /* 暗色模式移动端星盘字体大小 */
      --iztro-star-font-size-big: 11px;
      --iztro-star-font-size-small: 10px;
      
      /* 暗色模式移动端边框半径变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 12px;
      --border-radius-lg: 16px;
      --border-radius-full: 9999px;
      
      /* 暗色模式移动端阴影变量 */
      --box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --box-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --box-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端聊天阴影变量 */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
      --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
      
      /* 暗色模式移动端过渡变量 */
      --transition-fast: 0.1s;
      --transition-normal: 0.2s;
      --transition-slow: 0.3s;
    }
  }
}

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}

/* 动画关键帧 */
@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*
 * 聊天组件 CSS 变量定义
 * 使用 CSS 变量实现主题切换和响应式布局
 */

/* 键盘可见时的变量调整 */
.keyboard-visible {
  --keyboard-height: 50vh;
}

/* 移动端聊天容器类 */
.mobile-chat {
  /* 移动端特定样式变量 */
  --mobile-header-height: 60px;
  --mobile-input-height: 90px;
}
/* 
 * 聊天组件主题样式
 * 处理亮色/暗色主题切换，使用现代 CSS 变量技术
 */

/* 导入变量 */

/* 通用主题样式（亮色和暗色主题共用） */
.ai-chat {
  background-color: var(--background-color);
}

.chat-input-container {
  background-color: var(--background-color);
}

.message-content {
  color: var(--text-color);
}

.user-message .message-content {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.assistant-message .message-content {
  background-color: var(--message-bg);
  color: var(--text-color);
}

.chat-input input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-color);
}

.chat-input input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.25);
}

/* 聊天按钮通用样式 */
.chat-action-button {
  background-color: var(--primary-color);
  color: #ffffff;
  transition: background-color var(--transition-normal) ease;
}

.chat-action-button svg,
.chat-send-icon,
.chat-action-button-text,
.chat-action-button > *,
.chat-action-button > span {
  fill: #ffffff;
  stroke: #ffffff;
  color: #ffffff;
}

.chat-action-button:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

.chat-action-button:disabled {
  background-color: var(--text-secondary);
  cursor: not-allowed;
}

.typing-indicator span {
  background-color: var(--typing-indicator-color);
}

/* 快捷操作按钮通用样式 */
.quick-action-button,
.regenerate-button.quick-action-button {
  background-color: var(--quick-action-bg);
  border-color: var(--quick-action-border);
  color: var(--text-color);
  transition: background-color var(--transition-normal) ease, border-color var(--transition-normal) ease, color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
}

.quick-action-button:hover:not(:disabled),
.regenerate-button.quick-action-button:hover:not(:disabled) {
  background-color: var(--quick-action-hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(123, 85, 239, 0.2);
}

.quick-action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--quick-action-bg);
}

.question-panel {
  background-color: transparent;
  border: none;
}

/* 移除question-tabs的主题样式定义，避免与专用样式冲突 */
/* .question-tabs {
  border-bottom-color: var(--border-color);
} */

.tab-button {
  color: var(--text-secondary);
}

.tab-button.active,
.tab-button:hover {
  color: var(--primary-color);
  background-color: transparent;
}

.category-heading {
  color: var(--text-color);
}

.question-text {
  background-color: var(--quick-action-bg);
  color: var(--text-color);
}

.question-text:hover {
  background-color: var(--quick-action-hover-bg);
}

/* Markdown 内容通用样式 */
.markdown-content {
  color: var(--text-color);
}

.markdown-content .markdown-h1,
.markdown-content .markdown-h2,
.markdown-content .markdown-h3,
.markdown-content .markdown-h4,
.markdown-content .markdown-h5 {
  color: var(--text-color);
  border-bottom-color: var(--border-color);
}

.markdown-content .markdown-h6 {
  color: var(--text-secondary);
}

.markdown-content .markdown-a {
  color: var(--primary-color);
}

.markdown-content .markdown-a:hover {
  border-bottom-color: var(--primary-color);
  color: var(--primary-hover);
}

.markdown-content .markdown-code-inline {
  background-color: rgba(0, 0, 0, 0.06);
  color: var(--text-color);
}

.markdown-content .markdown-code-wrapper {
  border-color: var(--border-color);
}

.markdown-content .markdown-code-header {
  background-color: var(--quick-action-bg);
  border-bottom-color: var(--border-color);
  color: var(--text-secondary);
}

.markdown-content .markdown-code-block,
.markdown-content .markdown-pre {
  background-color: var(--quick-action-bg);
  color: var(--text-color);
}

.markdown-content .markdown-blockquote {
  color: var(--text-secondary);
  border-left-color: var(--border-color);
  background-color: var(--quick-action-bg);
}

.markdown-content .markdown-table-wrapper {
  border-color: var(--border-color);
}

.markdown-content .markdown-table {
  background-color: var(--background-color);
}

.markdown-content .markdown-thead {
  background-color: var(--quick-action-bg);
}

.markdown-content .markdown-tr {
  border-top-color: var(--border-color);
}

.markdown-content .markdown-tr:hover {
  background-color: var(--quick-action-bg);
}

.markdown-content .markdown-th,
.markdown-content .markdown-td {
  border-color: var(--border-color);
  background-color: var(--background-color);
}

.markdown-content .markdown-th {
  background-color: var(--quick-action-bg);
}

.markdown-content .markdown-strong,
.markdown-content .markdown-em {
  color: var(--text-color);
}

.markdown-content .markdown-hr {
  background-color: var(--border-color);
}

.markdown-content .markdown-del {
  color: var(--text-secondary);
}

/* 暗色主题样式 - 只包含与亮色主题不同的部分 */
@media (prefers-color-scheme: dark) {
  .chat-input-container {
    border-top-color: var(--border-color);
  }
  
  /* 暗色模式聊天按钮特殊样式 */
  .chat-action-button:disabled {
    color: var(--text-secondary);
  }
  
  .chat-action-button:disabled svg {
    fill: var(--text-secondary);
    stroke: var(--text-secondary);
    color: var(--text-secondary);
  }
  
  /* 暗色模式快捷操作按钮特殊样式 */
  .quick-action-button:disabled {
    background-color: var(--input-bg);
    color: var(--text-secondary);
  }

  /* 暗色模式快捷操作按钮悬停样式覆盖 */
  .quick-action-button:hover:not(:disabled),
  .regenerate-button.quick-action-button:hover:not(:disabled) {
    border-color: var(--primary-hover);
    color: var(--text-color);
  }
  
  .category-heading {
    font-size: var(--font-size-md);
  }
  
  /* Markdown内容暗色模式特殊样式 */
  .markdown-content .markdown-code-inline {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .markdown-content .markdown-code-header,
  .markdown-content .markdown-code-block,
  .markdown-content .markdown-pre,
  .markdown-content .markdown-blockquote,
  .markdown-content .markdown-table,
  .markdown-content .markdown-th,
  .markdown-content .markdown-td {
    background-color: var(--input-bg);
  }
}

/* 聊天容器样式 */

.ai-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background-color: var(--background-color);
  height: 100%;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
  /* 优化渲染性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.ai-chat.hidden {
  display: none;
}

.ai-chat.visible {
  display: flex;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
  min-height: 0;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style paint;
  /* 优化滚动性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  scroll-snap-type: y proximity;
  will-change: transform;
  position: relative;
  height: 100%;
}

.chat-input-container {
  flex-shrink: 0;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
}

/* 虚拟滚动容器样式 */
.virtual-scroll-container {
  position: relative;
  height: 100%;
}

/* 加载更多触发器样式 */
.load-more-trigger {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
}

/* 底部观察器样式 */
.bottom-observer {
  height: 1px;
}

/* 移动端聊天消息区域样式 */
@media (max-width: 768px) {
  .chat-messages {
    padding: var(--spacing-sm);
  }
}

/* 确保消息内容不会撑开容器 */
.message-content {
  max-width: 80%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 18px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow: hidden;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
}

/* Markdown 内容区域样式优化 */
.markdown-content {
  line-height: 1.6;
  overflow: visible;
  padding-right: var(--spacing-sm);
  max-width: 100%;
}

/* 为 markdown 内容区域添加自定义滚动条样式 */
.markdown-content::-webkit-scrollbar {
  width: 4px;
}

.markdown-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.markdown-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.markdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.welcome-message {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-lg);
  font-style: italic;
}

.message {
  margin-bottom: var(--spacing-md);
  display: flex;
}

.user-message {
  justify-content: flex-end;
}

.assistant-message {
  justify-content: flex-start;
}

.user-message .message-content {
  background-color: var(--primary-color);
  color: white;
  border-bottom-right-radius: 4px;
}

.assistant-message .message-content {
  background-color: var(--message-bg);
  color: var(--text-color);
  border-bottom-left-radius: 4px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  padding: 12px 16px; /* 增加内边距，与 message-content 保持一致 */
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--typing-indicator-color);
  border-radius: var(--border-radius-full);
  display: inline-block;
  margin: 0 2px;
  animation: typing 1s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.chat-input-container {
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  padding: var(--spacing-sm);
  flex-shrink: 0;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
}

@media (max-width: 768px) {
  .ai-chat {
    border-radius: 0;
    /* 使用统一的安全区域适配类 */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .chat-messages {
    flex: 1;
    padding: var(--spacing-sm);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    /* 使用绝对定位避免高度计算问题 */
    position: absolute;
    top: calc(env(safe-area-inset-top) + 60px);
    left: 0;
    right: 0;
    bottom: 90px;
    /* 确保内容区域可以滚动 */
    box-sizing: border-box;
    /* 修复移动端滚动到底部被遮挡的问题 */
    scroll-padding-bottom: 90px;
    /* 优化滚动性能 */
    will-change: scroll-position;
    /* 防止滚动回弹 */
    overscroll-behavior-y: contain;
  }
  
  .message-content {
    max-width: 90%;
    font-size: var(--font-size-md);
    padding: 12px 16px;
  }
  
  .chat-input-container {
    padding: var(--spacing-sm);
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    z-index: 100;
    min-height: 90px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 使用统一的安全区域适配 */
    padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom));
  }
}

/* 隐藏垂直滚动条但保持滚动功能 */
.chat-messages::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.markdown-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox隐藏滚动条 */
.chat-messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.markdown-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 暗色模式样式 */
@media (prefers-color-scheme: dark) {
  .ai-chat {
    background-color: var(--background-color);
  }
  
  .chat-input-container {
    background-color: var(--background-color);
    border-top-color: var(--border-color);
  }
  
  .welcome-message {
    color: var(--text-secondary);
  }
  
  .assistant-message .message-content {
    background-color: var(--message-bg);
    color: var(--text-color);
  }
  
  .typing-indicator span {
    background-color: var(--typing-indicator-color);
  }
  
  /* Markdown内容暗色模式样式 */
  .markdown-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .markdown-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .markdown-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* 移动端暗色模式样式 */
  @media (max-width: 768px) {
    .chat-input-container {
      background-color: var(--background-color);
      border-top-color: var(--border-color);
    }
    
    .keyboard-visible .chat-input-container {
      background-color: var(--background-color);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
      /* 确保在键盘弹出时输入区域不会被压缩 */
      min-height: auto;
      /* 添加底部内边距，确保内容不被键盘遮挡 */
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* 键盘可见时聊天消息区域的特殊处理 - 暗色模式 */
    .keyboard-visible .chat-messages {
      /* 确保在键盘弹出时聊天消息区域仍然可见 */
      height: auto;
      /* 确保底部有足够的空间，不被输入区域遮挡 */
      padding-bottom: calc(env(safe-area-inset-bottom) + 90px);
      /* 保持顶部边距，避免被tab-navigation遮住 */
      padding-top: calc(env(safe-area-inset-top) + 60px);
      /* 确保消息区域可以缩小 */
      min-height: 0;
      /* 确保内容区域可以滚动 */
      box-sizing: border-box;
      /* 修复暗色模式键盘可见时滚动到底部被遮挡的问题 */
      scroll-padding-bottom: calc(var(--keyboard-height) + env(safe-area-inset-bottom) + 90px);
    }
  }
}

/* 重新生成按钮样式 - 参考quick-action-button */
.assistant-message-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.regenerate-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.regenerate-button.quick-action-button {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--quick-action-bg);
  border: 1px solid var(--quick-action-border);
  border-radius: 16px;
  color: var(--text-color);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.regenerate-button.quick-action-button:hover:not(:disabled) {
  background-color: var(--quick-action-hover-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(123, 85, 239, 0.2);
}

.regenerate-button.quick-action-button svg {
  width: 14px;
  height: 14px;
}

.regenerate-button.quick-action-button span {
  font-size: 12px;
  line-height: 1;
}

/* 移动端重新生成按钮样式 */
@media (max-width: 768px) {
  .regenerate-container {
    width: 100%;
  }
  
  .regenerate-button.quick-action-button {
    font-size: 12px;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .regenerate-button.quick-action-button svg {
    width: 14px;
    height: 14px;
  }
  
  .regenerate-button.quick-action-button span {
    font-size: 12px;
  }
}

/* 暗色模式重新生成按钮样式 */
@media (prefers-color-scheme: dark) {
  .regenerate-button.quick-action-button {
    background-color: var(--quick-action-bg);
    border-color: var(--quick-action-border);
    color: var(--text-color);
  }
  
  .regenerate-button.quick-action-button:hover:not(:disabled) {
    background-color: var(--quick-action-hover-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
  }
}

/* 聊天输入区域样式 */

.chat-input-form {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}

.chat-input-wrapper {
  display: flex;
  width: 100%;
  padding: var(--spacing-sm);
  gap: var(--spacing-sm);
  align-items: center;
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  /* 移除wrapper的边框，避免双重描边 */
  border: none;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
}

.chat-input {
  display: flex;
  padding: 0;
  gap: var(--spacing-md);
  align-items: center;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
}

.chat-input input,
.chat-input-wrapper input,
.ai-chat .chat-input input,
.ai-chat .chat-input-wrapper input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--input-border, var(--gray-400));
  border-radius: 24px;
  font-size: var(--font-size-md);
  outline: none;
  transition: all var(--transition-normal) ease;
  height: 40px;
  box-sizing: border-box;
  background: var(--input-bg, var(--white));
  color: var(--text-color, var(--gray-800));
  /* 移除原生输入框样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 性能优化：减少重绘和回流 */
  will-change: border-color, box-shadow;
  contain: layout style;
}

/* 更强的选择器确保样式覆盖 */
input[type="text"].chat-input,
input[type="text"].chat-input-wrapper,
.ai-chat input[type="text"],
.chat-input-form input[type="text"] {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-lg) !important;
  border: 1px solid var(--input-border, var(--gray-400)) !important;
  border-radius: 24px !important;
  font-size: var(--font-size-md) !important;
  outline: none !important;
  transition: all var(--transition-normal) ease !important;
  height: 40px !important;
  box-sizing: border-box !important;
  background: var(--input-bg, var(--white)) !important;
  color: var(--text-color, var(--gray-800)) !important;
  /* 移除原生输入框样式 */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.chat-input input:focus {
  border-color: var(--primary-color);
  box-shadow: none;
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.chat-action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: var(--border-radius-full);
  cursor: pointer;
  font-size: 20px;
  line-height: 40px;
  transition: all var(--transition-normal) ease;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
  margin-top: 0;
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* 性能优化：减少重绘和回流 */
  will-change: transform, background-color;
  contain: layout style;
  /* 优化渲染性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.chat-action-button svg {
  width: 20px;
  height: 20px;
  line-height: 1;
}

.chat-action-button:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

.chat-action-button:disabled {
  background-color: var(--gray-400);
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .chat-input {
    flex-shrink: 0;
    margin-top: var(--spacing-xs);
    position: relative;
    z-index: 10;
  }
  
  .chat-input input {
    font-size: var(--font-size-sm);
    height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 36px;
    /* 防止iOS Safari上输入框缩放 */
    font-size: 16px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  .chat-action-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* 虚拟键盘可见时的样式 - 使用统一的安全区域适配 */
  .keyboard-visible .chat-input {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000;
  }
  
  /* PWA 模式下的样式 - 只在问题面板显示时添加底部间距 */
  .chat-input.pwa-mode {
    /* 移除固定的padding-bottom，避免问题面板隐藏时的空白 */
    padding-bottom: 0;
  }
  
  /* iOS 设备下的样式 - 只在问题面板显示时添加底部间距 */
  .chat-input.ios-mode {
    /* 移除固定的padding-bottom，避免问题面板隐藏时的空白 */
    padding-bottom: 0;
  }
  
  /* 安卓设备下的样式 - 只在问题面板显示时添加底部间距 */
  .chat-input.android-mode {
    /* 移除固定的padding-bottom，避免问题面板隐藏时的空白 */
    padding-bottom: 0;
  }
  
  /* 当问题面板显示时，为输入框添加适当的底部间距 */
  .question-panel.show ~ .chat-input.pwa-mode,
  .question-panel.show ~ .chat-input.ios-mode,
  .question-panel.show ~ .chat-input.android-mode {
    padding-bottom: var(--spacing-md);
  }
}

/* 聊天Markdown内容样式 - 参考sydf-m项目 */

.markdown-content {
  line-height: 1.6;
  color: var(--gray-900);
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: content;
  /* 优化文本渲染性能 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题样式 */
.markdown-content .markdown-h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 1.2em 0 0.8em 0;
  color: var(--gray-800);
  border-bottom: 2px solid var(--gray-300);
  padding-bottom: 0.3em;
}

.markdown-content .markdown-h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 1em 0 0.6em 0;
  color: var(--gray-800);
}

.markdown-content .markdown-h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.8em 0 0.4em 0;
  color: var(--gray-800);
}

/* 段落样式 */
.markdown-content .markdown-p {
  margin: 0.8em 0;
  line-height: 1.7;
}

/* 列表样式 */
.markdown-content .markdown-ul,
.markdown-content .markdown-ol {
  margin: 0.8em 0;
  padding-left: 1.5em;
}

.markdown-content .markdown-li {
  margin: 0.3em 0;
  line-height: 1.5;
}

/* 任务列表样式 */
.markdown-content .task-list-item {
  list-style-type: none;
  padding-left: 0;
}

.markdown-content .markdown-task-checkbox {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* 强调样式 */
.markdown-content .markdown-strong {
  font-weight: 600;
  color: var(--gray-900);
}

.markdown-content .markdown-em {
  font-style: italic;
  color: var(--gray-600);
}

/* 代码样式 */
.markdown-content .markdown-code-inline {
  background-color: var(--gray-100);
  color: var(--primary-color);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.markdown-content .markdown-code-wrapper {
  margin: 1em 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
}

.markdown-content .markdown-code-header {
  background-color: var(--gray-100);
  padding: 0.3em 0.8em;
  border-bottom: 1px solid var(--gray-300);
  font-size: 0.8em;
  color: var(--gray-600);
}

.markdown-content .markdown-code-language {
  text-transform: uppercase;
  font-weight: 600;
}

.markdown-content .markdown-code-block {
  display: block;
  background-color: var(--gray-100);
  padding: 1em;
  margin: 0;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--gray-900);
}

.markdown-content .markdown-pre {
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 1em;
  overflow-x: auto;
  margin: 1em 0;
}

/* 引用样式 */
.markdown-content .markdown-blockquote {
  border-left: 4px solid var(--primary-color);
  background-color: var(--gray-100);
  margin: 1em 0;
  padding: 0.8em 1.2em;
  font-style: italic;
  color: var(--gray-600);
}

/* 表格样式 */
.markdown-content .markdown-table-wrapper {
  margin: 1em 0;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--gray-300);
}

.markdown-content .markdown-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.markdown-content .markdown-th,
.markdown-content .markdown-td {
  border: 1px solid var(--gray-300);
  padding: 0.6em 1em;
  text-align: left;
}

.markdown-content .markdown-th {
  background-color: var(--gray-100);
  font-weight: 600;
}

/* 分隔线样式 */
.markdown-content .markdown-hr {
  border: none;
  border-top: 2px solid var(--gray-300);
  margin: 2em 0;
}

/* 链接样式 */
.markdown-content .markdown-a {
  color: var(--primary-color);
  text-decoration: none;
}

.markdown-content .markdown-a:hover {
  text-decoration: underline;
}

/* 图片样式 */
.markdown-content .markdown-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1em 0;
}

/* 删除线样式 */
.markdown-content .markdown-del {
  text-decoration: line-through;
  color: var(--gray-600);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .markdown-content .markdown-h1 {
    font-size: 1.3em;
  }

  .markdown-content .markdown-h2 {
    font-size: 1.2em;
  }

  .markdown-content .markdown-h3 {
    font-size: 1.1em;
  }

  .markdown-content .markdown-pre {
    padding: 0.8em;
    font-size: 0.9em;
  }

  .markdown-content .markdown-table {
    font-size: 0.9em;
  }

  .markdown-content .markdown-th,
  .markdown-content .markdown-td {
    padding: 0.4em 0.6em;
  }
}

/* 标题样式优化 */
.markdown-content .markdown-h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.4em 0 0.3em 0;
  color: var(--gray-800);
  border-bottom: 2px solid var(--gray-300);
  padding-bottom: 0.3em;
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0.4em 0 0.3em 0;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-300);
  padding-bottom: 0.2em;
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-h3,
.markdown-content .markdown-h4,
.markdown-content .markdown-h5,
.markdown-content .markdown-h6 {
  font-weight: 600;
  margin: 0.3em 0 0.2em 0;
  color: var(--gray-800);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-h3 {
  font-size: 1.2em;
}

.markdown-content .markdown-h4 {
  font-size: 1.1em;
}

.markdown-content .markdown-h5,
.markdown-content .markdown-h6 {
  font-size: 1em;
}

.markdown-content .markdown-h6 {
  color: var(--gray-600);
}

/* 段落样式优化 */
.markdown-content .markdown-p {
  margin: 0.2em 0;
  line-height: 1.5;
}

/* 列表样式优化 */
.markdown-content .markdown-ul {
  margin: 0.2em 0;
  padding-left: 1.5em;
  list-style-type: disc;
}

.markdown-content .markdown-ol {
  margin: 0.2em 0;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.markdown-content .markdown-li {
  margin: 0.1em 0;
  line-height: 1.4;
}

/* 任务列表样式 */
.markdown-content .task-list-item {
  list-style-type: none;
  padding-left: 0;
}

.markdown-content .markdown-task-checkbox {
  margin-right: 0.5em;
  vertical-align: middle;
}

/* 链接样式优化 */
.markdown-content .markdown-a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: all var(--transition-normal) ease;
}

.markdown-content .markdown-a:hover {
  border-bottom-color: var(--primary-color);
  text-decoration: underline;
  color: var(--primary-hover);
}

/* 代码样式优化 */
.markdown-content .markdown-code-inline {
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 0.85em;
  border-radius: 3px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  color: var(--gray-900);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-code-wrapper {
  margin: 0.5em 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
  will-change: auto;
}

.markdown-content .markdown-code-header {
  background-color: var(--gray-100);
  padding: 0.3em 0.8em;
  border-bottom: 1px solid var(--gray-300);
  font-size: 0.8em;
  color: var(--gray-600);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-code-language {
  text-transform: uppercase;
  font-weight: 600;
}

.markdown-content .markdown-code-block {
  display: block;
  background-color: var(--gray-100);
  padding: 0.8em;
  margin: 0;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--gray-900);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
  /* 优化滚动性能 */
  will-change: auto;
  -webkit-overflow-scrolling: touch;
}

.markdown-content .markdown-pre {
  background-color: var(--gray-100);
  padding: 0.8em;
  margin: 0.5em 0;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--gray-900);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
  /* 优化滚动性能 */
  will-change: auto;
  -webkit-overflow-scrolling: touch;
}

/* 引用样式优化 */
.markdown-content .markdown-blockquote {
  margin: 0.5em 0;
  padding: 0.2em 1em;
  color: var(--gray-600);
  border-left: 0.3em solid var(--gray-300);
  background-color: var(--gray-100);
  border-radius: 0 3px 3px 0;
}

/* 表格样式优化 - 响应式支持 */
.markdown-content .markdown-table-wrapper {
  margin: 0.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1px solid var(--gray-300);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
  will-change: auto;
}

.markdown-content .markdown-table {
  margin: 0;
  border-collapse: collapse;
  width: 100%;
  min-width: 300px;
  background-color: var(--white);
  /* 性能优化：减少重绘和回流 */
  table-layout: fixed;
}

.markdown-content .markdown-thead {
  background-color: var(--gray-100);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-tbody {
  background-color: transparent;
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-tr {
  border-top: 1px solid var(--gray-300);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-tr:hover {
  background-color: var(--gray-100);
  /* 性能优化：减少重绘和回流 */
  will-change: background-color;
}

.markdown-content .markdown-th {
  padding: 0.6em 1em;
  font-weight: 600;
  text-align: left;
  border: 1px solid var(--gray-300);
  background-color: var(--gray-100);
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-content .markdown-td {
  padding: 0.6em 1em;
  border: 1px solid var(--gray-300);
  vertical-align: top;
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 强调样式优化 */
.markdown-content .markdown-strong {
  font-weight: 600;
  color: var(--gray-900);
}

.markdown-content .markdown-em {
  font-style: italic;
  color: var(--gray-900);
}


/* 新增：图片样式 */
.markdown-content .markdown-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.5em 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout style;
  /* 优化图片渲染性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 新增：删除线样式 */
.markdown-content .markdown-del {
  text-decoration: line-through;
  color: var(--gray-600);
}

@media (max-width: 768px) {
  .markdown-content .markdown-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid var(--gray-300);
  }
  
  .markdown-content .markdown-table {
    display: table;
    width: 100%;
    max-width: 100%;
    table-layout: auto; /* 改为auto让表格自动调整宽度 */
    border-collapse: collapse;
    box-sizing: border-box;
  }
  
  .markdown-content .markdown-th,
  .markdown-content .markdown-td {
    padding: 0.4em 0.6em;
    white-space: normal; /* 允许文本换行 */
    word-wrap: break-word; /* 允许长单词换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
    max-width: 200px; /* 限制单元格最大宽度，防止过宽 */
    box-sizing: border-box;
  }
  
  /* 对于特别宽的表格，允许水平滚动 */
  .markdown-content .markdown-table-wrapper .markdown-table {
    min-width: auto; /* 移除最小宽度限制 */
  }
}

/* 图片懒加载样式 */
.markdown-img-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  margin: 0.5em 0;
  max-width: 100%;
  /* 性能优化：减少重绘和回流 */
  contain: layout style;
}

.markdown-img-placeholder {
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 图片加载动画 */
.markdown-img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.markdown-img.loaded {
  opacity: 1;
}

/* 聊天问题面板样式 */

.question-panel {
  padding: var(--spacing-lg);
  max-height: 350px;
  overflow-y: auto;
  background-color: transparent;
  margin-bottom: 0;
}

.question-tabs {
  display: flex;
  margin-bottom: var(--spacing-sm);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* 减少高度 */
  min-height: 32px;
  /* 移除阴影 */
  box-shadow: none;
  /* 减少内边距 */
  padding: 0;
}

.question-tabs::-webkit-scrollbar {
  display: none;
}

.tab-button {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--gray-600);
  font-size: var(--font-size-md);
  white-space: nowrap;
  transition: color var(--transition-normal), border-color var(--transition-normal);
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* 确保不继承button的margin-top */
  margin-top: 0;
}

.tab-button.active {
  color: var(--primary-color);
  font-weight: 600;
}

.tab-button:hover {
  color: var(--primary-color);
  background-color: transparent;
}

.question-content {
  height: calc(100% - 48px);
  overflow-y: auto;
  padding-right: var(--spacing-sm);
}

.question-group {
  margin-bottom: var(--spacing-md);
}

.category-heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
}

.questions-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  /* 确保选项之间有足够的间距 */
  row-gap: var(--spacing-sm);
}

.question-text {
  background-color: var(--gray-100);
  border-radius: 12px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  color: var(--gray-800);
  line-height: 1.4;
  margin: 0;
  transition: background-color var(--transition-normal);
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.question-text:hover {
  background-color: var(--gray-200);
}

@media (max-width: 768px) {
  .question-panel {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    max-height: 200px;
    overflow-y: auto;
    background-color: transparent;
    /* 保持与电脑端一致的简洁样式 */
  }
  
  .question-tabs {
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 与电脑端保持一致 */
  }
  
  .tab-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    /* 与电脑端保持一致 */
    /* 确保不继承button的margin-top */
    margin-top: 0;
    /* 去除阴影 */
    box-shadow: none;
  }
  
  .question-text {
    background-color: var(--gray-100);
    border-radius: 12px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--gray-800);
    line-height: 1.4;
    margin: 0;
    /* 与电脑端保持一致 */
  }
  
  .question-text:hover {
    background-color: var(--gray-200);
  }
  
  /* 键盘可见时的问题面板样式 */
  .keyboard-visible .question-panel {
    max-height: 200px;
  }
}

/* 隐藏垂直滚动条但保持滚动功能 */
.question-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.question-panel::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox隐藏滚动条 */
.question-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.question-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 暗色模式问题面板样式 */
@media (prefers-color-scheme: dark) {
  .question-panel {
    background-color: #2d2d2d;
    border-bottom-color: #495057;
  }
  
  .question-tabs {
    border-bottom-color: #495057;
  }
  
  .tab-button {
    color: var(--iztro-color-text);
  }
  
  .tab-button.active {
    color: var(--primary-color);
  }
  
  .tab-button:hover {
    color: var(--primary-color);
  }
  
  .category-heading {
    color: var(--iztro-color-text);
  }
  
  .question-text {
    background-color: #343a40;
    color: var(--iztro-color-text);
  }
  
  .question-text:hover {
    background-color: #495057;
  }
  
  /* 移动端暗色模式问题面板样式 */
  @media (max-width: 768px) {
    .question-panel {
      background-color: transparent;
      box-shadow: none;
      border: none;
    }
    
    /* 键盘可见时的问题面板暗色模式样式 */
    .keyboard-visible .question-panel {
      box-shadow: none;
    }
  }
}

/* 聊天快捷操作样式 */

.quick-actions-container {
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-sm);
}

.quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  overflow: visible;
  align-items: center;
}

/* 移动端快捷操作按钮样式 */
@media (max-width: 768px) {
  .quick-actions {
    gap: 6px;
    padding-bottom: 4px;
    overflow: visible;
  }
}

/* 隐藏滚动条 */
.quick-actions::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.quick-actions {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Quick Action Button - 独立样式，不继承通用按钮样式 */
.quick-action-button {
  /* 重置所有可能的按钮继承样式 */
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 25px;
  color: var(--gray-800);
  font-size: var(--font-size-sm);
  font-family: inherit;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  max-width: none;
  margin: 0;
  /* 禁用移动端点击时的蓝色高亮 */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.quick-action-button:hover:not(:disabled) {
  background-color: var(--gray-200);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.quick-action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--gray-200);
}

@media (max-width: 768px) {
  .quick-actions-container {
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
    /* 确保快捷操作区域在虚拟键盘弹出时仍然可见 */
    position: relative;
    z-index: 1000;
    /* 确保在键盘弹出时不会被遮挡 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .quick-actions {
    gap: 6px;
    padding-bottom: 4px;
    overflow: visible;
    /* 防止按钮在虚拟键盘弹出时变形 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  .quick-action-button {
    font-size: 12px;
    /* 增加内间距，使按钮不那么拥挤 */
    padding: 6px 12px;
    /* 确保按钮在移动设备上有足够的触摸区域，但不限制宽度自适应 */
    min-height: 32px;
    /* 根据文字内容自适应宽度 */
    min-width: fit-content;
    width: auto;
    max-width: none;
    /* 防止按钮在虚拟键盘弹出时变形 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* 当键盘可见时的特殊处理 */
  .keyboard-visible .quick-actions-container {
    /* 确保在键盘弹出时快捷操作区域仍然可见 */
    position: relative;
    z-index: 1000;
    /* 添加背景色，防止内容透过 */
    background-color: var(--white);
    /* 添加阴影，增强视觉层次 */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
}

body.model-selector-open .quick-actions-container {
  overflow: visible;
}

/*
 * 聊天组件主样式文件
 * 导入所有模块化的样式文件，提供统一的样式入口
 */

/* 导入变量定义 */

/* 导入 Grid 布局样式 */

/* 导入 Flexbox 布局样式 */

/* 导入键盘处理样式 */

/* 导入移动端专用样式 */

/* 导入主题样式 */

/* 导入聊天容器样式 */

/* 导入聊天输入区域样式 */

/* 导入Markdown内容样式 */

/* 导入问题面板样式 */

/* 导入快速操作样式 */

/* 保留的特定聊天样式 */
/* 这里放置一些不适合分类到具体模块的特殊聊天样式 */

/* 消息操作按钮样式 */
.message-actions-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  z-index: 1;
  gap: 8px;
  margin-top: 8px;
  /* 性能优化：减少重绘和回流 */
  will-change: auto;
  contain: layout;
}

.copy-button,
.share-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  flex-shrink: 0;
  /* 性能优化：减少重绘和回流 */
  will-change: transform, background-color;
  /* 优化按钮点击性能 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.copy-button:hover,
.share-button:hover {
  background-color: var(--quick-action-bg);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.copy-button:active,
.share-button:active {
  transform: translateY(0);
}

/* 按钮图标样式 */
.copy-button svg,
.share-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* 去除移动端点击后的默认蓝色高光 */
.copy-button,
.share-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Base styles restored, with the critical box-sizing fix */

.segmented-control {
  display: inline-flex;
  background-color: #f0f0f0;
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px;
  gap: 2px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 关键修复：确保盒模型计算正确 */
  box-sizing: border-box;
  /* 防止在移动端点击时出现偏移和上移 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* 确保在移动端设备上正确显示 */
  will-change: transform;
  -webkit-will-change: transform;
  /* 防止在点击时出现偏移 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 确保在点击时不会改变位置 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* 防止在点击时出现默认的高亮效果 */
  -webkit-tap-highlight-color: transparent;
  /* 防止在移动端点击时页面滚动 */
  touch-action: manipulation;
  -webkit-touch-action: manipulation;
  z-index: 1;
  transition: background-color 0.3s ease;
  /* 确保滑块不会被裁剪 */
  contain: layout style;
  /* 优化渲染性能 */
  will-change: auto;
  /* 确保子元素能够正确渲染 */
  isolation: isolate;
}

/* 隐藏滚动条 */
.segmented-control::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.segmented-control-slider {
  position: absolute;
  top: 2px;
  height: calc(100% - 4px);
  background-color: white;
  border-radius: calc(var(--border-radius-md) - 2px);
  transition: width var(--transition-normal) ease, left var(--transition-normal) ease, opacity var(--transition-normal) ease;
  z-index: 1;
  box-shadow: var(--box-shadow-sm);
  /* 关键修复：确保盒模型计算正确 */
  box-sizing: border-box;
  /* 防止在点击时出现偏移 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* 确保在移动端设备上正确显示 */
  will-change: transform, width, left;
  -webkit-will-change: transform, width, left;
  /* 防止在点击时出现偏移 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 确保滑块始终可见 */
  opacity: 1;
  /* 防止滑块被裁剪 */
  overflow: visible;
  /* 确保滑块在容器内正确显示 */
  min-width: 0;
  /* 优化渲染性能 */
  contain: layout style paint;
}

.segmented-control-label {
  text-align: center;
  position: relative;
  display: block;
  margin-bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
}

.segmented-control-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segmented-control-button {
  display: flex;
  padding: 4px 12px; /* 进一步减少垂直和水平内边距 */
  color: var(--gray-800);
  cursor: pointer;
  border-radius: calc(var(--border-radius-md) - 2px);
  transition: color var(--transition-normal) ease;
  user-select: none;
  position: relative;
  z-index: 2;
  font-size: var(--font-size-sm); /* 使用较小的字体 */
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 0 0 auto;
  /* 关键修复：确保盒模型计算正确 */
  box-sizing: border-box;
  /* 防止移动端点击后缩小 */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 防止点击时的默认缩放行为和偏移 */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  /* 防止在某些浏览器中点击后元素缩小 */
  -webkit-font-smoothing: antialiased;
  /* 保持较低的高度，同时确保在移动端有足够的触摸区域 */
  min-height: 28px;
  /* 确保在移动端设备上正确显示 */
  will-change: transform;
  -webkit-will-change: transform;
  /* 防止在点击时出现偏移 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 移动端特定样式 */
@media (max-width: 768px) {
  .segmented-control-button {
    /* 在移动端增加触摸区域大小 */
    min-height: 32px;
    padding: 6px 14px;
    /* 确保在移动端有更好的触摸体验 */
    font-size: calc(var(--font-size-sm) + 1px);
  }
  
  .segmented-control {
    /* 在移动端增加整体高度以适应更大的触摸区域 */
    min-height: 40px;
  }
}

.segmented-control-input:checked + .segmented-control-button {
  color: black;
  font-weight: 500;
}

/* 暗色模式滑动控制器样式 */
@media (prefers-color-scheme: dark) {
  .segmented-control {
    background-color: #2d2d2d;
  }
  
  .segmented-control-slider {
    background-color: #1B1B1B;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  .segmented-control-button {
    color: #ced4da;
  }
  
  .segmented-control-input:checked + .segmented-control-button {
    color: white;
  }
}

/* 测试分段控制器的容器样式 */
.test-segmented-control-container {
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.test-segmented-control-wrapper {
  margin-bottom: 20px;
}

.iztro-astrolabe {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  display: grid;
  position: relative;
  width: 100%;
  grid-gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas:
    "g3 g4 g5 g6"
    "g2 ct ct g7"
    "g1 ct ct g8"
    "g0 g11 g10 g9";
}

/* 移动端响应式布局 */
@media (max-width: 768px) {
  .iztro-astrolabe {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "g3 g4 g5 g6"
      "g2 ct ct g7"
      "g1 ct ct g8"
      "g0 g11 g10 g9";
    grid-auto-rows: minmax(60px, auto);
    grid-gap: 2px;
  }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .iztro-astrolabe {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "g3 g4 g5 g6"
      "g2 ct ct g7"
      "g1 ct ct g8"
      "g0 g11 g10 g9";
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 1px;
  }
}

.iztro-star-mutagen {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  margin-left: 1px;
  padding: 0 2px;
}

.star-with-mutagen {
  position: relative;
}

.star-with-mutagen::before {
  bottom: 0;
  content: " ";
  left: -4px;
  position: absolute;
  top: 0;
  width: 4px;
  transition: all 0.25s ease-in-out;
}

.star-with-mutagen::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -4px;
  right: 0;
  height: 4px;
  transition: all 0.25s ease-in-out;
}
/* 宫位样式 */

.iztro-palace {
  padding: 3px;
  display: grid;
  text-transform: capitalize;
  grid-template-rows: auto auto auto 50px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "major minor adj"
    "horo  horo adj"
    "fate  fate fate"
    "ft   ft  ft";
  transition: all 0.25s ease-in-out;
  grid-auto-flow: column;
  box-sizing: border-box;
}

/* 为每个宫位添加grid-area类 */
.iztro-palace.g0 {
  grid-area: g0;
}

.iztro-palace.g1 {
  grid-area: g1;
}

.iztro-palace.g2 {
  grid-area: g2;
}

.iztro-palace.g3 {
  grid-area: g3;
}

.iztro-palace.g4 {
  grid-area: g4;
}

.iztro-palace.g5 {
  grid-area: g5;
}

.iztro-palace.g6 {
  grid-area: g6;
}

.iztro-palace.g7 {
  grid-area: g7;
}

.iztro-palace.g8 {
  grid-area: g8;
}

.iztro-palace.g9 {
  grid-area: g9;
}

.iztro-palace.g10 {
  grid-area: g10;
}

.iztro-palace.g11 {
  grid-area: g11;
}

/* 移动端响应式布局 - 全屏沉浸式体验 */
@media (max-width: 768px) {
  .iztro-palace {
    grid-template-rows: auto auto auto 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "major minor adj"
      "horo  horo adj"
      "fate  fate fate"
      "ft   ft  ft";
    padding: 1px;
    min-height: 60px;
    /* 全屏沉浸式体验 */
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* 确保宫位在移动端填满可用空间 */
    width: 100%;
    max-width: 100%;
    /* 适配安全区域 */
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* 超小屏幕设备 - 全屏沉浸式体验 */
@media (max-width: 480px) {
  .iztro-palace {
    grid-template-rows: auto auto auto 35px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "major minor adj"
      "horo  horo adj"
      "fate  fate fate"
      "ft   ft  ft";
    padding: 1px;
    min-height: 55px;
    /* 全屏沉浸式体验 */
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* 确保宫位在超小屏幕设备上填满可用空间 */
    width: 100%;
    max-width: 100%;
    /* 适配安全区域 */
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
}

.iztro-palace.focused-palace {
  background-color: #aab8d32f;
}

.iztro-palace.opposite-palace {
  background-color: #93f73d4f;
}

.iztro-palace.surrounded-palace {
  background-color: #aff46f24;
}

/* 通用宫位元素样式 */
.iztro-palace-major,
.iztro-palace-minor {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-palace-major {
  grid-area: major;
}

.iztro-palace-minor {
  grid-area: minor;
  justify-self: center;
}

.iztro-palace-adj {
  grid-area: adj;
  display: inline-flex;
  justify-self: flex-end;
  gap: 1px;
  white-space: nowrap;
  text-align: right;
  overflow: hidden;
  font-size: var(--iztro-star-font-size-small);
}

/* 移动端文本换行处理 */
@media (max-width: 768px) {
  .iztro-palace-adj {
    white-space: normal;
    text-align: right;
    flex-wrap: wrap;
    font-size: var(--iztro-star-font-size-small);
  }
}

.iztro-palace-horo-star {
  grid-area: horo;
  align-self: center;
}

.iztro-palace-horo-star .stars {
  display: flex;
  gap: 1px;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-palace-scope {
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-palace-scope-decadal {
  font-weight: 600;
}

.iztro-palace-fate {
  grid-area: fate;
  align-self: flex-end;
  white-space: nowrap;
  justify-content: center;
  display: flex;
  gap: 1px;
  height: 15px;
  overflow: hidden;
  font-size: var(--iztro-star-font-size-small);
}

/* 移动端文本换行处理 */
@media (max-width: 768px) {
  .iztro-palace-scope {
    white-space: normal;
    text-align: center;
    word-break: break-word;
    font-size: var(--iztro-star-font-size-small);
  }
  
  .iztro-palace-fate {
    white-space: normal;
    flex-wrap: wrap;
    height: auto;
    min-height: 15px;
    font-size: var(--iztro-star-font-size-small);
  }
}

.iztro-palace-fate .iztro-palace-decadal-active {
  background-color: var(--iztro-color-decadal);
}

.iztro-palace-fate .iztro-palace-yearly-active {
  background-color: var(--iztro-color-yearly);
}

.iztro-palace-fate .iztro-palace-monthly-active {
  background-color: var(--iztro-color-monthly);
}

.iztro-palace-fate .iztro-palace-daily-active {
  background-color: var(--iztro-color-daily);
}

.iztro-palace-fate .iztro-palace-hourly-active {
  background-color: var(--iztro-color-hourly);
}

.iztro-palace-footer {
  grid-area: ft;
  display: grid;
  grid-template-columns: auto auto auto;
  align-self: flex-start;
}

.iztro-palace-lft24 {
  text-align: left;
}

.iztro-palace-rgt24 {
  text-align: right;
}

.iztro-palace-name {
  cursor: pointer;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-palace-name .iztro-palace-name-wrapper {
  position: relative;
}

/* 移动端文本换行处理 */
@media (max-width: 768px) {
  .iztro-palace-name {
    text-wrap: balance;
    white-space: normal;
    word-break: break-word;
    font-size: var(--iztro-star-font-size-small);
  }
}

.iztro-palace-name .iztro-palace-name-taichi {
  position: absolute;
  font-size: 10px;
  line-height: 12px;
  background-color: var(--iztro-color-major);
  padding: 0 1px;
  color: #fff;
  z-index: 2;
  border-radius: 0 2px 2px 0;
  font-weight: normal !important;
  bottom: 0;
}

.iztro-palace-gz {
  text-align: right;
  cursor: pointer;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-palace-gz span {
  display: inline-block;
  padding: 0 1px;
  text-wrap: nowrap;
}

.iztro-palace-dynamic-name {
  text-align: center;
  display: flex;
  white-space: nowrap;
  gap: 1px;
  justify-content: center;
  overflow: hidden;
  font-size: var(--iztro-star-font-size-small);
}

/* 移动端文本换行处理 */
@media (max-width: 768px) {
  .iztro-palace-dynamic-name {
    white-space: normal;
    flex-wrap: wrap;
    font-size: var(--iztro-star-font-size-small);
  }
}

.iztro-palace-dynamic-name .iztro-palace-dynamic-name-decadal {
  color: var(--iztro-color-decadal);
}

.iztro-palace-dynamic-name .iztro-palace-dynamic-name-yearly {
  color: var(--iztro-color-yearly);
}

.iztro-palace-dynamic-name .iztro-palace-dynamic-name-monthly {
  color: var(--iztro-color-monthly);
}

.iztro-palace-dynamic-name .iztro-palace-dynamic-name-daily {
  color: var(--iztro-color-daily);
}

.iztro-palace-dynamic-name .iztro-palace-dynamic-name-hourly {
  color: var(--iztro-color-hourly);
}
.iztro-center-palace {
  grid-area: ct;
  position: relative;
  width: 100%;
  height: 100%;
}

/* 移动端响应式布局 */
@media (max-width: 768px) {
  .iztro-center-palace {
    overflow: auto;
    max-height: 300px;
  }
  
  .iztro-center-palace ul.basic-info {
    grid-template-columns: 1fr;
    column-gap: 10px;
  }
  
  .horo-buttons {
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .horo-buttons .center-button {
    padding: 3px;
    font-size: 10px;
  }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .iztro-center-palace {
    max-height: 250px;
  }
  
  .horo-buttons .center-button {
    padding: 2px;
    font-size: 9px;
  }
}
.iztro-center-palace-centralize {
  text-align: center;
}

.iztro-center-palace ul.basic-info {
  margin: 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.iztro-center-palace ul.basic-info li {
  list-style: none;
}

.iztro-center-palace .center-title {
  padding: 5px 0;
  margin: 0;
  font-size: var(--iztro-star-font-size-big);
  font-weight: bold;
  text-align: center;
  border-bottom: 1px dashed var(--iztro-color-border);
}

.horo-buttons {
  margin: 10px;
  font-size: var(--iztro-star-font-size-small);
  display: flex;
  justify-content: space-around;
}

.horo-buttons .center-button {
  display: block;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--iztro-color-border);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  color: var(--iztro-color-text);
  user-select: none;
}

.horo-buttons .center-button:not(.disabled):hover {
  color: var(--iztro-color-major);
  background-color: var(--iztro-color-border);
}

.horo-buttons .center-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.horo-buttons .center-horo-hour {
  display: flex;
  align-items: center;
}

/* 移除了 iztro-copyright 样式 */

#palace-line {
  stroke: var(--iztro-color-awesome);
  opacity: 0.6;
  transition: all 0.25s ease-in-out;
}

#palace-line.decadal {
  stroke: var(--iztro-color-decadal);
}

.palace-line {
  position: absolute;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  top: 0;
  left: 0;
}

.solar-horoscope {
  display: flex;
  align-items: center;
  gap: 10px;
}

.solar-horoscope-centralize {
  justify-content: center;
}

.solar-horoscope .today {
  display: inline-block;
  font-size: var(--iztro-star-font-size-small);
  cursor: pointer;
  border: 1px solid var(--iztro-color-border);
  padding: 0 5px;
  transition: all 0.25s ease-in-out;
}

.solar-horoscope .today:hover {
  color: var(--iztro-color-major);
  background-color: var(--iztro-color-border);
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f0f2f5;
  transition: background-color 0.3s ease;
}

/* 移动端body样式 */
@media (max-width: 768px) {
  body {
    background-color: #fff;
  }
}

/* 暗色模式样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1B1B1B;
    color: #ffffff;
  }
  
  /* 移动端暗色模式样式 */
  @media (max-width: 768px) {
    body {
      background-color: #1B1B1B;
    }
  }
}

.App {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 移动端App容器样式 */
@media (max-width: 768px) {
  .App {
    padding: 15px;
    max-width: 100%;
  }
}

.content {
  display: flex;
  flex-direction: column;
}

.form-section {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 600px;
  margin: 0 auto;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 移动端表单区域样式 */
@media (max-width: 768px) {
  .form-section {
    width: 100%;
    padding: 20px 15px;
    border-radius: 0;
    box-shadow: none;
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto; /* 允许内容滚动 */
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    box-sizing: border-box; /* 确保padding不会增加总宽度 */
  }
}

/* 暗色模式表单区域样式 */
@media (prefers-color-scheme: dark) {
  .form-section {
    background: #2d2d2d;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
  
  /* 移动端暗色模式表单区域样式 */
  @media (max-width: 768px) {
    .form-section {
      background-color: #1B1B1B;
    }
  }
}

/* 合盘表单区域优化 */
.form-section form {
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box; /* 确保padding不会增加总宽度 */
}

/* 合盘表单分组优化 */
.form-section h3 {
  font-size: 18px;
  margin: 25px 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  color: #333;
}

/* 第一个分组不添加上边距 */
.form-section h3:first-of-type {
  margin-top: 10px;
}

.form-group {
  margin-bottom: 20px;
}

/* 移动端表单组样式 */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 24px;
  }
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
  transition: color 0.3s ease;
}

/* 暗色模式表单标签样式 */
@media (prefers-color-scheme: dark) {
  .form-group label {
    color: #ced4da;
  }
}

.form-group-segmented label {
  margin-bottom: 0;
}

.form-group-segmented {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.form-group-segmented .segmented-control {
  margin: 0 auto;
}

/* 移动端分段控制组件样式优化 */

.form-group input,
.form-group select {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 暗色模式输入框样式 */
@media (prefers-color-scheme: dark) {
  .form-group input,
  .form-group select {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #ffffff;
  }
  
  /* 移动端暗色模式输入框样式 */
  @media (max-width: 768px) {
    .form-group input,
    .form-group select {
      background-color: #2d2d2d;
      border-color: #495057;
      color: #ffffff;
      /* 确保iOS设备上select字体颜色正确 */
      color: #ffffff !important;
    }
    
    .form-group input:focus,
    .form-group select:focus {
      background-color: #2d2d2d;
      border-color: var(--iztro-color-active);
      box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
    }
  }
}

/* 移动端输入框样式优化 */
@media (max-width: 768px) {
  .form-group input,
  .form-group select {
    padding: 16px;
    font-size: 16px;
    border-radius: 8px;
    /* 触摸区域优化 */
    min-height: 44px;
    /* 防止iOS缩放 */
    touch-action: manipulation;
    /* 确保输入框在移动端有足够的间距 */
    margin-bottom: 5px;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(123,85,239,0.2);
  }
  
  /* 优化选择框在移动端的显示 */
  .form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 45px;
    /* 修复iOS设备上select字体蓝色问题 */
    color: #333333;
  }
  
  /* 优化数字输入框在移动端的体验 */
  .form-group input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  .form-group input[type="number"]::-webkit-outer-spin-button,
  .form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(123,85,239,0.25);
}

.form-group-inline {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 移动端内联表单组样式 */
@media (max-width: 768px) {
  .form-group-inline {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }
  
  .form-group-inline .form-group {
    margin-bottom: 20px;
  }
}

.form-group-inline .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form-group-inline .form-group input {
  width: 100%;
}

button {
  width: 100%;
  padding: 16px;
  background-color: #7B55EF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 15px;
}

/* 暗色模式按钮样式 */
@media (prefers-color-scheme: dark) {
  button {
    background-color: var(--primary-color);
  }
  
  button:hover {
    background-color: var(--primary-hover);
  }
}

/* 移动端按钮样式优化 */
@media (max-width: 768px) {
  button {
    padding: 18px;
    font-size: 18px;
    border-radius: 8px;
    margin-top: 24px;
    /* 禁用双击缩放 */
    touch-action: manipulation;
    /* 添加反馈效果 */
    transition: background-color 0.2s, transform 0.1s;
    /* 确保按钮有足够的触摸区域 */
    width: 100%;
    /* 添加阴影效果 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  button:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
  
  /* 重新排盘按钮特殊样式 */
  button.rechart-button {
    width: auto;
    padding: 14px 24px;
    min-height: 44px;
    margin-top: 20px;
    background-color: var(--primary-color);
    color: white;
  }
}

button:hover {
  background-color: #0056b3;
}

.astrolabe-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 暗色模式星盘区域样式 */
@media (prefers-color-scheme: dark) {
  .astrolabe-section {
    background: #2d2d2d;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
}

.astrolabe-header {
  text-align: center;
  margin-bottom: 20px;
}

.astrolabe-header h2 {
  color: #333;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.astrolabe-header p {
  color: #666;
  margin: 0;
  transition: color 0.3s ease;
}

/* 暗色模式标题样式 */
@media (prefers-color-scheme: dark) {
  .astrolabe-header h2 {
    color: #ffffff;
  }
  
  .astrolabe-header p {
    color: #ced4da;
  }
}

.astrolabe-container {
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rechart-button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}

button.rechart-button {
  width: auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: var(--primary-color);
  color: white;
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
 }
  
  .form-section {
    width: 100%;
    padding: 20px 15px;
  }
  
  .astrolabe-section {
    min-width: 100%;
  }
  
  .form-group-inline {
    flex-direction: column;
    gap: 0;
  }
  
  .form-group-inline .form-group {
    margin-bottom: 20px;
  }
}

.ai-chat-section {
  margin-top: 30px;
}

.result-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  height: calc(100vh - 80px); /* 固定高度，不随内容变化 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 暗色模式结果区域样式 */
@media (prefers-color-scheme: dark) {
  .result-section {
    background: #1B1B1B;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
}

/* 移动端result-section样式 */
@media (max-width: 768px) {
  .result-section {
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100vh;
    margin: 0;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  
  .tab-navigation {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  
  .tab-content {
    flex: 1;
    overflow: hidden;
    height: calc(100vh - 50px); /* 减去标签导航的高度 */
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

.tab-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;
}

.tab-navigation-actions,
.tab-navigation-spacer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 60px; /* Ensure both sides have a minimum width to balance */
  justify-content: flex-end; /* Align actions to the right */
}

.tab-navigation-spacer {
  justify-content: flex-start; /* Align spacer to the left */
}

.new-chat-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-secondary); /* Use a subtle color */
  transition: color 0.2s ease;
  box-shadow: none; /* Explicitly remove shadow */
}

.new-chat-button:hover {
  color: var(--primary-color); /* Highlight with primary color on hover */
  background: none; /* Ensure no background on hover */
}

@media (prefers-color-scheme: dark) {
  .new-chat-button {
    color: var(--text-color-secondary-dark, #888);
  }

  .new-chat-button:hover {
    color: var(--primary-color-dark, #9f86ff);
  }
}

/* 移除移动端按钮的全宽样式 */
@media (max-width: 768px) {
  .new-chat-button {
    width: auto;
    padding: 8px; /* 增加触摸区域 */
    margin-left: 8px;
  }
}

.tab-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许flex item收缩 */
  overflow: hidden; /* 防止内容溢出容器 */
}

.astrolabe-content {
  height: 100%;
  overflow: hidden;
}

/* 移动端星盘内容样式 */
@media (max-width: 768px) {
  .astrolabe-content {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
  }
  
  .astrolabe-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
  }
  
  .iztro-astrolabe {
    min-width: 300px;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* 超小屏幕设备 */
@media (max-width: 480px) {
  .astrolabe-content {
    padding: 5px 0;
  }
  
  .astrolabe-container {
    padding: 0 5px;
  }
  
  .iztro-astrolabe {
    min-width: 280px;
    max-width: 100%;
  }
}

.ai-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出容器 */
  min-height: 0; /* 确保flex子项可以收缩 */
}

@media (max-width: 768px) {
  .tab-content {
    min-height: 300px;
    overflow: hidden; /* 移动端也防止内容溢出 */
  }
  
  .ai-content {
    flex-grow: 1;
    overflow: hidden; /* 移动端也防止内容溢出 */
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

/* 合盘模式样式 */
.synastry-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
  flex-wrap: wrap;
}

.synastry-person {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.synastry-person h3 {
  margin-bottom: 15px;
  color: #333;
  text-align: center;
  transition: color 0.3s ease;
}

/* 暗色模式合盘标题样式 */
@media (prefers-color-scheme: dark) {
  .synastry-person h3 {
    color: #ffffff;
  }
}

/* 在小屏幕上垂直排列 */
@media (max-width: 768px) {
  .synastry-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .synastry-person {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .synastry-person h3 {
    margin-bottom: 10px;
    font-size: 16px;
  }
}

/* 隐藏垂直滚动条但保持滚动功能 */
.astrolabe-content::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.synastry-container::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox隐藏滚动条 */
.astrolabe-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.synastry-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 加载指示器样式 */
.loading-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  font-size: 16px;
  color: #666;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 20px 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 暗色模式加载指示器样式 */
@media (prefers-color-scheme: dark) {
  .loading-indicator {
    color: #ced4da;
    background-color: #2d2d2d;
  }
}

.loading-indicator::after {
  content: '';
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border: 2px solid #ddd;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 后台AI生成指示器样式 */
.background-ai-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
}

.indicator-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicator-text {
  font-size: 12px;
  white-space: nowrap;
}

/* 后台AI指示器中的打字动画 */
.background-ai-indicator .typing-indicator {
  display: flex;
  align-items: center;
}

.background-ai-indicator .typing-indicator span {
  height: 6px;
  width: 6px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  margin: 0 1px;
  animation: typing 1.4s infinite;
}

.background-ai-indicator .typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.background-ai-indicator .typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 2px 12px rgba(0, 123, 255, 0.5);
  }
  100% {
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  }
}

/* 移动端后台AI指示器样式 */
@media (max-width: 768px) {
  .background-ai-indicator {
    top: 5px;
    right: 5px;
    padding: 4px 8px;
  }
  
  .indicator-text {
    font-size: 10px;
  }
  
  .background-ai-indicator .typing-indicator span {
    height: 4px;
    width: 4px;
  }
}

/* 骨架屏加载组件样式 */

.skeleton-loader {
  width: 100%;
  height: 100%;
}

/* 骨架屏动画 */
.skeleton-animate .skeleton-line,
.skeleton-animate .skeleton-avatar,
.skeleton-animate .skeleton-title,
.skeleton-animate .skeleton-subtitle,
.skeleton-animate .skeleton-input-field,
.skeleton-animate .skeleton-input-button,
.skeleton-animate .skeleton-message-line {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.06);
}

.skeleton-animate .skeleton-line::after,
.skeleton-animate .skeleton-avatar::after,
.skeleton-animate .skeleton-title::after,
.skeleton-animate .skeleton-subtitle::after,
.skeleton-animate .skeleton-input-field::after,
.skeleton-animate .skeleton-input-button::after,
.skeleton-animate .skeleton-message-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skeleton-loading 1.5s infinite;
  z-index: 1;
}

@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 消息骨架屏样式 */
.skeleton-message {
  display: flex;
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.skeleton-content {
  flex: 1;
  min-width: 0;
}

.skeleton-line {
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-short {
  width: 60%;
}

.skeleton-long {
  width: 90%;
}

/* 聊天骨架屏样式 */
.skeleton-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}

.skeleton-header {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.skeleton-title {
  height: 24px;
  border-radius: 4px;
  width: 30%;
  margin-bottom: 8px;
}

.skeleton-subtitle {
  height: 16px;
  border-radius: 4px;
  width: 20%;
}

.skeleton-messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}

.skeleton-message-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.skeleton-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.skeleton-message-content {
  flex: 1;
  min-width: 0;
}

.skeleton-message-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-message-line:last-child {
  margin-bottom: 0;
}

.skeleton-input {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
}

.skeleton-input-container {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
}

.skeleton-input-field {
  flex: 1;
  height: 36px;
  border-radius: 18px;
  margin-right: 8px;
}

.skeleton-input-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 暗色模式下的骨架屏样式 */
@media (prefers-color-scheme: dark) {
  .skeleton-animate .skeleton-line,
  .skeleton-animate .skeleton-avatar,
  .skeleton-animate .skeleton-title,
  .skeleton-animate .skeleton-subtitle,
  .skeleton-animate .skeleton-input-field,
  .skeleton-animate .skeleton-input-button,
  .skeleton-animate .skeleton-message-line {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .skeleton-animate .skeleton-line::after,
  .skeleton-animate .skeleton-avatar::after,
  .skeleton-animate .skeleton-title::after,
  .skeleton-animate .skeleton-subtitle::after,
  .skeleton-animate .skeleton-input-field::after,
  .skeleton-animate .skeleton-input-button::after,
  .skeleton-animate .skeleton-message-line::after {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .skeleton-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .skeleton-input,
  .skeleton-input-container {
    border-color: rgba(255, 255, 255, 0.1);
  }
}
.iztro-astrolabe-theme-default {
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #7B55EF;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
}

/* 移动端字体大小调整 */
@media (max-width: 768px) {
  .iztro-astrolabe-theme-default {
    --iztro-star-font-size-big: 11px;
    --iztro-star-font-size-small: 10px;
  }
}

/* 超小屏幕设备字体大小调整 */
@media (max-width: 480px) {
  .iztro-astrolabe-theme-default {
    --iztro-star-font-size-big: 10px;
    --iztro-star-font-size-small: 9px;
  }
}

.iztro-astrolabe {
  text-align: left;
}

.iztro-palace {
  border: 1px solid var(--iztro-color-border);
}

.iztro-star-soft,
.iztro-star-tough,
.iztro-star-adjective,
.iztro-star-flower,
.iztro-star-helper,
.iztro-palace-fate,
.iztro-palace-horo-star,
.iztro-palace-scope,
.iztro-palace-dynamic-name,
.iztro-palace-lft24,
.iztro-palace-rgt24 {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  text-wrap: nowrap;
}
.iztro-palace-scope-age {
  text-wrap: balance;
}
.iztro-palace-scope-age,
.iztro-palace-scope-decadal {
  color: var(--iztro-color-text);
}

.iztro-palace-lft24 {
  color: var(--iztro-color-decorator-1);
}
.iztro-palace-rgt24 {
  color: var(--iztro-color-decorator-2);
  text-wrap: nowrap;
}

.iztro-star-major,
.iztro-star-tianma,
.iztro-star-lucun,
.iztro-palace-name,
.iztro-palace-gz {
  font-size: var(--iztro-star-font-size-big);
  font-weight: bold;
}

.iztro-star-tianma {
  color: var(--iztro-color-active);
}
.iztro-star-lucun {
  color: var(--iztro-color-awesome);
}

.iztro-palace-horo-star .iztro-star {
  opacity: 0.75;
}
.iztro-palace-horo-star .iztro-star-tianma,
.iztro-palace-horo-star .iztro-star-lucun {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-star-brightness,
.iztro-star-adjective {
  font-style: normal;
  font-weight: normal;
  color: var(--iztro-color-text);
}

.iztro-star-brightness {
  opacity: 0.5;
}

.iztro-star-major,
.iztro-star-soft,
.iztro-palace-name {
  color: var(--iztro-color-major);
}
.iztro-star-tough {
  color: var(--iztro-color-tough);
}
.iztro-star-flower {
  color: var(--iztro-color-happy);
}
.iztro-star-helper,
.iztro-palace-gz {
  color: var(--iztro-color-nice);
}

.iztro-star-mutagen.mutagen-0 {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-mutagen.mutagen-1 {
  background-color: var(--iztro-color-quan);
}
.iztro-star-mutagen.mutagen-2 {
  background-color: var(--iztro-color-nice);
}
.iztro-star-mutagen.mutagen-3 {
  background-color: var(--iztro-color-focus);
}

.iztro-star-mutagen.mutagen-decadal {
  background-color: var(--iztro-color-decadal);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-yearly {
  background-color: var(--iztro-color-yearly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-monthly {
  background-color: var(--iztro-color-monthly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-daily {
  background-color: var(--iztro-color-daily);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-hourly {
  background-color: var(--iztro-color-hourly);
  opacity: 0.6;
}

.iztro-palace-gz .iztro-palace-gz-active {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-0 {
  background-color: var(--iztro-color-awesome);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-1 {
  background-color: var(--iztro-color-quan);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-2 {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-3 {
  background-color: var(--iztro-color-focus);
  color: #fff;
  font-weight: normal;
}

.iztro-star-self-mutagen-0::before {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-self-mutagen-1::before {
  background-color: var(--iztro-color-quan);
}
.iztro-star-self-mutagen-2::before {
  background-color: var(--iztro-color-nice);
}
.iztro-star-self-mutagen-3::before {
  background-color: var(--iztro-color-focus);
}

.iztro-star-hover-mutagen-0::after {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-hover-mutagen-1::after {
  background-color: var(--iztro-color-quan);
}
.iztro-star-hover-mutagen-2::after {
  background-color: var(--iztro-color-nice);
}
.iztro-star-hover-mutagen-3::after {
  background-color: var(--iztro-color-focus);
}

.iztro-palace-name-body {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  position: absolute;
  margin-top: 2px;
}

.iztro-palace-fate span {
  display: block;
  padding: 0 3px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--iztro-color-major);
  cursor: pointer;
}

.iztro-palace-center-item {
  font-size: var(--iztro-star-font-size-small);
  line-height: 22px;
}

.iztro-palace-center-item label {
  color: var(--iztro-color-text);
}

.iztro-palace-center-item span {
  color: var(--iztro-color-decorator-1);
}

.gender {
  display: inline-block;
  margin-right: 5px;
}
.gender.gender-male {
  color: var(--iztro-color-quan);
}
.gender.gender-female {
  color: var(--iztro-color-happy);
}

/* 历史记录模态窗样式 */

.history-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  padding: var(--spacing-md);
}

.history-modal {
  background-color: var(--background-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.3s ease-out;
  border: 1px solid var(--border-color);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-modal-header {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
  background-color: var(--background-color);
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.history-title {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--text-color);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  text-align: left;
}

.history-password-container {
  display: flex;
  padding: var(--spacing-md) var(--spacing-lg);
  gap: var(--spacing-md);
  background-color: var(--background-color);
  flex-direction: column;
  align-items: stretch;
}

.history-password-input {
  flex: 1;
  padding: var(--spacing-md);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-md);
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: var(--font-size-md);
  box-sizing: border-box;
  transition: border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
}

.history-password-input:focus {
  outline: none;
  border-color: var(--iztro-color-active);
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.2);
}

.history-password-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.history-password-button {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--iztro-color-active);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  font-weight: 500;
  transition: background-color var(--transition-normal) ease, transform var(--transition-fast) ease;
  white-space: nowrap;
  min-width: 80px;
  box-shadow: var(--box-shadow-sm);
}

.history-password-button:hover:not(:disabled) {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--box-shadow-md);
}

.history-password-button:active:not(:disabled) {
  transform: translateY(0);
}

.history-password-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--gray-400);
  box-shadow: none;
}

.history-search-container {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--background-color);
  width: 100%;
  box-sizing: border-box;
}

.history-search-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-md);
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: var(--font-size-md);
  transition: border-color var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
  box-sizing: border-box;
}

.history-search-input:focus {
  outline: none;
  border-color: var(--iztro-color-active);
  box-shadow: 0 0 0 2px rgba(123, 85, 239, 0.2);
}

.history-search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.history-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  background-color: var(--background-color);
}

.history-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-2xl);
  font-style: italic;
  font-size: var(--font-size-md);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.history-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: all var(--transition-normal) ease;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow-sm);
}

.history-item:hover {
  box-shadow: var(--box-shadow-md);
  border-color: var(--iztro-color-active);
  transform: translateY(-1px);
}

.history-item-content {
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: background-color var(--transition-normal) ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
}

.history-item-content:hover {
  background-color: var(--gray-100);
}

.history-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.history-item-name {
  font-weight: 700;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xl);
  line-height: 1.3;
  flex-shrink: 0;
}

.history-item-info {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

.history-item-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: var(--spacing-md);
  flex-shrink: 0;
  align-items: center;
}

.history-action-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm, 8px);
  border-radius: 50%;
  transition: all var(--transition-normal, 0.2s) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-secondary, #6c757d);
  margin: 0;
}

.history-action-button:hover {
  background-color: var(--gray-200, #f1f3f5);
  transform: scale(1.05);
}

.history-delete-icon:hover {
  color: var(--danger-color, #e03131);
}

.history-edit-icon:hover {
  color: var(--primary-color, #7B55EF);
}

.history-modal-footer {
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.history-clear-button {
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--iztro-color-awesome);
  color: white;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  font-size: var(--font-size-md);
  transition: all var(--transition-normal) ease;
  margin: 0 auto;
  display: block;
  font-weight: 500;
  box-shadow: var(--box-shadow-sm);
}

.history-clear-button:hover:not(:disabled) {
  background-color: #e8590c;
  transform: translateY(-1px);
  box-shadow: var(--box-shadow-md);
}

.history-clear-button:active:not(:disabled) {
  transform: translateY(0);
}

.history-clear-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--gray-400);
  box-shadow: none;
}

/* 暗色模式样式 */
@media (prefers-color-scheme: dark) {
  .history-modal {
    background-color: var(--background-color);
    border-color: var(--border-color);
  }
  
  .history-modal-header,
  .history-modal-footer {
    background-color: var(--background-color);
    border-color: var(--border-color);
  }
  
  .history-password-input,
  .history-search-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
  }
  
  .history-item-content:hover {
    background-color: var(--gray-700);
  }

  .history-action-button:hover {
    background-color: var(--gray-700, #333);
  }
  
  .history-item {
    background-color: var(--background-color);
    border-color: var(--border-color);
    box-shadow: none;
  }
  
  .history-item-name {
    color: var(--text-color);
  }
  
  .history-item-info {
    color: var(--text-secondary);
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .history-modal-overlay {
    padding: var(--spacing-sm);
  }
  
  .history-modal {
    width: 95%;
    max-height: 90vh;
    margin: 0;
    border-radius: var(--border-radius-lg);
  }
  
  .history-modal-header {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  }
  
  .history-search-container {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .history-password-container {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
    flex-direction: column;
    align-items: stretch;
  }
  
  .history-modal-content {
    padding: var(--spacing-md);
  }
  
  .history-modal-footer {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  }
  
  .history-password-input {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-md);
  }
  
  .history-password-button {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-md);
    width: 100%;
  }
  
  .history-password-button:hover:not(:disabled) {
    background-color: var(--primary-hover);
  }
  
  .history-item-content {
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 52px;
  }
  
  .history-item-main {
    gap: var(--spacing-sm);
  }
  
  .history-item-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
  }
  
  .history-item-info {
    font-size: var(--font-size-sm);
    opacity: 0.7;
  }
  
  .history-item-actions {
    gap: var(--spacing-xs);
    align-items: center;
  }
  
  .history-item-content .history-item-actions .history-edit-icon,
  .history-item-content .history-item-actions .history-delete-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    padding: var(--spacing-sm) !important;
    box-shadow: none !important;
  }
  
  .history-title {
    font-size: var(--font-size-lg);
  }
  
  .history-search-input {
    padding: var(--spacing-md);
  }
  
  .history-clear-button {
    padding: var(--spacing-md) var(--spacing-xl);
    width: 100%;
  }
}

/* 主样式文件 - 导入所有样式模块 */

/* 基础样式 */

/* 布局和组件样式 */

/* 聊天相关样式 */

/* 组件样式 */

/* 主题样式 */

/* 去除移动端所有点击后的默认蓝色高光 */
/* 移动端去除所有点击高光的统一规则 */
@media (max-width: 768px) {
  /* 统一去除所有可点击元素的点击高光 */
  *,
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="image"],
  .button,
  .btn,
  .clickable,
  [role="button"],
  [onclick],
  [onmousedown],
  [onmouseup],
  [ontouchstart],
  [ontouchend],
  [data-clickable],
  a,
  a *,
  [href],
  [tabindex],
  [contenteditable="true"],
  select,
  textarea,
  .interactive,
  .clickable-element {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* 统一去除所有需要禁用文本选择元素的文本选择 */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="image"],
  .button,
  .btn,
  .clickable,
  [role="button"],
  [onclick],
  [data-clickable],
  [tabindex],
  [contenteditable="true"],
  select,
  textarea,
  .interactive,
  .clickable-element {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/*# sourceMappingURL=main.f74c3135ad94bb749088.css.map*/