/* ========== 校园恋爱游戏 - 聊天框美化 ========== */

/* 隐藏顶部颜色装饰条 */
[class*="bg-\\[#F1CBCB\\]"], 
[class*="bg-\\[#c9e1e9\\]"] {
    display: none !important;
}

/* 统一聊天框基础样式 */
.bg-gray-100\\/90.relative.inline-block {
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 18px 22px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: visible !important;
}

.bg-gray-100\\/90.relative.inline-block:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.2) !important;
}

/* 输入聊天框（用户消息）- 清新蓝色系 */
.bg-gray-100\\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\\/90) {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce7ff 100%) !important;
    border-color: #99d6ff !important;
}

.bg-gray-100\\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\\/90):hover {
    border-color: #66c2ff !important;
}

/* 输出聊天框（AI消息）- 温柔粉色系 */
.chat-answer-container .bg-gray-100\\/90.relative.inline-block {
    background: linear-gradient(135deg, #fff5f9 0%, #ffe6f0 100%) !important;
    border-color: #ffb3d9 !important;
}

.chat-answer-container .bg-gray-100\\/90.relative.inline-block:hover {
    border-color: #ff99cc !important;
}

/* 聊天框内文本样式 */
.markdown-body {
    color: #2d3436 !important;
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}

.markdown-body strong {
    color: #ff69b4 !important;
    font-weight: 600 !important;
}

.markdown-body a {
    color: #667eea !important;
    text-decoration: none !important;
    border-bottom: 2px solid #667eea !important;
    transition: all 0.2s ease !important;
}

.markdown-body a:hover {
    color: #764ba2 !important;
    border-bottom-color: #764ba2 !important;
}

.markdown-body code {
    background: rgba(255, 182, 193, 0.15) !important;
    color: #e74c3c !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Consolas', 'Monaco', monospace !important;
}

.markdown-body pre {
    background: rgba(102, 126, 234, 0.08) !important;
    border-left: 4px solid #667eea !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

/* 底部操作按钮美化 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #ff69b4 !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    padding: 6px 14px !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: rgba(255, 105, 180, 0.1) !important;
    transform: scale(1.05) !important;
}

/* 模型名称文本美化 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #667eea !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
    border-radius: 12px !important;
    display: inline-block !important;
}

/* Token消耗文本美化 */
.text-orange-500 {
    color: #ff6b9d !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    background: rgba(255, 107, 157, 0.1) !important;
    border-radius: 10px !important;
    display: inline-block !important;
}

/* 隐藏原始加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 自定义加载动画 - 跳动的心形 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    height: 40px !important;
    width: auto !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 30px !important;
    height: 30px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff69b4'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    animation: heartbeat 1.2s ease-in-out infinite !important;
}

.flex.items-center.justify-center.w-6.h-5::after {
    content: '正在思考中...' !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(100% + 5px) !important;
    transform: translateX(-50%) !important;
    font-size: 12px !important;
    color: #ff69b4 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    animation: fadeInOut 1.5s ease-in-out infinite !important;
}

@keyframes heartbeat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.7;
    }
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* 添加装饰性元素 - 聊天框左上角小标签 */
.bg-gray-100\\/90.relative.inline-block::before {
    content: '💬' !important;
    position: absolute !important;
    top: -8px !important;
    left: 15px !important;
    font-size: 16px !important;
    background: white !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.chat-answer-container .bg-gray-100\\/90.relative.inline-block::before {
    content: '💕' !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .bg-gray-100\\/90.relative.inline-block {
        border-radius: 15px !important;
        padding: 14px 18px !important;
    }
    
    .markdown-body {
        font-size: 14px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::before {
        width: 24px !important;
        height: 24px !important;
    }
    
    .flex.items-center.justify-center.w-6.h-5::after {
        font-size: 11px !important;
    }
}
/* ========== 校园恋爱游戏状态栏美化样式 ========== */
/* 明亮粉色主题，电脑端适配优化 */

/* ===== 全局变量定义 ===== */
:root {
  /* 明亮粉色主题配色 */
  --primary-pink: #ff69b4;
  --light-pink: #ffb6c1;
  --soft-pink: #ffe4e9;
  --primary-blue: #6a89cc;
  --accent-orange: #ff8e53;
  --accent-green: #4cd964;
  --accent-red: #ff4757;
  --accent-purple: #a55eea;
  
  /* 背景色 - 明亮的粉色系 */
  --bg-main: #fff5f9;
  --bg-card: #ffffff;
  --bg-hover: rgba(255, 182, 193, 0.2);
  --bg-highlight: rgba(255, 182, 193, 0.1);
  
  /* 文字色 - 高对比度确保可读性 */
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --text-light: #ffffff;
  --text-dark: #2c3e50;
  --text-pink: #ff1493;
  
  /* 边框阴影 */
  --border-color: rgba(255, 105, 180, 0.25);
  --border-hover: rgba(255, 105, 180, 0.5);
  --shadow-light: 0 4px 15px rgba(255, 105, 180, 0.1);
  --shadow-medium: 0 6px 20px rgba(255, 105, 180, 0.15);
  --shadow-strong: 0 8px 30px rgba(255, 105, 180, 0.2);
  
  /* 间距 */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  
  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 50px;
  
  /* 字体 */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
}

/* ===== 暗色模式适配 ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-main: #1a1a2e;
    --bg-card: #252542;
    --bg-hover: rgba(255, 182, 193, 0.15);
    --bg-highlight: rgba(255, 182, 193, 0.08);
    
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-dark: #ffffff;
    
    --border-color: rgba(255, 105, 180, 0.3);
    --border-hover: rgba(255, 105, 180, 0.6);
    --shadow-light: 0 4px 15px rgba(255, 105, 180, 0.1);
    --shadow-medium: 0 6px 20px rgba(255, 105, 180, 0.2);
    --shadow-strong: 0 8px 30px rgba(255, 105, 180, 0.3);
  }
}

/* ===== 全局基础样式 ===== */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

/* ===== 响应式设计变量 ===== */
:root {
  /* 基础间距变量 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  
  /* 圆角变量 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-full: 9999px;
  
  /* 字体大小变量 */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  
  /* 颜色变量 (可根据实际主题调整) */
  --primary-pink: #ff69b4;
  --accent-purple: #9d4edd;
  --accent-orange: #ff6b35;
  --accent-green: #4cd964;
  --accent-red: #ff4757;
  --primary-blue: #667eea;
  
  --bg-card: #ffffff;
  --bg-highlight: #f9f9f9;
  --bg-hover: #f0f0f0;
  
  --text-light: #ffffff;
  --text-dark: #333333;
  --text-primary: #444444;
  --text-secondary: #666666;
  
  --border-color: #e0e0e0;
  --border-hover: #d0d0d0;
  
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ===== 状态栏基础样式 ===== */
details {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  padding: 0;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-light);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 支持 */
}

/* 平板端适配 (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  details {
    margin: var(--space-lg) var(--space-md);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
  }
}

/* 电脑端优化 (≥1024px) */
@media (min-width: 1024px) {
  details {
    margin: var(--space-lg) auto;
    max-width: 90%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-medium);
  }
}

/* 超大屏幕优化 (≥1440px) */
@media (min-width: 1440px) {
  details {
    max-width: 1200px;
    margin: var(--space-xl) auto;
  }
}

details:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
  border-color: var(--border-hover);
}

details[open] {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 230, 240, 0.5) 100%);
  border-color: var(--primary-pink);
  box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.1), var(--shadow-strong);
}

