/**
 * Mobile Styles - 移动端样式合集
 *
 * 包含以下功能模块:
 * - Banner 修复 (mobile-banner-fix.css)
 * - 暗色主题 (mobile-dark-theme.css)
 * - 导航展开 (mobile-navigation-expanded.css)
 * - Sidebar 默认修复 (mobile-sidebar-default-fix.css)
 * - Sidebar 增强 (mobile-sidebar-enhanced.css)
 * - Sidebar 修复 (mobile-sidebar-fix.css)
 * - Widget 修复 (mobile-widget-fix.css)
 *
 * 合并日期: 2025-11-20
 */

/* ========================================
   Banner 修复
   ======================================== */

/**
 * 移动端Banner布局优化
 * 解决按钮占比过大问题，提升视觉平衡
 */

/* 移动端header区域重新设计 */
@media (max-width: 768px) {
  /* 增加banner高度，减少按钮相对占比 */
  .banner-header {
    aspect-ratio: 2.5/1 !important; /* 从3/1调整到2.5/1，增加高度 */
    min-height: 160px !important; /* 从140px增加到160px */
    position: relative;
  }
  
  /* 优化按钮布局和尺寸 */
  .menu-toggle {
    top: 16px !important;
    left: 16px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    padding: 8px !important;
    border-radius: 6px !important;
    background: rgba(250, 140, 50, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(250, 140, 50, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .lang-toggle {
    top: 16px !important;
    right: 16px !important;
    scale: 0.9 !important; /* 轻微缩小 */
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
  }
  
  .lang-toggle button {
    padding: 6px 10px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    font-weight: 600 !important;
  }
  
  /* 优化banner内容布局 */
  .banner-content {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 16px !important;
    justify-content: center !important;
  }
  
  .banner-logo {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 8px !important;
  }
  
  .banner-logo img {
    width: 50px !important;
    height: 50px !important;
  }
  
  .banner-text {
    text-align: center !important;
    max-width: 100% !important;
  }
  
  .banner-title {
    font-size: 1.8rem !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
  }
  
  .banner-tagline {
    font-size: 0.9rem !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* 业务标签区域优化 */
  .business-tags {
    gap: 12px !important;
    margin: 16px auto 8px !important;
    padding: 0 16px !important;
  }
  
  .business-tag {
    font-size: 1.1rem !important;
    padding: 14px 24px !important;
    letter-spacing: 1.5px !important;
    border-radius: 20px !important;
  }
}

/* 更小屏幕的额外优化 */
@media (max-width: 480px) {
  .banner-header {
    aspect-ratio: 2.2/1 !important;
    min-height: 140px !important;
  }
  
  .menu-toggle {
    width: 34px !important;
    height: 34px !important;
    top: 14px !important;
    left: 14px !important;
    font-size: 16px !important;
  }
  
  .lang-toggle {
    top: 14px !important;
    right: 14px !important;
    scale: 0.85 !important;
  }
  
  .lang-toggle button {
    padding: 5px 8px !important;
    font-size: 12px !important;
    min-height: 28px !important;
  }
  
  .banner-content {
    padding: 16px 12px !important;
    gap: 8px !important;
  }
  
  .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 4px !important;
  }
  
  .banner-logo img {
    width: 42px !important;
    height: 42px !important;
  }
  
  .banner-title {
    font-size: 1.5rem !important;
    margin: 0 0 6px !important;
  }
  
  .banner-tagline {
    font-size: 0.8rem !important;
    gap: 8px !important;
  }
  
  .business-tags {
    margin: 12px auto 6px !important;
    padding: 0 12px !important;
  }
}

/* 超小屏幕优化 */
@media (max-width: 360px) {
  .banner-header {
    aspect-ratio: 2/1 !important;
    min-height: 120px !important;
  }
  
  .menu-toggle {
    width: 32px !important;
    height: 32px !important;
    top: 12px !important;
    left: 12px !important;
    font-size: 15px !important;
  }
  
  .lang-toggle {
    top: 12px !important;
    right: 12px !important;
    scale: 0.8 !important;
  }
  
  .lang-toggle button {
    padding: 4px 6px !important;
    font-size: 11px !important;
    min-height: 26px !important;
  }
  
  .banner-content {
    padding: 12px 8px !important;
    gap: 6px !important;
  }
  
  .banner-logo {
    width: 45px !important;
    height: 45px !important;
  }
  
  .banner-logo img {
    width: 38px !important;
    height: 38px !important;
  }
  
  .banner-title {
    font-size: 1.3rem !important;
    margin: 0 0 4px !important;
  }
  
  .banner-tagline {
    font-size: 0.75rem !important;
    gap: 6px !important;
  }
}

/* 横屏模式特殊处理 */
@media (max-width: 768px) and (orientation: landscape) {
  .banner-header {
    aspect-ratio: 4/1 !important;
    min-height: 100px !important;
  }
  
  .banner-content {
    flex-direction: row !important;
    gap: 20px !important;
    padding: 16px !important;
  }
  
  .banner-logo {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0 !important;
  }
  
  .banner-logo img {
    width: 42px !important;
    height: 42px !important;
  }
  
  .banner-text {
    text-align: left !important;
  }
  
  .banner-title {
    font-size: 1.4rem !important;
    margin: 0 0 4px !important;
  }
  
  .banner-tagline {
    font-size: 0.8rem !important;
    gap: 12px !important;
  }
  
  .menu-toggle {
    width: 30px !important;
    height: 30px !important;
    top: 10px !important;
    left: 10px !important;
    font-size: 14px !important;
  }
  
  .lang-toggle {
    top: 10px !important;
    right: 10px !important;
    scale: 0.8 !important;
  }
}

/* 按钮hover状态优化 */
@media (max-width: 768px) {
  .menu-toggle:hover {
    background: rgba(250, 140, 50, 0.25) !important;
    transform: scale(1.05) !important;
  }
  
  .lang-toggle button:hover {
    background: rgba(250, 140, 50, 0.1) !important;
  }
  
  .lang-toggle button.active {
    background: var(--primary-color) !important;
    color: #fff !important;
    transform: none !important;
  }
}

/* 提升按钮的可访问性 */
@media (max-width: 768px) {
  .menu-toggle:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(250, 140, 50, 0.1) !important;
  }
  
  .lang-toggle button:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 1px !important;
  }
}

/* 暗色模式适配 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .menu-toggle {
    background: rgba(250, 140, 50, 0.2) !important;
    color: #fff !important;
  }
  
  .lang-toggle {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(250, 140, 50, 0.3) !important;
  }
  
  .lang-toggle button {
    color: #e0e0e0 !important;
  }
  
  .lang-toggle button:hover {
    background: rgba(250, 140, 50, 0.15) !important;
    color: #fff !important;
  }
}

/* 减少动画的用户偏好支持 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .menu-toggle,
  .lang-toggle button,
  .banner-logo img {
    transition: none !important;
  }
  
  .menu-toggle:hover {
    transform: none !important;
  }
}

/* 高对比度模式支持 */
@media (max-width: 768px) and (prefers-contrast: high) {
  .menu-toggle {
    border: 2px solid var(--primary-color) !important;
    background: rgba(250, 140, 50, 0.3) !important;
  }
  
  .lang-toggle {
    border: 2px solid var(--primary-color) !important;
  }
  
  .lang-toggle button {
    border: 1px solid transparent !important;
  }
  
  .lang-toggle button:hover,
  .lang-toggle button.active {
    border-color: var(--primary-color) !important;
  }
}

/* ========================================
   暗色主题
   ======================================== */

/**
 * 移动端暗色主题
 * 在手机端强制应用暗色主题样式
 */

/* ========== 移动端暗色主题 ========== */
@media (max-width: 768px) {
  /* 整体页面背景 - 强制应用 */
  html,
  body {
    background: #2d3748 !important;
    background-color: #2d3748 !important;
  }

  /* 主内容区域 */
  main,
  .content {
    background: #2d3748 !important;
  }

  /* 所有wrapper模块基础背景 */
  .wrapper {
    background: #1a202c !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  /* Banner区域 */
  .banner,
  .banner-header {
    background: #1a202c !important;
    border-bottom: 3px solid #fa8c32 !important;
  }

  .banner-content {
    background: transparent !important;
  }

  .banner-content h1,
  .banner-content p {
    color: #e2e8f0 !important;
  }

  /* Banner标题 - 硅谷科技评论 - 黑体字体 + 浅色文字 */
  .banner-title {
    /* 中文黑体 */
    font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "SimHei", "Heiti SC", sans-serif !important;
    font-weight: 700 !important;
    /* 暗色背景下使用浅色文字 */
    color: #e2e8f0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  /* 英文标题 - Silicon Valley Tech Review - 黑体字体 + 浅色文字 */
  .banner-title[data-lang="en"],
  .banner-title:lang(en) {
    font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 900 !important;
    color: #e2e8f0 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
  }

  /* Banner副标题 */
  .banner-tagline,
  .banner-tagline div {
    color: #cbd5e0 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important;
  }

  /* 业务标签(数据榜单、内容社区、投资孵化) */
  .business-tags {
    background: transparent !important;
  }

  .business-tag {
    background: #374151 !important; /* 深灰背景 */
    color: #ffffff !important; /* 纯白色文字 */
    border: 2px solid rgba(250, 140, 50, 0.3) !important; /* 橙色边框 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; /* 暗色阴影 */
    font-weight: 700 !important;
  }

  .business-tag:hover,
  .business-tag:active {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important; /* hover橙色渐变 */
    color: white !important;
    border-color: transparent !important;
    transform: scale(1.05) !important;
  }

  /* 统计卡片 */
  .stats-wrapper {
    background: #1a202c !important;
  }

  /* AI创投日报 - 统一容器 */
  .funding-unified-container {
    background: #1a202c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* 表头区域 */
  .funding-header-enhanced {
    background: transparent !important;
  }

  .funding-main-title .title-text,
  .funding-subtitle {
    color: #e2e8f0 !important;
  }

  .funding-title-badge {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
  }

  /* 统计卡片 */
  .funding-stat-card {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .stat-label {
    color: #a0aec0 !important;
  }

  .stat-value {
    color: #fa8c32 !important;
  }

  /* 图表区域 */
  .funding-charts {
    background: transparent !important;
  }

  .chart-container {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .chart-title {
    color: #ffffff !important; /* 改为纯白色,提高对比度 */
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .chart-bar-label {
    color: #f3f4f6 !important; /* 改为更亮的灰白色 */
  }

  .chart-bar-track {
    background: #374151 !important;
  }

  /* 筛选栏区域 */
  .funding-filter-bar {
    background: transparent !important;
  }

  .filter-label {
    color: #ffffff !important; /* 改为纯白色 */
  }

  .filter-option {
    background: #4b5563 !important; /* 改为更亮的灰色,提高对比度 */
    color: #ffffff !important; /* 纯白色文字 */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* 更明显的边框 */
    font-weight: 600 !important; /* 加粗文字 */
  }

  .filter-option.active {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    border-color: transparent !important;
    font-weight: 700 !important;
  }

  .filter-reset-btn {
    background: #4b5563 !important; /* 改为更亮的灰色 */
    color: #ffffff !important; /* 纯白色 */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* 更明显的边框 */
    font-weight: 600 !important; /* 加粗文字 */
  }

  /* 融资卡片列表 */
  .funding-highlights {
    background: transparent !important;
  }

  .funding-item {
    background: #2d3748 !important;
    border: none !important;
  }

  .company-name {
    color: #e2e8f0 !important;
  }

  .company-stage {
    background: rgba(250, 140, 50, 0.2) !important;
    color: #ffa64d !important;
  }

  .funding-amount {
    color: #48bb78 !important;
  }

  .funding-description {
    color: #a0aec0 !important;
  }

  .funding-tag {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色,提高对比度 */
    border-color: rgba(255, 255, 255, 0.2) !important; /* 增强边框可见度 */
  }

  .funding-time {
    color: #718096 !important;
  }

  /* 加载更多按钮 */
  .load-more-btn {
    background: #374151 !important;
    color: #cbd5e0 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .load-more-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
  }

  /* 聊天组件 */
  .chatbox {
    background: #1a202c !important;
  }

  .chat-header {
    color: #ffffff !important; /* 改为纯白色 */
  }

  .chat-messages {
    background: #2d3748 !important;
  }

  /* 原生聊天容器 - 强制应用暗色背景 */
  #svtr-chat-container {
    background: #2d3748 !important;
  }

  .native-chat-container {
    background: #2d3748 !important;
  }

  .message {
    background: #374151 !important;
    color: #e2e8f0 !important;
  }

  .message.user {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
  }

  .chat-input-container {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .chat-input {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .chat-input::placeholder {
    color: #718096 !important;
  }

  .chat-send-btn {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
  }

  /* Header导航 */
  header {
    background: #1a202c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .logo-text {
    color: #e2e8f0 !important;
  }

  nav a {
    color: #cbd5e0 !important;
  }

  nav a:hover,
  nav a.active {
    color: #fa8c32 !important;
  }

  /* Footer */
  footer {
    background: #1a202c !important;
    color: #a0aec0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  footer a {
    color: #cbd5e0 !important;
  }

  footer a:hover {
    color: #fa8c32 !important;
  }

  /* 通用文本颜色 */
  h1, h2, h3, h4, h5, h6 {
    color: #e2e8f0 !important;
  }

  p {
    color: #cbd5e0 !important;
  }

  /* 卡片通用样式 */
  .card {
    background: #2d3748 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* 按钮通用样式 */
  button {
    color: #e2e8f0 !important;
  }

  /* 输入框通用样式 */
  input,
  textarea,
  select {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #718096 !important;
  }

  /* 分割线 */
  hr,
  .divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Scrollbar样式 */
  ::-webkit-scrollbar {
    width: 8px;
    background: #1a202c;
  }

  ::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #718096;
  }

  /* ========== 侧边栏底部区域 ========== */
  /* 登录注册按钮区域 */
  .sidebar-bottom-actions {
    background: linear-gradient(135deg, rgba(26, 32, 44, 0.98), rgba(45, 55, 72, 0.95)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  /* 登录/注册按钮 */
  .btn-member-login {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 2px solid #60A5FA !important;
    color: #60A5FA !important;
  }

  .btn-member-login:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3B82F6 !important;
    color: #3B82F6 !important;
  }

  /* 社交媒体图标区域 */
  .social-media-icons {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .social-media-icons a {
    color: #cbd5e0 !important;
    background: rgba(55, 65, 81, 0.5) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
  }

  .social-media-icons a:hover {
    color: #fa8c32 !important;
    background: rgba(250, 140, 50, 0.2) !important;
    transform: translateY(-2px) !important;
  }

  .social-media-icons svg {
    filter: brightness(0.9) !important;
  }

  /* ========== 原生聊天容器 ========== */
  /* AI Chatbot 原生容器 */
  #svtr-chat-container,
  .native-chat-container {
    background: #1a202c !important;
  }

  /* 聊天消息区域 */
  .chat-messages,
  .messages-container {
    background: #2d3748 !important;
  }

  /* 聊天消息气泡 */
  .message,
  .chat-message {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色,提高对比度 */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 增强边框可见度 */
  }

  /* 用户消息 */
  .message.user,
  .chat-message.user,
  .user-message {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    border: none !important;
  }

  /* AI消息 */
  .message.assistant,
  .message.bot,
  .chat-message.assistant,
  .chat-message.bot,
  .bot-message,
  .assistant-message {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色 */
  }

  /* 输入框容器 */
  .chat-input-wrapper,
  .input-container,
  .chat-input-area {
    background: #2d3748 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* 输入框 */
  .chat-input,
  .message-input,
  textarea.chat-input {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 增强边框可见度 */
  }

  .chat-input:focus,
  .message-input:focus {
    border-color: #fa8c32 !important;
    box-shadow: 0 0 0 3px rgba(250, 140, 50, 0.3) !important; /* 增强焦点效果 */
  }

  /* 发送按钮 */
  .chat-send-btn,
  .send-button,
  .btn-send {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    border: none !important;
  }

  .chat-send-btn:hover,
  .send-button:hover {
    background: linear-gradient(135deg, #ff9f40, #ffb366) !important;
    box-shadow: 0 4px 12px rgba(250, 140, 50, 0.4) !important;
  }

  .chat-send-btn:disabled,
  .send-button:disabled {
    background: #4a5568 !important;
    color: #718096 !important;
  }

  /* 聊天加载状态 */
  .chat-loading,
  .typing-indicator {
    background: #374151 !important;
    color: #cbd5e0 !important;
  }

  /* 聊天时间戳 */
  .message-time,
  .timestamp {
    color: #718096 !important;
  }

  /* 聊天系统消息 */
  .system-message,
  .chat-system {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60A5FA !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
  }

  /* ========== 用户操作区域 (侧边栏订阅) ========== */
  .user-actions {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.9), rgba(75, 85, 99, 0.7)) !important;
    border-color: rgba(156, 163, 175, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .subscribe-trust {
    color: #10b981 !important;
  }

  .subscribe-form-inline input {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .subscribe-form-inline input:focus {
    border-color: #10b981 !important;
    background: #2d3748 !important;
  }

  .subscribe-form-inline input::placeholder {
    color: #718096 !important;
  }

  .btn-subscribe-submit {
    background: #059669 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
  }

  .btn-subscribe-submit:hover {
    background: #047857 !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
  }

  /* ========== 侧边栏相关 ========== */
  .sidebar {
    background: rgba(26, 32, 44, 0.95) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .sidebar-logo img {
    border-color: rgba(250, 140, 50, 0.3) !important;
  }

  .nav-list a {
    color: #cbd5e0 !important;
  }

  .nav-list a:hover,
  .nav-list a.active {
    color: #fa8c32 !important;
    background: rgba(250, 140, 50, 0.1) !important;
  }

  .group-header {
    color: #e2e8f0 !important;
  }

  .group-header.collapsible {
    background: rgba(55, 65, 81, 0.5) !important;
  }

  .group-header.collapsible:hover {
    background: rgba(75, 85, 99, 0.5) !important;
  }

  .sub-list {
    background: transparent !important;
  }

  .sub-list a {
    color: #a0aec0 !important;
  }

  .sub-list a:hover {
    color: #fa8c32 !important;
    background: rgba(250, 140, 50, 0.1) !important;
  }

  /* ========== 遮罩层 ========== */
  .overlay,
  .modal-backdrop {
    background: rgba(0, 0, 0, 0.7) !important;
  }

  /* ========== 语言切换按钮 ========== */
  .lang-toggle {
    background: #374151 !important; /* 改为更深的灰色 */
    border: 2px solid rgba(250, 140, 50, 0.4) !important; /* 橙色边框更明显 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  }

  .lang-toggle button {
    background: transparent !important;
    color: #ffffff !important; /* 改为纯白色 */
    font-weight: 600 !important; /* 加粗 */
    min-height: 36px !important; /* 增加最小高度 */
  }

  .lang-toggle button.active {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 0 8px rgba(250, 140, 50, 0.6) !important; /* 发光效果 */
  }

  .lang-toggle button:not(.active):hover {
    background: rgba(250, 140, 50, 0.3) !important; /* 增强hover背景 */
    color: #ffffff !important;
  }

  .lang-toggle .divider {
    color: #9ca3af !important; /* 改为更亮的灰色 */
    font-weight: 300 !important;
  }

  /* ========== SVTR原生聊天组件暗色主题 ========== */
  /* SVTR Chat容器 */
  .svtr-chat-container {
    background: #1a202c !important;
  }

  /* SVTR 聊天消息区域 - 强制应用暗色背景 */
  .svtr-chat-messages,
  #svtr-chat-messages {
    background: #2d3748 !important;
    background-color: #2d3748 !important;
  }

  /* 确保所有聊天消息容器都是暗色 - 使用通配符 */
  .svtr-chat-container > div,
  .svtr-chat-container > *,
  .svtr-chat-wrapper,
  .svtr-chat-messages > *:not(.svtr-message) {
    background: #2d3748 !important;
    background-color: #2d3748 !important;
  }

  /* 强制聊天区域所有子元素继承暗色背景 */
  .svtr-chat-container *:not(.svtr-message):not(.svtr-action-btn):not(button):not(textarea) {
    background-color: transparent !important;
  }

  /* SVTR 聊天消息 */
  .svtr-message {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色,提高对比度 */
    border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 增强边框可见度 */
  }

  .svtr-message.user {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    border: none !important;
  }

  .svtr-message.assistant {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色 */
  }

  .svtr-message.loading {
    background: #374151 !important;
  }

  /* SVTR 消息头部 */
  .message-header {
    color: #f3f4f6 !important; /* 改为更亮的灰白色 */
  }

  .message-avatar {
    background: #4a5568 !important;
    color: #fbbf24 !important; /* 使用更亮的橙黄色 */
    font-weight: 600 !important;
  }

  .svtr-message.user .message-avatar {
    background: rgba(255, 255, 255, 0.25) !important; /* 增加不透明度 */
    color: white !important;
  }

  .message-name {
    color: #f3f4f6 !important; /* 改为更亮的灰白色 */
    font-weight: 500 !important;
  }

  .svtr-message.user .message-name {
    color: white !important;
  }

  .message-time {
    color: #9ca3af !important; /* 改为更亮的灰色 */
  }

  .message-content {
    color: #ffffff !important; /* 改为纯白色 */
    line-height: 1.6 !important; /* 增加行高提高可读性 */
  }

  .svtr-message.user .message-content {
    color: white !important;
  }

  /* SVTR 加载状态 */
  .loading-dots {
    color: #f3f4f6 !important; /* 改为更亮的灰白色 */
  }

  .thinking-emoji {
    color: #fbbf24 !important; /* 使用更亮的橙黄色 */
  }

  .animated-dots span {
    color: #f3f4f6 !important; /* 改为更亮的灰白色 */
  }

  /* SVTR 输入区域 */
  .svtr-chat-input-area {
    background: #2d3748 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .svtr-chat-input-container {
    background: #2d3748 !important;
  }

  /* SVTR 输入框 */
  #svtr-chat-input,
  textarea#svtr-chat-input {
    background: #374151 !important;
    color: #ffffff !important; /* 改为纯白色 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 增强边框可见度 */
  }

  #svtr-chat-input:focus {
    border-color: #fa8c32 !important;
    box-shadow: 0 0 0 3px rgba(250, 140, 50, 0.3) !important; /* 增强焦点效果 */
  }

  #svtr-chat-input::placeholder {
    color: #9ca3af !important; /* 改为更亮的灰色 */
  }

  /* SVTR 发送按钮 */
  .svtr-chat-send-btn,
  #svtr-chat-send {
    background: linear-gradient(135deg, #fa8c32, #ff9f40) !important;
    color: white !important;
    border: none !important;
  }

  .svtr-chat-send-btn:hover {
    background: linear-gradient(135deg, #ff9f40, #ffb366) !important;
    box-shadow: 0 4px 12px rgba(250, 140, 50, 0.4) !important;
  }

  .svtr-chat-send-btn:disabled {
    background: #4a5568 !important;
    color: #718096 !important;
  }

  .send-icon,
  .loading-spinner {
    color: white !important;
  }

  /* SVTR 操作按钮 */
  .svtr-chat-actions {
    background: transparent !important;
  }

  .svtr-action-btn,
  #svtr-share-btn,
  #svtr-clear-btn {
    background: #374151 !important;
    color: #cbd5e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .svtr-action-btn:hover {
    background: #4a5568 !important;
    color: #fa8c32 !important;
  }

  /* SVTR 分享对话框 */
  .svtr-share-dialog {
    background: rgba(0, 0, 0, 0.8) !important;
  }

  .share-dialog-content {
    background: #2d3748 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .share-dialog-content h4 {
    color: #e2e8f0 !important;
  }

  .share-dialog-content textarea {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .share-actions button {
    background: #374151 !important;
    color: #cbd5e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .share-actions button:hover {
    background: #4a5568 !important;
  }

  /* SVTR Toast提示 */
  .svtr-toast {
    background: #374151 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}

/* ========== 全局字体设置(所有屏幕尺寸) ========== */
/* 网站表头 - 硅谷科技评论标题使用黑体 */
.banner-title {
  font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "SimHei", "Heiti SC", sans-serif !important;
  font-weight: 700 !important;
}

/* Silicon Valley Tech Review 英文标题也使用相应的黑体 */
.banner-title[lang="en"],
.banner-title:lang(en) {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
}


/* ========================================
   导航展开
   ======================================== */

/**
 * 移动端导航菜单完全展开修复
 * 确保在移动端所有导航菜单默认为展开状态，方便用户查看完整目录
 */

/* 移动端导航菜单默认展开 */
@media (max-width: 768px) {

  /* 强制所有子菜单在移动端展开 */
  .sidebar .sub-list {
    max-height: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    overflow: visible !important;
  }

  /* 移除collapsed类的限制 */
  .sidebar .sub-list.collapsed {
    max-height: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* 确保子菜单项可见 */
  .sidebar .sub-list li {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }

  /* 切换图标在移动端显示为展开状态 */
  .sidebar .toggle-icon {
    transform: rotate(90deg) !important;
    color: #fa8c32 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 三级菜单在移动端也展开 */
  .sidebar .sub-list .sub-list {
    max-height: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    margin-top: 4px !important;
    overflow: visible !important;
  }

  /* 确保组标题在移动端始终可见 */
  .sidebar .group-header.collapsible {
    background: linear-gradient(135deg, rgba(250, 140, 50, 0.15), rgba(255, 221, 0, 0.08)) !important;
    border-color: rgba(250, 140, 50, 0.3) !important;
  }

  /* 优化移动端菜单项间距 */
  .sidebar .nav-group {
    margin-bottom: 1rem;
  }

  /* 确保内容不被遮挡 */
  .sidebar .sub-list a {
    padding: 8px 12px;
    margin-bottom: 2px;
    display: block;
    border-radius: 6px;
  }

  /* 增强三级菜单的可见性 */
  .sidebar .sub-list .sub-list a {
    padding: 6px 10px;
    margin-bottom: 1px;
    margin-left: 8px;
    border-left: 3px solid rgba(250, 140, 50, 0.3);
  }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
  .sidebar .sub-list a {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .sidebar .sub-list .sub-list a {
    padding: 5px 8px;
    font-size: 0.8rem;
  }

  .sidebar .nav-group {
    margin-bottom: 0.8rem;
  }
}

/* 移动端侧边栏完全展开，不限制高度，无滚动条 */
@media (max-width: 768px) {
  .sidebar.open {
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: 60px;
    /* 确保完全展开，不使用滚动 */
  }

  /* 完全隐藏滚动条 */
  .sidebar.open::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }

  .sidebar {
    overflow: visible !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* 确保侧边栏容器不限制高度 */
  .sidebar.open {
    min-height: 100vh;
    height: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    z-index: 1000 !important;
  }
}

/* ========================================
   Sidebar 默认修复
   ======================================== */

/**
 * 移动端侧边栏默认关闭修复
 * 确保在移动端侧边栏默认为关闭状态，桌面端默认为打开状态
 */

/* 桌面端默认显示侧边栏 */
@media (min-width: 1200px) {
  .sidebar {
    transform: translateX(0) !important;
  }
  
  .content {
    margin-left: 280px !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .sidebar {
    transform: translateX(0) !important;
  }
  
  .content {
    margin-left: 240px !important;
  }
}

/* 移动端确保默认隐藏 */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%) !important;
  }
  
  .sidebar.open {
    transform: translateX(0) !important;
  }
  
  .content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  .sidebar.open ~ .content {
    margin-left: 200px !important;
    width: calc(100% - 200px) !important;
  }
}

@media (max-width: 600px) {
  .sidebar.open ~ .content {
    margin-left: 180px !important;
    width: calc(100% - 180px) !important;
  }
}

@media (max-width: 480px) {
  .sidebar.open ~ .content {
    margin-left: 160px !important;
    width: calc(100% - 160px) !important;
  }
}

@media (max-width: 375px) {
  .sidebar.open ~ .content {
    margin-left: 140px !important;
    width: calc(100% - 140px) !important;
  }
}

/* ========================================
   Sidebar 增强
   ======================================== */

/**
 * 移动端侧边栏优化 - 80%宽度 + 模糊背景层叠效果
 * 针对手机端操作体验的专门优化
 */

/* 移动端侧边栏宽度优化 - 使用!important确保覆盖原有规则 */
@media (max-width: 768px) {
  .sidebar {
    width: 95vw !important; /* 使用视口宽度的95% */
    max-width: 400px !important; /* 最大宽度限制，避免平板上过宽 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /* 关键修复：启用垂直滚动 */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100vh !important; /* 固定高度为视口高度 */
    height: 100dvh !important; /* 动态视口高度(iOS Safari优化) */
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    /* 滚动优化 */
    -webkit-overflow-scrolling: touch !important; /* iOS流畅滚动 */
    scroll-behavior: smooth !important; /* 平滑滚动 */
    overscroll-behavior-y: contain !important; /* 防止滚动穿透 */
    /* 移除底部padding，因为sticky定位会自动处理 */
    padding-bottom: 0 !important;
  }

  /* 侧边栏打开时，主内容区层叠在下方（移除模糊效果） */
  .sidebar.open ~ .content,
  .sidebar.open ~ main {
    margin-left: 0 !important; /* 不推移内容，而是覆盖 */
    /* 移除模糊效果以改善用户体验 */
    pointer-events: none !important; /* 禁用交互 */
  }

  /* 确保侧边栏内部元素可以交互 */
  .sidebar {
    pointer-events: auto !important;
  }

  /* 确保侧边栏内的所有交互元素都可以点击 */
  .sidebar * {
    pointer-events: auto !important;
  }

  /* 特别确保所有可交互元素正常工作 */
  .sidebar .user-actions,
  .sidebar .subscribe-form-inline,
  .sidebar .subscribe-form-inline input,
  .sidebar .subscribe-form-inline button,
  .sidebar .btn-member-login,
  .sidebar .nav-list,
  .sidebar .nav-list a,
  .sidebar .group-header,
  .sidebar .sub-list a,
  .sidebar .mobile-sidebar-collapse {
    pointer-events: auto !important;
  }

  /* 防止iOS Safari的触摸延迟问题 */
  .sidebar input,
  .sidebar button,
  .sidebar a {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    touch-action: manipulation !important;
  }

  /* 增强overlay背景效果 */
  .sidebar.open ~ .overlay,
  .overlay.active {
    opacity: 0.6 !important; /* 增加背景遮罩透明度 */
    pointer-events: auto !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }

  /* 侧边栏关闭时恢复内容 */
  .content,
  main {
    filter: none;
    -webkit-filter: none;
    pointer-events: auto;
  }

  /* 优化侧边栏内部布局 - 允许内容自然流动 */
  .sidebar nav {
    padding-bottom: 8px !important; /* 只需要少量底部间距 */
    margin-bottom: 0 !important; /* 移除user-actions.css中设置的80px margin */
    overflow: visible !important; /* 允许内容自然溢出到父容器滚动区域 */
    height: auto !important; /* 自适应高度 */
    max-height: none !important; /* 移除最大高度限制 */
  }

  /* 确保侧边栏内容容器不限制高度和滚动 */
  .sidebar-content,
  .sidebar .nav-list,
  .sidebar .sidebar-section {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* 移动端登录按钮优化 - 使用sticky定位粘在底部 */
  .sidebar-bottom-actions {
    position: sticky !important; /* 使用sticky让它粘在滚动容器底部 */
    bottom: 0 !important; /* 粘在底部 */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; /* 占满侧边栏宽度 */
    margin: 0 !important;
    padding: 16px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px)) !important; /* iPhone底部安全区域：基础20px + 系统安全区域 */
    border-radius: 0 !important; /* 移除圆角使其贴合底部 */
    box-shadow: 0 -4px 20px rgba(250, 140, 50, 0.2) !important; /* 改为向上的阴影 */
    z-index: 1060 !important; /* 确保在侧边栏内容之上 */
    background: linear-gradient(135deg, rgba(255, 248, 225, 0.98), rgba(255, 224, 178, 0.95)) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    min-height: 200px !important; /* 进一步增加高度确保图标完整显示 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .sidebar-bottom-actions .btn-member-login {
    font-size: 15px !important;
    padding: 14px 20px !important;
    min-height: 48px !important; /* 符合移动端最小触摸目标 */
    width: 100% !important; /* 按钮占满宽度 */
    margin-bottom: 0 !important; /* 移除margin,用flex gap代替 */
    flex-shrink: 0 !important; /* 防止按钮缩小 */
  }

  /* 确保社交媒体图标显示 */
  .sidebar-bottom-actions .social-media-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 0 16px !important; /* 增加底部padding到16px，配合容器的底部安全区域 */
    margin-top: 16px !important;
    border-top: 1px solid rgba(250, 140, 50, 0.3) !important;
    flex-shrink: 0 !important; /* 防止图标区域缩小 */
    min-height: 68px !important; /* 增加最小高度: 16px上padding + 36px图标 + 16px下padding */
  }

  /* 确保图标链接可见 */
  .sidebar-bottom-actions .social-media-icons a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }

  /* 移动端侧边栏头部专门处理 */
  .sidebar-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    height: 60px !important;
  }

  .sidebar-logo {
    width: 32px !important;
    height: 32px !important;
  }

  /* 移动端添加折叠按钮的JavaScript将会动态插入 */
  .mobile-sidebar-collapse {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 6px !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 11 !important;
  }

  .mobile-sidebar-collapse:hover {
    background: rgba(250, 140, 50, 0.1) !important;
    color: #fa8c32 !important;
  }

  /* 调整页面顶部menu-toggle按钮位置，与侧边栏logo对齐 */
  .menu-toggle {
    position: fixed !important;
    top: 10px !important; /* 调整到与sidebar-header中心对齐，优化上移位置 */
    left: 16px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    padding: 6px !important;
    background: rgba(250, 140, 50, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1100 !important;
  }

  /* 菜单组样式优化 */
  .nav-group {
    margin-bottom: 1rem;
  }

  .group-header.collapsible {
    padding: 16px 20px;
    min-height: 56px; /* 增加触摸目标 */
    border-radius: 12px;
  }

  .group-title {
    font-size: 1.1rem;
    font-weight: 700;
  }

  .toggle-icon {
    font-size: 1rem;
    width: 24px;
    height: 24px;
  }

  /* 子菜单优化 */
  .sub-list li {
    margin-bottom: 0.4rem;
  }

  .sub-list a {
    padding: 12px 16px;
    font-size: 0.95rem;
    min-height: 44px; /* 符合触摸标准 */
    display: flex;
    align-items: center;
    border-radius: 10px;
  }

  /* 三级菜单优化 */
  .sub-list .sub-list a {
    padding: 10px 14px;
    font-size: 0.9rem;
    min-height: 40px;
  }

  /* 订阅区域移动端优化 */
  .user-actions {
    margin: 16px;
    padding: 18px;
    border-radius: 16px;
    pointer-events: auto !important; /* 确保用户操作区域可交互 */
  }

  .subscribe-form-inline input {
    padding: 16px 18px;
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 48px;
    border-radius: 14px;
    pointer-events: auto !important; /* 确保输入框可点击 */
    -webkit-user-select: text !important; /* 允许文本选择 */
    user-select: text !important;
  }

  /* 确保输入框焦点状态正常 */
  .subscribe-form-inline input:focus {
    outline: 2px solid #16a34a !important;
    outline-offset: 2px !important;
  }

  .btn-subscribe-submit {
    padding: 16px 24px;
    font-size: 15px;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
  }
}

/* 超小屏幕优化 (iPhone SE等) */
@media (max-width: 375px) {
  .sidebar {
    width: 95vw; /* 小屏幕保持95%比例 */
    max-width: 380px;
  }

  .group-header.collapsible {
    padding: 14px 16px;
    min-height: 52px;
  }

  .group-title {
    font-size: 1.05rem;
  }

  .sub-list a {
    padding: 10px 14px;
    font-size: 0.92rem;
    min-height: 42px;
  }
}

/* 大屏手机优化 (iPhone Plus等) */
@media (max-width: 768px) and (min-width: 414px) {
  .sidebar {
    width: 95vw; /* 大屏手机保持95%比例 */
    max-width: 420px;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 60vw; /* 横屏时减少宽度 */
    max-width: 280px;
  }

  .sidebar nav {
    padding-bottom: 8px !important; /* 横屏时也使用少量底部间距 */
    margin-bottom: 0 !important; /* 移除margin */
  }
}

/* 高分辨率屏幕优化 */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .sidebar {
    border-right: 0.5px solid rgba(250, 140, 50, 0.3);
  }

  .group-header.collapsible {
    border: 0.5px solid rgba(250, 140, 50, 0.2);
  }
}

/* 触摸设备手势优化 */
@media (max-width: 768px) and (pointer: coarse) {
  /* 增加所有可点击元素的触摸区域 */
  .nav-list a,
  .sub-list a,
  .group-header.collapsible {
    position: relative;
  }

  .nav-list a::before,
  .sub-list a::before,
  .group-header.collapsible::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    z-index: -1;
  }
}

/* 无障碍优化 */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar.open ~ .content,
  .sidebar.open ~ main,
  .overlay {
    transition: none !important;
    animation: none !important;
  }

  .content,
  main {
    filter: none !important;
    -webkit-filter: none !important;
  }
}

/* 高对比度模式 */
@media (max-width: 768px) and (prefers-contrast: high) {
  .sidebar {
    background: rgba(255, 240, 200, 0.98);
    border-right: 2px solid #fa8c32;
  }

  .group-header.collapsible {
    background: rgba(250, 140, 50, 0.15);
    border: 2px solid #fa8c32;
  }

  .overlay.active {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
  }
}

/* iOS Safari优化 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .sidebar {
      /* iOS Safari的backdrop-filter优化 */
      -webkit-backdrop-filter: blur(10px);
      /* 防止iOS的橡皮筋效果 */
      overscroll-behavior-y: contain;
      /* iOS滚动优化 - 在侧边栏本身启用 */
      -webkit-overflow-scrolling: touch !important;
      scroll-behavior: smooth !important;
    }

    .sidebar nav {
      /* 确保nav不阻止滚动 */
      -webkit-overflow-scrolling: auto;
    }
  }
}

/* ========================================
   Sidebar 修复
   ======================================== */

/**
 * 移动端侧边栏修复样式
 * 提升性能和用户体验，避免闪退问题
 */

/* 🚀 移动端侧边栏性能优化 */
@media (max-width: 768px) {
  .sidebar[data-mobile-fixed="true"] {
    /* 使用GPU加速，减少重绘 */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    /* 优化动画性能 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* 减少动画复杂度 */
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 降级模式样式 */
  .sidebar[data-mobile-fixed="true"].fallback-mode {
    transition: none !important;
    will-change: auto;
  }

  /* 优化overlay性能 */
  .overlay {
    /* 使用GPU加速 */
    will-change: opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* 简化动画 */
    transition: opacity 0.2s ease-out;
  }

  /* 内容区域优化 */
  .content {
    /* 避免不必要的重布局 */
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 低端设备优化 */
  @media (max-device-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {
    .sidebar[data-mobile-fixed="true"] {
      transition: none !important;
    }
    
    .overlay {
      transition: none !important;
    }
    
    .content {
      transition: none !important;
    }
  }
}

/* 🚀 触摸反馈优化 */
.mobile-fix-toast {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  animation: toast-slide-in 0.3s ease-out;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 🚀 错误状态指示器 */
.sidebar[data-mobile-fixed="true"][data-error="true"]::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: #ff4444;
  border-radius: 50%;
  z-index: 1000;
  display: none; /* 仅开发环境显示 */
}

/* 🚀 健康状态指示器（仅开发环境） */
body[data-debug="true"] .sidebar[data-mobile-fixed="true"][data-error="true"]::before {
  display: block;
}

/* 🚀 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  .sidebar[data-mobile-fixed="true"],
  .overlay,
  .content {
    transition: none !important;
    animation: none !important;
  }
}

/* 🚀 高对比度模式支持 */
@media (prefers-contrast: high) {
  .mobile-fix-toast {
    background: #000;
    color: #fff;
    border: 2px solid #fff;
  }
}

/* 🚀 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .mobile-fix-toast {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
  }
}

/* 🚀 防止触摸穿透 */
.overlay.active {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 🚀 优化移动端布局性能 - 移除滚动，展示所有内容 */
@media (max-width: 768px) {
  .sidebar nav {
    /* 移除滚动，改为全展示 */
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    overflow-scrolling: auto;

    /* 优化渲染性能 */
    will-change: auto;
    height: auto !important;
    max-height: none !important;
  }
}

/* 🚀 内存优化：隐藏时释放GPU资源 */
.sidebar:not(.open) {
  will-change: auto;
}

.sidebar.open {
  will-change: transform;
}

/* ========================================
   Widget 修复
   ======================================== */

/**
 * 移动端 Stats Widget 空白修复
 * 解决移动端widget下方大片空白问题
 */

/* 移除固定高度，使用动态高度 */
@media (max-width: 768px) {
  .stats-wrapper {
    margin: 0.5rem auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  .stats-widget-iframe {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 8px;
    overflow: hidden;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }

  /* 让widget上下间距相等，实现居中 - 覆盖wrapper类的margin */
  .funding-daily.wrapper {
    margin: 0.5rem auto !important;
  }
}

@media (max-width: 480px) {
  .stats-wrapper {
    margin: 0.5rem auto !important;
  }

  .stats-widget-iframe {
    border-radius: 6px;
  }
}

@media (max-width: 375px) {
  .stats-wrapper {
    margin: 0.5rem auto !important;
  }

  .stats-widget-iframe {
    border-radius: 4px;
  }
}