/**
 * 现代化UI样式 - 完整版本
 * 完全本地化，适合中国大陆使用
 * 版本: 1.0.0
 */

/* ============================================
   CSS变量定义（完整设计系统）
   ============================================ */
:root {
  /* 主色调 - 紫色系（神秘、专业） */
  --color-primary-50: #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-200: #ddd6fe;
  --color-primary-300: #c4b5fd;
  --color-primary-400: #a78bfa;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --color-primary-800: #5b21b6;
  --color-primary-900: #4c1d95;
  
  /* 金色系 - 传统、尊贵（保留主题） */
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  
  /* 中性色 */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* 功能色 */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-warm: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  
  /* 间距系统 */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* 圆角系统 */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* 完全圆形 */
  
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* 过渡时间 */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  
  /* 字体系统（系统字体，完全本地化） */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", 
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", 
               Helvetica, Arial, sans-serif;
}

/* ============================================
   基础重置和优化
   ============================================ */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--color-gray-900);
  background: var(--color-gray-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   现代化按钮样式（新样式类）
   ============================================ */

/* 基础按钮类 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base) ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-height: 44px; /* 触摸友好 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.btn:active {
  transform: scale(0.98);
}

/* 主要按钮 - 紫色渐变 */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* 次要按钮 - 白色背景 + 紫色边框 */
.btn-secondary {
  background: white;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-200);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* 金色强调按钮 */
.btn-accent {
  background: var(--gradient-gold);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-accent:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* 按钮尺寸变体 */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  min-height: 52px;
}

/* 按钮禁用状态 */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================
   增强现有按钮样式（.btn-main, .btn-action等）
   ============================================ */

/* 增强主按钮 .btn-main */
.btn-main {
  /* 保留原有渐变，但增强效果 */
  background: linear-gradient(135deg, #fbd72b 0%, #f9484a 100%) !important;
  color: #fff !important;
  border-radius: var(--radius-2xl) !important;
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  padding: 13px 0 !important;
  width: 100% !important;
  margin: 8px 0 !important;
  box-shadow: 0 4px 20px rgba(238, 212, 83, 0.4), 0 2px 8px rgba(255, 255, 255, 0.3) !important;
  transition: all var(--transition-slow) ease !important;
  letter-spacing: 2px !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

.btn-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-main:hover::before {
  left: 100%;
}

.btn-main:hover,
.btn-main:focus {
  background: linear-gradient(135deg, #f9b421 0%, #fd5b60 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(238, 212, 83, 0.5), 0 4px 16px rgba(255, 255, 255, 0.4) !important;
}

.btn-main:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* 增强操作按钮 .btn-action */
.btn-action {
  background: linear-gradient(135deg, #47c2f5 0%, #54e49e 100%) !important;
  color: #fff !important;
  border-radius: var(--radius-xl) !important;
  font-size: 1.04rem !important;
  font-weight: 600 !important;
  padding: 10px 0 !important;
  width: 100% !important;
  margin: 8px 0 4px !important;
  box-shadow: 0 4px 16px rgba(97, 230, 227, 0.4), 0 2px 8px rgba(255, 255, 255, 0.3) !important;
  transition: all var(--transition-slow) ease !important;
  letter-spacing: 1.3px !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

.btn-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-action:hover::before {
  left: 100%;
}

.btn-action:hover,
.btn-action:focus {
  background: linear-gradient(135deg, #3eafd3 0%, #32c67c 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 24px rgba(97, 230, 227, 0.5), 0 3px 12px rgba(255, 255, 255, 0.4) !important;
}

.btn-action:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 增强每日运势按钮 #drawFortuneBtn */
#drawFortuneBtn {
  background: linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%) !important;
  box-shadow: 0 4px 16px rgba(255, 154, 86, 0.4), 0 2px 8px rgba(255, 255, 255, 0.3) !important;
  border: 1px solid #ff8a50 !important;
  color: #fff !important;
  transition: all var(--transition-slow) ease !important;
  position: relative;
  overflow: hidden;
}

#drawFortuneBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

#drawFortuneBtn:hover::before {
  left: 100%;
}

#drawFortuneBtn:hover,
#drawFortuneBtn:focus {
  background: linear-gradient(135deg, #ff8a50 0%, #ff5722 100%) !important;
  box-shadow: 0 6px 24px rgba(255, 154, 86, 0.5), 0 3px 12px rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-3px) scale(1.02) !important;
  color: #fff !important;
}

#drawFortuneBtn:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* 增强指引按钮 #masterGuideBtn */
#masterGuideBtn {
  transition: all var(--transition-slow) ease !important;
  position: relative;
  overflow: hidden;
}

#masterGuideBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

#masterGuideBtn:hover::before {
  left: 100%;
}

#masterGuideBtn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5) !important;
}

#masterGuideBtn:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* 增强灵魂伴侣按钮 #soulmate-top-button */
#soulmate-top-button {
  transition: all var(--transition-slow) ease !important;
  position: relative;
  overflow: hidden;
}

#soulmate-top-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