/* ===== 折叠面板标题样式 ===== */
summary {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-light);
  cursor: pointer;
  padding: var(--space-md);
  background: linear-gradient(135deg, 
    var(--primary-pink) 0%, 
    #ff85c0 30%, 
    var(--accent-purple) 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.3px;
  min-height: 48px; /* 确保触摸友好 */
}

/* 平板端标题优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  summary {
    font-size: var(--font-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* 电脑端标题优化 (≥1024px) */
@media (min-width: 1024px) {
  summary {
    font-size: var(--font-xl);
    padding: var(--space-lg) var(--space-xl);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* 超大屏幕标题优化 (≥1440px) */
@media (min-width: 1440px) {
  summary {
    font-size: var(--font-2xl);
    padding: var(--space-xl) calc(var(--space-xl) + 10px);
  }
}

/* 标题光晕效果 - 仅电脑端显示 */
@media (min-width: 1024px) {
  summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.3), 
      transparent);
    animation: shine 3s infinite linear;
  }
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 移除默认箭头 */
summary::-webkit-details-marker {
  display: none;
}

/* 自定义展开箭头 */
summary::after {
  content: '▼';
  font-size: 14px;
  transition: transform 0.3s ease;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

/* 平板端箭头优化 */
@media (min-width: 768px) {
  summary::after {
    font-size: 16px;
  }
}

details[open] summary::after {
  transform: rotate(180deg);
}

summary:hover {
  background: linear-gradient(135deg, 
    var(--accent-purple) 0%, 
    #ff85c0 50%, 
    var(--primary-pink) 100%);
  transform: scale(1.01);
}

/* 手机端悬停效果简化 */
@media (max-width: 767px) {
  summary:hover {
    transform: none;
  }
}

/* ===== 不同模块的标题图标 ===== */
details:nth-child(1) summary::before { content: '🕐 '; margin-right: 8px; }
details:nth-child(2) summary::before { content: '👤 '; margin-right: 8px; }
details:nth-child(3) summary::before { content: '👥 '; margin-right: 8px; }
details:nth-child(4) summary::before { content: '📅 '; margin-right: 8px; }
details:nth-child(5) summary::before { content: '📱 '; margin-right: 8px; }
details:nth-child(6) summary::before { content: '✨ '; margin-right: 8px; }
details:nth-child(7) summary::before { content: '💡 '; margin-right: 8px; }

/* ===== 内容区域样式 ===== */
details > *:not(summary) {
  padding: var(--space-md);
  color: var(--text-primary);
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-sm);
  animation: fadeInUp 0.5s ease;
}

