/**
 * 移动端适配优化样式
 * 所有页面引用此文件以获得更好的移动端体验
 */

/* ========== 基础优化 ========== */

/* 防止水平滚动 */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 触摸优化 - 增大点击区域 */
@media (max-width: 768px) {
  /* 按钮最小点击区域 */
  button, 
  .btn,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
  }
  
  /* 链接点击区域 */
  a {
    padding: 8px;
  }
  
  /* 输入框优化 */
  input, 
  textarea, 
  select {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 12px;
  }
}

/* ========== 导航栏优化 ========== */

@media (max-width: 768px) {
  /* 汉堡菜单（如果存在） */
  .nav-toggle {
    display: block;
  }
  
  /* 导航链接垂直排列 */
  .nav-links {
    flex-direction: column;
    width: 100%;
    padding: 16px;
  }
  
  .nav-links a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ========== 卡片布局优化 ========== */

@media (max-width: 768px) {
  /* 网格布局改为单列 */
  .grid,
  .cards-grid,
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  
  /* 卡片内边距调整 */
  .card,
  .tool-card {
    padding: 16px;
    margin: 8px 0;
  }
}

/* ========== 表格优化 ========== */

@media (max-width: 768px) {
  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  /* 表头固定 */
  thead {
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 10;
  }
}

/* ========== 表单优化 ========== */

@media (max-width: 768px) {
  /* 表单字段垂直排列 */
  .form-row,
  .form-group {
    flex-direction: column;
    gap: 12px;
  }
  
  /* 标签和输入框全宽 */
  .form-label,
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
  }
  
  /* 按钮全宽 */
  .form-actions {
    flex-direction: column;
  }
  
  .form-actions button {
    width: 100%;
  }
}

/* ========== 模态框优化 ========== */

@media (max-width: 768px) {
  /* 模态框全屏或接近全屏 */
  .modal,
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    margin: 16px auto;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* 模态框标题缩小 */
  .modal-header h2,
  .modal-header h3 {
    font-size: 18px;
  }
}

/* ========== 底部导航优化（Dock） ========== */

@media (max-width: 768px) {
  /* Dock导航固定在底部 */
  .dock-nav,
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(139, 92, 246, 0.2);
  }
  
  /* Dock图标间距调整 */
  .dock-item {
    padding: 8px 12px;
  }
  
  /* Dock图标大小 */
  .dock-icon {
    font-size: 24px;
  }
  
  /* Dock标签隐藏或小字体 */
  .dock-label {
    font-size: 10px;
  }
  
  /* 为底部导航留出空间 */
  body {
    padding-bottom: 70px;
  }
}

/* ========== 聊天界面优化 ========== */

@media (max-width: 768px) {
  /* 聊天容器全宽 */
  .chat-container {
    height: 100vh;
    border-radius: 0;
  }
  
  /* 消息气泡最大宽度调整 */
  .message-content {
    max-width: 85%;
  }
  
  /* 输入框区域优化 */
  .chat-input-area {
    padding: 12px;
  }
  
  .chat-input {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ========== 工具卡片优化 ========== */

@media (max-width: 768px) {
  /* 工具图标放大 */
  .tool-icon {
    font-size: 32px;
  }
  
  /* 工具名称换行 */
  .tool-name {
    font-size: 14px;
    word-wrap: break-word;
  }
  
  /* 工具描述截断 */
  .tool-description {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ========== 图片优化 ========== */

@media (max-width: 768px) {
  /* 图片自适应 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 背景图优化 */
  .hero-bg,
  .banner {
    background-size: cover;
    background-position: center;
  }
}

/* ========== 字体大小优化 ========== */

@media (max-width: 768px) {
  /* 标题字体缩小 */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }
  
  /* 正文字体保持可读性 */
  body, p {
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* 小字体不小于12px */
  small,
  .text-sm,
  .hint {
    font-size: 12px;
  }
}

/* ========== 间距优化 ========== */

@media (max-width: 768px) {
  /* 减少内边距 */
  .container,
  .page-content {
    padding: 12px;
  }
  
  /* 减少外边距 */
  section,
  .section {
    margin: 16px 0;
    padding: 16px;
  }
}

/* ========== 特殊组件优化 ========== */

@media (max-width: 768px) {
  /* 下拉菜单优化 */
  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
  }
  
  /* 开关按钮优化 */
  .switch,
  .toggle {
    width: 50px;
    height: 28px;
  }
  
  /* 进度条优化 */
  .progress-bar {
    height: 8px;
  }
  
  /* 徽章优化 */
  .badge {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ========== 横屏优化 ========== */

@media (max-width: 768px) and (orientation: landscape) {
  /* 横屏时调整布局 */
  .chat-container {
    height: 100vh;
  }
  
  /* 减少底部导航高度 */
  .dock-nav {
    height: 50px;
  }
  
  body {
    padding-bottom: 50px;
  }
}

/* ========== 打印优化 ========== */

@media print {
  /* 隐藏导航和按钮 */
  nav,
  .dock-nav,
  button,
  .no-print {
    display: none !important;
  }
  
  /* 白色背景 */
  body {
    background: white !important;
    color: black !important;
  }
  
  /* 内容全宽 */
  .container,
  .page-content {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ========== 无障碍优化 ========== */

@media (max-width: 768px) {
  /* 焦点可见性增强 */
  :focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
  }
  
  /* 跳过链接 */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #667eea;
    color: white;
    padding: 8px;
    z-index: 10000;
  }
  
  .skip-link:focus {
    top: 0;
  }
}

/* ========== 性能优化 ========== */

@media (max-width: 768px) {
  /* 减少动画 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* 触摸反馈 */
  *:active {
    opacity: 0.7;
  }
}