#soulmate-top-button:hover::before {
  left: 100%;
}

#soulmate-top-button:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5) !important;
}

#soulmate-top-button:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ============================================
   工具类
   ============================================ */

/* 悬停上浮效果 */
.hover-lift {
  transition: transform var(--transition-base) ease, box-shadow var(--transition-base) ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 点击缩放效果 */
.active-scale:active {
  transform: scale(0.98);
}

/* 渐变文字效果 */
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 光晕效果 */
.shadow-glow {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* ============================================
   响应式优化
   ============================================ */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    min-height: 48px; /* 移动端更大的触摸目标 */
  }
  
  .btn-main,
  .btn-action {
    font-size: 1.1rem !important;
    padding: 14px 0 !important;
  }
}

/* ============================================
   现代化卡片样式
   ============================================ */

/* 基础卡片类 */
.card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
  transition: all var(--transition-base) ease;
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

/* 卡片变体 */
.card-gradient {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.card-gradient .card-header,
.card-gradient .card-footer {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 增强现有卡片 .card-surface */
.card-surface {
  transition: all var(--transition-slow) ease !important;
}

.card-surface:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 20px 40px rgba(229, 184, 87, 0.3), 0 4px 16px rgba(255, 255, 255, 0.4) !important;
}

/* ============================================
   现代化输入框样式
   ============================================ */

/* 基础输入框类 */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-gray-900);
  background: white;
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base) ease;
  font-family: var(--font-sans);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.input::placeholder {
  color: var(--color-gray-400);
}

.input:disabled {
  background: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

/* 输入框组 */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.input-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-xs);
}

.input-error {
  border-color: var(--color-error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* 增强现有输入框 */
select,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  transition: all var(--transition-base) ease !important;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* 增强上传区域 */
#uploadArea {
  transition: all var(--transition-base) ease !important;
}

#uploadArea:hover {
  border-color: var(--color-primary-400) !important;
  background: rgba(139, 92, 246, 0.05) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   现代化模态框样式
   ============================================ */

/* 基础模态框类 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-md);
  animation: fadeIn var(--transition-base) ease;
}

.modal-content {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp var(--transition-slow) ease;
  position: relative;
}

.modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: var(--spacing-xs);
  line-height: 1;
  transition: color var(--transition-fast) ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.modal-close:hover {
  color: var(--color-gray-600);
  background: var(--color-gray-100);
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

/* 增强现有模态框 */
#solarCalendarModal,
#lunarCalendarModal,
#customCalendarModal,
#feedbackModal,
#dataExportModal {
  backdrop-filter: blur(4px) !important;
  animation: fadeIn var(--transition-base) ease !important;
}

#solarCalendarModal .bg-white,
#lunarCalendarModal .bg-white,
#customCalendarModal .bg-gradient-to-br,
#feedbackModal > div,
#dataExportModal > div {
  animation: slideUp var(--transition-slow) ease !important;
  border-radius: var(--radius-2xl) !important;
  box-shadow: var(--shadow-2xl) !important;
}

/* ============================================
   现代化加载动画
   ============================================ */

/* 点状加载动画 */
.loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.loader-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-500);
  animation: bounce 1.4s infinite ease-in-out both;
}

.loader-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loader-dot:nth-child(2) {
  animation-delay: -0.16s;
}

/* 旋转加载动画 */
.loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* 加载状态 */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-gray-200);
  border-top: 2px solid var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ============================================
   现代化通知/提示样式
   ============================================ */

/* 基础通知类 */
.toast {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  z-index: 2000;
  min-width: 300px;
  max-width: 400px;
  animation: slideInRight var(--transition-base) ease;
}

.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast-error {
  border-left: 4px solid var(--color-error);
}

.toast-warning {
  border-left: 4px solid var(--color-warning);
}

.toast-info {
  border-left: 4px solid var(--color-info);
}

/* 增强现有通知 */
.notification {
  animation: slideInRight var(--transition-base) ease !important;
  box-shadow: var(--shadow-xl) !important;
  border-radius: var(--radius-lg) !important;
}

/* ============================================
   微交互效果
   ============================================ */

/* 页面元素淡入动画 */
.fade-in-up {
  animation: fadeInUp var(--transition-slow) ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入动画 */
.fade-in {
  animation: fadeIn var(--transition-base) ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 滑入动画 */
.slide-in-up {
  animation: slideInUp var(--transition-slow) ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInRight var(--transition-base) ease;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 旋转动画 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 跳动动画 */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ============================================
   增强现有快速按钮
   ============================================ */

.btn-quick {
  transition: all var(--transition-base) ease !important;
  position: relative;
  overflow: hidden;
}

.btn-quick::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-quick:hover::before {
  left: 100%;
}

.btn-quick:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-quick:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ============================================
   聊天框和消息气泡优化
   ============================================ */

/* 增强聊天框容器 */
#chatBox {
  transition: all var(--transition-base) ease !important;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-300) var(--color-gray-100);
}

#chatBox::-webkit-scrollbar {
  width: 8px;
}