/* 平板端内容优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  details > *:not(summary) {
    padding: var(--space-lg);
    font-size: var(--font-md);
    line-height: 1.7;
  }
}

/* 电脑端内容优化 (≥1024px) */
@media (min-width: 1024px) {
  details > *:not(summary) {
    padding: var(--space-xl);
    font-size: var(--font-md);
    line-height: 1.8;
  }
}

/* 超大屏幕内容优化 (≥1440px) */
@media (min-width: 1440px) {
  details > *:not(summary) {
    padding: var(--space-xl) calc(var(--space-xl) + 10px);
    font-size: var(--font-lg);
    line-height: 1.9;
  }
}

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

/* ===== 文本样式 ===== */
details strong, details b {
  color: var(--primary-pink);
  font-weight: 700;
  background: linear-gradient(transparent 70%, rgba(255, 105, 180, 0.2) 70%);
  padding: 0 2px;
}

details em {
  color: var(--accent-orange);
  font-style: italic;
  font-weight: 600;
}

/* ===== 列表样式 ===== */
details ul, details ol {
  padding-left: var(--space-lg);
  margin: var(--space-md) 0;
}

details li {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-highlight);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary-pink);
  transition: all 0.3s ease;
  position: relative;
  list-style-position: outside;
}

/* 平板端列表优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  details ul, details ol {
    padding-left: var(--space-xl);
  }
  
  details li {
    padding: var(--space-md);
    margin: var(--space-md) 0;
    border-left-width: 4px;
  }
}

/* 电脑端列表优化 (≥1024px) */
@media (min-width: 1024px) {
  details ul, details ol {
    padding-left: calc(var(--space-xl) + 10px);
  }
  
  details li {
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-md) 0;
    border-left-width: 5px;
  }
  
  details li::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--primary-pink);
    border-radius: 50%;
  }
}

details li:hover {
  background: var(--bg-hover);
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(255, 105, 180, 0.15);
}

/* 手机端悬停效果简化 */
@media (max-width: 767px) {
  details li:hover {
    transform: none;
  }
}

/* ===== 分隔线美化 ===== */
details hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    var(--primary-pink), 
    var(--accent-purple), 
    transparent);
  margin: var(--space-lg) 0;
  border-radius: var(--radius-full);
  opacity: 0.6;
}

/* 平板端和电脑端分隔线 */
@media (min-width: 768px) {
  details hr {
    height: 2px;
    margin: var(--space-xl) 0;
  }
}

/* ===== Markdown表格美化 ===== */
details table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: var(--font-xs);
}

/* 平板端表格优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  details table {
    font-size: var(--font-sm);
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
  }
}

/* 电脑端表格优化 (≥1024px) */
@media (min-width: 1024px) {
  details table {
    font-size: var(--font-md);
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
  }
}

/* 手机端表格响应式设计 (≤767px) */
@media (max-width: 767px) {
  details table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: var(--font-xs);
    margin: var(--space-md) 0;
  }
  
  details table th,
  details table td {
    min-width: 100px;
    padding: var(--space-sm);
  }
}

/* 表格头部 */
details table th {
  background: linear-gradient(135deg, 
    var(--primary-pink) 0%, 
    var(--accent-purple) 100%);
  color: var(--text-light);
  padding: var(--space-md);
  font-weight: 700;
  text-align: left;
  position: sticky;
  top: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  font-size: var(--font-sm);
  letter-spacing: 0.3px;
}

/* 电脑端表头优化 (≥1024px) */
@media (min-width: 1024px) {
  details table th {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-md);
  }
}

/* 表格内容 */
details table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  background: var(--bg-card);
  transition: all 0.2s ease;
}

/* 电脑端表格内容优化 (≥1024px) */
@media (min-width: 1024px) {
  details table td {
    padding: var(--space-md) var(--space-lg);
  }
}

details table tr:last-child td {
  border-bottom: none;
}

/* 斑马条纹 */
details table tbody tr:nth-child(even) {
  background: var(--bg-highlight);
}

details table tr:hover td {
  background: var(--bg-hover);
  color: var(--text-dark);
}

/* ===== 好感度系统 ===== */
/* 进度条样式 */
.favorability-bar {
  display: inline-flex;
  align-items: center;
  width: 150px;
  height: 20px;
  background: linear-gradient(135deg, 
    rgba(255, 182, 193, 0.2) 0%, 
    rgba(255, 182, 193, 0.4) 100%);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 var(--space-sm);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  border: 1px solid var(--border-color);
}

/* 平板端进度条优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  .favorability-bar {
    width: 180px;
    height: 22px;
  }
}

/* 电脑端进度条优化 (≥1024px) */
@media (min-width: 1024px) {
  .favorability-bar {
    width: 220px;
    height: 24px;
  }
}

/* 超大屏幕进度条优化 (≥1440px) */
@media (min-width: 1440px) {
  .favorability-bar {
    width: 240px;
    height: 26px;
  }
}

/* 进度填充 */
.favorability-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    var(--accent-green) 0%, 
    #4cd964 20%, 
    #00cec9 40%, 
    var(--primary-blue) 60%, 
    var(--accent-purple) 80%, 
    var(--primary-pink) 100%);
  border-radius: var(--radius-full);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  min-width: 40px;
  padding: 0 var(--space-sm);
  position: relative;
  overflow: hidden;
}

/* 电脑端进度填充动画 */
@media (min-width: 1024px) {
  .favorability-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.4), 
      transparent);
    animation: shimmer 2s infinite;
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 平板端和电脑端进度条文字 */
@media (min-width: 768px) {
  .favorability-fill {
    font-size: 11px;
  }
}

/* 电脑端进度条文字 (≥1024px) */
@media (min-width: 1024px) {
  .favorability-fill {
    font-size: 12px;
  }
}

/* 星级显示 */
.favorability-stars {
  display: inline-flex;
  align-items: center;
  margin: 0 var(--space-sm);
  gap: 1px;
}