#chatBox::-webkit-scrollbar-track {
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
}

#chatBox::-webkit-scrollbar-thumb {
  background: var(--color-primary-300);
  border-radius: var(--radius-full);
}

#chatBox::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-400);
}

/* 增强用户消息气泡 */
#chatBox .bubble-user,
.bubble-user {
  transition: all var(--transition-base) ease !important;
  position: relative;
}

#chatBox .bubble-user:hover,
.bubble-user:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 12px 28px rgba(77, 132, 232, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* 增强AI消息气泡 */
#chatBox .bubble-ai,
#chatBox .bubble-assistant,
.bubble-assistant {
  transition: all var(--transition-base) ease !important;
  position: relative;
}

#chatBox .bubble-ai:hover,
#chatBox .bubble-assistant:hover,
.bubble-assistant:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 12px 28px rgba(232, 201, 126, 0.25), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 增强结果区域 */
#resultBlock {
  animation: fadeInUp var(--transition-slow) ease-out !important;
}

/* 增强追问输入框 */
#followupInput {
  transition: all var(--transition-base) ease !important;
}

#followupInput:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* 增强追问发送按钮 */
#followupSendBtn {
  transition: all var(--transition-base) ease !important;
  position: relative;
  overflow: hidden;
}

#followupSendBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

#followupSendBtn:hover::before {
  left: 100%;
}

#followupSendBtn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(97, 230, 227, 0.4) !important;
}

#followupSendBtn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 增强快速购买按钮 */
#quickBuyBtn {
  transition: all var(--transition-base) ease !important;
  position: relative;
  overflow: hidden;
}

#quickBuyBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

#quickBuyBtn:hover::before {
  left: 100%;
}

#quickBuyBtn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
}

#quickBuyBtn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 增强选择框 */
select {
  transition: all var(--transition-base) ease !important;
  cursor: pointer;
}

select:hover {
  border-color: var(--color-primary-400) !important;
}

select:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

/* 增强单选按钮和复选框 */
input[type="radio"],
input[type="checkbox"] {
  transition: all var(--transition-base) ease !important;
  cursor: pointer;
}

input[type="radio"]:hover,
input[type="checkbox"]:hover {
  transform: scale(1.1);
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* 增强标签 */
label {
  transition: color var(--transition-base) ease !important;
}

label:hover {
  color: var(--color-primary-600) !important;
}

/* 增强横幅和徽章 */
#countBanner {
  transition: all var(--transition-base) ease !important;
  animation: pulse 2s ease-in-out infinite !important;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* 增强个性化欢迎区域 */
#personalizedWelcome {
  animation: fadeInUp var(--transition-slow) ease-out !important;
  transition: all var(--transition-base) ease !important;
}

#personalizedWelcome:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(139, 94, 0, 0.15) !important;
}

/* 增强工具提示 */
.guide-tooltip {
  transition: all var(--transition-base) ease !important;
  animation: fadeInUp var(--transition-slow) ease-out !important;
}

.guide-tooltip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* 增强弹窗遮罩 */
#popupMask {
  backdrop-filter: blur(4px) !important;
  animation: fadeIn var(--transition-base) ease !important;
}

/* 增强弹窗内容 */
#popupBox {
  animation: slideUp var(--transition-slow) ease !important;
  box-shadow: var(--shadow-2xl) !important;
  border-radius: var(--radius-2xl) !important;
}

.popup-close,
#popupClose {
  transition: all var(--transition-base) ease !important;
  border-radius: var(--radius-md) !important;
}

.popup-close:hover,
#popupClose:hover {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-700) !important;
  transform: scale(1.1) !important;
}

/* 增强头像 */
.avatar {
  transition: all var(--transition-base) ease !important;
}

.avatar:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 12px rgba(229, 184, 87, 0.4) !important;
}

/* 增强角色标签 */
.role-tag {
  transition: all var(--transition-base) ease !important;
}

.role-tag:hover {
  transform: translateY(-1px) scale(1.05) !important;
}

/* 增强图片预览 */
img {
  transition: transform var(--transition-base) ease !important;
}

img:hover {
  transform: scale(1.02);
}

/* 增强链接 */
a {
  transition: color var(--transition-base) ease !important;
}

a:hover {
  color: var(--color-primary-600) !important;
}

/* ============================================
   响应式优化
   ============================================ */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    min-height: 48px; /* 移动端更大的触摸目标 */
  }
  
  .btn-main,
  .btn-action {
    font-size: 1.1rem !important;
    padding: 14px 0 !important;
  }
  
  .card {
    border-radius: var(--radius-lg);
  }
  
  .modal-content {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: auto;
  }
  
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  
  .toast {
    right: var(--spacing-md);
    left: var(--spacing-md);
    max-width: none;
  }
  
  .input {
    font-size: 16px; /* 防止iOS自动缩放 */
  }
}

/* ============================================
   打印样式
   ============================================ */
@media print {
  .btn,
  .modal-overlay,
  .toast {
    display: none;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid var(--color-gray-300);
  }
}