.favorability-stars .star {
  color: #ffd700;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(255, 215, 0, 0.4);
  transition: transform 0.3s ease;
}

/* 平板端和电脑端星级 */
@media (min-width: 768px) {
  .favorability-stars .star {
    font-size: 18px;
  }
  
  .favorability-stars {
    gap: 2px;
  }
}

/* 电脑端星级优化 (≥1024px) */
@media (min-width: 1024px) {
  .favorability-stars .star {
    font-size: 20px;
  }
  
  .favorability-stars .star:hover {
    transform: scale(1.3);
  }
}

.favorability-stars .star.empty {
  color: #e0e0e0;
  text-shadow: none;
}

/* 好感度标签 */
.favorability-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 700;
  margin-left: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.favorability-tag.high {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: var(--primary-pink);
}

.favorability-tag.medium {
  background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
  color: var(--accent-orange);
}

.favorability-tag.low {
  background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
  color: var(--text-secondary);
}

/* 平板端和电脑端标签 */
@media (min-width: 768px) {
  .favorability-tag {
    padding: 4px 12px;
    font-size: var(--font-sm);
  }
}

/* ===== 手机讯息模块 - 未读红点 ===== */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: linear-gradient(135deg, 
    var(--accent-red) 0%, 
    #ff6b81 100%);
  color: var(--text-light);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-left: var(--space-sm);
  animation: pulse 2s infinite;
  vertical-align: middle;
  box-shadow: 0 3px 6px rgba(255, 71, 87, 0.3);
  position: relative;
  z-index: 1;
}

/* 平板端红点优化 */
@media (min-width: 768px) and (max-width: 1023px) {
  .unread-badge {
    min-width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* 电脑端红点优化 (≥1024px) */
@media (min-width: 1024px) {
  .unread-badge {
    min-width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .unread-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, 
      var(--accent-red) 0%, 
      #ff6b81 100%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.6;
    animation: pulse-ring 2s infinite;
  }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 3px 6px rgba(255, 71, 87, 0.3);
  }
  50% { 
    transform: scale(1.1); 
    box-shadow: 0 4px 8px rgba(255, 71, 87, 0.5);
  }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* 手机端简化动画 */
@media (max-width: 767px) {
  .unread-badge {
    animation: pulse 2s infinite;
  }
}

/* 消息条目样式 */
.message-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.9) 0%, 
    rgba(255, 240, 245, 0.9) 100%);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary-blue);
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 平板端和电脑端消息条目 */
@media (min-width: 768px) {
  .message-item {
    padding: var(--space-lg);
    border-left-width: 4px;
  }
}

/* 电脑端消息条目优化 (≥1024px) */
@media (min-width: 1024px) {
  .message-item:hover {
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 1) 0%, 
      rgba(255, 240, 245, 1) 100%);
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    border-left-width: 5px;
  }
}

.message-item.unread {
  background: linear-gradient(135deg, 
    rgba(255, 71, 87, 0.1) 0%, 
    rgba(255, 182, 193, 0.2) 100%);
  border-left-color: var(--accent-red);
}

/* 手机端悬停效果简化 */
@media (max-width: 1023px) {
  .message-item:hover {
    transform: none;
  }
}

/* ===== 特殊模块样式 ===== */
/* 当前情况模块 - 顶部高亮 */
details:nth-child(1) {
  border: 2px solid var(--primary-pink);
  background: linear-gradient(135deg, 
    rgba(255, 105, 180, 0.05) 0%, 
    rgba(255, 255, 255, 0.95) 100%);
}

details:nth-child(1) summary {
  background: linear-gradient(135deg, 
    #ff1493 0%, 
    var(--primary-pink) 50%, 
    #ff85c0 100%);
}

/* NPC信息模块 */
details:nth-child(3) li {
  border-left-color: var(--accent-purple);
  background: linear-gradient(135deg, 
    rgba(157, 78, 221, 0.05) 0%, 
    rgba(255, 240, 245, 0.9) 100%);
}

details:nth-child(3) li:hover {
  background: linear-gradient(135deg, 
    rgba(157, 78, 221, 0.1) 0%, 
    rgba(255, 240, 245, 1) 100%);
}

/* 记忆区模块 */
details:nth-child(6) {
  background: linear-gradient(135deg, 
    rgba(157, 78, 221, 0.05) 0%, 
    rgba(255, 240, 245, 0.9) 100%);
  border: 2px solid var(--accent-purple);
}

details:nth-child(6) summary {
  background: linear-gradient(135deg, 
    var(--accent-purple) 0%, 
    #b24bf3 30%, 
    #d68cf8 100%);
}

/* 行动推荐模块 */
details:nth-child(7) ol {
  list-style: none;
  padding-left: 0;
  counter-reset: action-counter;
}

details:nth-child(7) li {
  background: linear-gradient(135deg, 
    rgba(255, 107, 53, 0.1) 0%, 
    rgba(255, 240, 245, 0.9) 100%);
  border-left: 4px solid var(--accent-orange);
  margin: var(--space-md) 0;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  counter-increment: action-counter;
}

/* 行动推荐编号 */
details:nth-child(7) li::before {
  content: counter(action-counter) '.';
  position: absolute;
  left: var(--space-md);
  font-weight: 700;
  color: var(--accent-orange);
  font-size: var(--font-lg);
}

/* 电脑端行动推荐优化 (≥1024px) */
@media (min-width: 1024px) {
  details:nth-child(7) li {
    padding: var(--space-xl);
    margin: var(--space-lg) 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  details:nth-child(7) li:hover {
    background: linear-gradient(135deg, 
      rgba(255, 107, 53, 0.2) 0%, 
      rgba(255, 240, 245, 1) 100%);
    transform: translateX(12px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.2);
    border-left-width: 6px;
  }
  
  details:nth-child(7) li:active {
    transform: translateX(12px) scale(0.98);
  }
}

/* 手机端悬停效果简化 */
@media (max-width: 1023px) {
  details:nth-child(7) li:hover {
    transform: none;
  }
}

/* ===== 触摸设备优化 ===== */
@media (hover: none) and (pointer: coarse) {
  /* 移除所有悬停效果 */
  details:hover {
    transform: none;
  }
  
  summary:hover {
    transform: none;
  }
  
  details li:hover {
    transform: none;
  }
  
  .message-item:hover {
    transform: none;
  }
  
  details:nth-child(7) li:hover {
    transform: none;
  }
  
  /* 增加触摸目标尺寸 */
  summary {
    min-height: 56px;
  }
  
  details li {
    min-height: 44px;
  }
  
  /* 简化动画以提升性能 */
  .unread-badge {
    animation: none;
  }
  
  .favorability-fill::after {
    animation: none;
  }
}

/* ===== 滚动条美化 ===== */
details::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

details::-webkit-scrollbar-track {
  background: rgba(255, 182, 193, 0.1);
  border-radius: 3px;
}

details::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, 
    var(--primary-pink) 0%, 
    var(--accent-purple) 100%);
  border-radius: 3px;
  transition: all 0.3s ease;
}

details::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, 
    var(--accent-purple) 0%, 
    var(--primary-pink) 100%);
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.5);
}

/* 平板端和电脑端滚动条 */
@media (min-width: 768px) {
  details::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  details::-webkit-scrollbar-track {
    border-radius: 4px;
  }
  
  details::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }
}

/* ===== 打印样式优化 ===== */
@media print {
  details {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    background: white !important;
  }
  
  summary {
    background: #f0f0f0 !important;
    color: black !important;
    text-shadow: none !important;
  }
  
  .unread-badge {
    animation: none !important;
    background: #ccc !important;
    color: black !important;
    box-shadow: none !important;
  }
  
  /* 隐藏非必要元素 */
  summary::before,
  .favorability-fill::after,
  .unread-badge::after {
    display: none !important;
  }
}

/* ===== 性能优化 ===== */
/* 减少动画对低端设备的影响 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}