/**
 * Grayhub 移动端优化 CSS
 * Version: 2.1.0
 * 日期: 2025-12-24
 * 说明: 全面的移动端适配，支持多系统、多浏览器、多机型
 * 更新: 增强触摸交互、优化性能、确保桌面端不受影响
 */

/* ========================================
   CSS Reset & 基础优化
   ======================================== */

/* 跨浏览器兼容性前缀 */
@media screen and (max-width: 768px) {
  /* ===== Safari/iOS 关键修复：强制显示移动端元素 ===== */
  .mobile-nav-header,
  .mobile-menu-container,
  .mobile-tab-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .mobile-menu-page.active {
    display: flex !important;
    visibility: visible !important;
    flex-direction: column !important;
  }
  .mobile-menu-list {
    display: block !important;
    visibility: visible !important;
  }
  .mobile-menu-item {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
  }
  /* ===== Safari/iOS 关键修复：强制隐藏桌面端元素 ===== */
  .sidebar,
  .sidebar-overlay,
  .main-content,
  .chat-panel,
  .chat-container,
  .desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* 防止双击缩放 - 全浏览器兼容 */
  * {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* 优化滚动 - iOS/Android 兼容 */
  html {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  body {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 滚动条优化 - WebKit浏览器 */
  ::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
  }

  ::-webkit-scrollbar-track {
    background: transparent !important;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.3) !important;
    border-radius: 3px !important;
  }

  /* Firefox 滚动条 */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
  }

  /* 输入框优化 - 防止iOS缩放 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
  }

  /* 按钮基础样式 */
  button,
  .btn,
  [role="button"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  /* 禁用文本选择 (可选元素除外) */
  .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

/* ========================================
   触摸目标优化 - 符合WCAG标准 (44x44px)
   ======================================== */
@media screen and (max-width: 768px) {
  button:not(.btn-icon):not(.switch),
  .btn:not(.btn-sm),
  a.btn,
  [onclick]:not(tr):not(td) {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 小按钮特例 */
  .btn-sm,
  .btn-icon,
  .action-btns .btn {
    min-height: 36px;
  }

  /* 链接间距 */
  nav a,
  .menu a,
  .sidebar a {
    padding: 12px 16px;
    display: block;
  }
}

/* ========================================
   动画性能优化
   ======================================== */
@media screen and (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;
    }
  }

  /* 交互元素优化动画时长（不影响横幅滚动动画） */
  .btn,
  .modal,
  .modal-content,
  .sidebar,
  .sidebar-overlay,
  .dropdown,
  .menu,
  .tooltip {
    transition-duration: 0.15s !important;
  }

  /* 使用GPU加速的属性 */
  .sidebar,
  .modal,
  .modal-content,
  .sidebar-overlay {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* 横幅滚动动画 - 移动端适中速度 */
  .ticker-track {
    animation: ticker 45s linear infinite !important;
  }

  .payment-scroll {
    animation: scroll-logos 45s linear infinite !important;
  }
}

/* ========================================
   页面容器通用优化
   ======================================== */
@media screen and (max-width: 768px) {
  .page-container {
    padding: 12px !important;
    max-width: 100% !important;
  }

  .page-title {
    font-size: 1.3rem !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .page-desc {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }

  .card {
    padding: 14px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .card + .card {
    margin-top: 12px !important;
  }
}

/* 超小屏幕 (iPhone SE, 小型Android) */
@media screen and (max-width: 380px) {
  .page-container {
    padding: 8px !important;
  }

  .page-title {
    font-size: 1.15rem !important;
  }

  .card {
    padding: 10px !important;
    border-radius: 10px !important;
  }
}

/* ========================================
   主页面 /me/index.html 移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  /* 移动端顶部栏 */
  .mobile-header {
    height: 52px !important;
    padding: 0 !important;
    background: rgba(20, 20, 20, 0.98) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
  }

  .mobile-header-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #fff) !important;
    flex: 1 !important;
    text-align: center !important;
    margin-right: 52px !important;
    pointer-events: none !important;
  }

  /* 菜单按钮 - iOS Safari 兼容修复 */
  .menu-btn,
  #mobileMenuBtn,
  .mobile-header .menu-btn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    position: relative !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    touch-action: manipulation !important;
  }

  .menu-btn:active,
  #mobileMenuBtn:active,
  .mobile-header .menu-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .menu-btn svg,
  #mobileMenuBtn svg,
  .mobile-header .menu-btn svg {
    width: 24px !important;
    height: 24px !important;
    fill: var(--text-primary, #fff) !important;
    pointer-events: none !important;
  }

  /* 主内容区域 - Safari 兼容：在移动端完全隐藏 */
  .main-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 侧边栏强制隐藏 - Safari 兼容 */
  .sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .sidebar.open {
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
    box-shadow: 4px 0 25px rgba(0, 0, 0, 0.5) !important;
  }

  /* 折叠状态在移动端保持隐藏 */
  .sidebar.collapsed {
    width: 85vw !important;
    min-width: 260px !important;
    -webkit-transform: translateX(-100%) !important;
    -ms-transform: translateX(-100%) !important;
    transform: translateX(-100%) !important;
  }

  .sidebar.collapsed.open {
    -webkit-transform: translateX(0) !important;
    -ms-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }

  /* 侧边栏遮罩层 */
  .sidebar-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10000 !important; /* 高于顶部栏 */
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-transition: opacity 0.25s !important;
    transition: opacity 0.25s !important;
  }

  .sidebar-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 搜索框 */
  .sidebar .search-box,
  .sidebar-header .search-box {
    margin: 8px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* 聊天列表项 */
  .chat-item {
    padding: 12px 14px !important;
    gap: 12px !important;
    min-height: 64px !important;
  }

  .chat-avatar {
    width: 46px !important;
    height: 46px !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
  }

  .chat-name {
    font-size: 15px !important;
  }

  .chat-preview {
    font-size: 13px !important;
    -webkit-line-clamp: 1 !important;
  }

  .chat-time {
    font-size: 11px !important;
  }

  /* 底部标签栏 */
  .tab-bar {
    height: 56px !important;
    padding: 4px 8px !important;
    padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
  }

  .tab-item {
    padding: 6px 12px !important;
    font-size: 10px !important;
    min-width: 60px !important;
  }

  .tab-item svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* FAB按钮 */
  .fab-button {
    bottom: 70px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 100 !important;
  }

  /* 隐藏桌面端元素 */
  .resize-handle,
  .collapsed-icons {
    display: none !important;
  }

  /* app-container 布局 */
  .app-container {
    flex-direction: column !important;
  }
}

/* ========================================
   Bot 页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  /* 统计卡片 */
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 12px 8px !important;
  }

  .stat-value {
    font-size: 1.3rem !important;
  }

  .stat-label {
    font-size: 11px !important;
  }

  /* 群组卡片 */
  .group-card {
    padding: 12px !important;
  }

  .group-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .group-name {
    font-size: 14px !important;
  }

  /* 设置面板 */
  .setting-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .setting-row > *:last-child {
    align-self: flex-end !important;
  }

  /* 信息中心布局 */
  .messages-container {
    flex-direction: column !important;
    height: calc(100vh - 120px) !important;
  }

  .groups-sidebar {
    width: 100% !important;
    max-height: 35vh !important;
    min-height: 140px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
  }

  .messages-main {
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* 标签过滤器横向滚动 */
  .tag-filter,
  .tag-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 4px !important;
  }

  .tag-filter::-webkit-scrollbar,
  .tag-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tag-tab,
  .tag-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ========================================
   表格卡片化布局 (收银台等页面)
   ======================================== */
@media screen and (max-width: 768px) {
  /* 通用表格卡片化 */
  .card table,
  table.data-table {
    display: block !important;
  }

  .card thead,
  table.data-table thead {
    display: none !important;
  }

  .card tbody,
  table.data-table tbody {
    display: block !important;
  }

  .card tbody tr,
  table.data-table tbody tr {
    display: block !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    background: var(--bg-secondary, #141414) !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
  }

  .card tbody td,
  table.data-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06)) !important;
    gap: 12px !important;
  }

  .card tbody td:last-child,
  table.data-table tbody td:last-child {
    border-bottom: none !important;
    padding-top: 12px !important;
  }

  .card tbody td::before,
  table.data-table tbody td::before {
    content: attr(data-label);
    font-weight: 600 !important;
    color: var(--text-secondary, #8a8a8a) !important;
    font-size: 12px !important;
    min-width: 70px !important;
    flex-shrink: 0 !important;
  }

  /* 链接列自动换行 */
  td[data-label*="链接"] a,
  .link {
    word-break: break-all !important;
    font-size: 12px !important;
    max-width: 100% !important;
  }

  /* 操作按钮组 */
  .action-btns,
  td[data-label="操作"] > div {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .action-btns .btn,
  .action-btns button {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: calc(50% - 3px) !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }
}

/* ========================================
   模态框优化
   ======================================== */
@media screen and (max-width: 768px) {
  .modal,
  .modal-overlay {
    padding: 8px !important;
  }

  .modal-content {
    margin: 0 auto !important;
    max-height: calc(100vh - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .modal-header {
    padding: 14px 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: inherit !important;
    z-index: 1 !important;
  }

  .modal-header h2,
  .modal-header h3 {
    font-size: 1.1rem !important;
  }

  .modal-body {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-footer {
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 8px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
  }

  .modal-footer .btn,
  .modal-footer button {
    width: 100% !important;
  }
}

/* ========================================
   表单优化
   ======================================== */
@media screen and (max-width: 768px) {
  .form-group {
    margin-bottom: 14px !important;
  }

  .form-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .form-input,
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .form-hint {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* 按钮组垂直排列 */
  .btn-group {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .btn-group .btn {
    width: 100% !important;
  }

  /* 行内表单 */
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ========================================
   使用指南页面优化
   ======================================== */
@media screen and (max-width: 768px) {
  .guide-section {
    margin-bottom: 10px !important;
  }

  .guide-header {
    padding: 12px 14px !important;
  }

  .guide-title {
    font-size: 0.9rem !important;
    gap: 10px !important;
  }

  .guide-title span {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
  }

  .guide-content.expanded {
    padding: 0 14px 16px 14px !important;
  }

  .code-block {
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
  }

  .command-table {
    font-size: 0.7rem !important;
  }

  .command-table th,
  .command-table td {
    padding: 6px 8px !important;
  }

  .command-table code {
    font-size: 0.65rem !important;
    padding: 2px 4px !important;
  }
}

/* ========================================
   聊天消息优化
   ======================================== */
@media screen and (max-width: 768px) {
  .chat-messages,
  .chat-container {
    padding: 10px !important;
  }

  .chat-message {
    max-width: 85% !important;
  }

  .chat-message-bubble {
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 16px !important;
  }

  .chat-message-sender {
    font-size: 11px !important;
  }

  .chat-message-time {
    font-size: 10px !important;
  }

  .chat-message-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }

  .chat-input-area {
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .chat-input-area textarea,
  .chat-input {
    font-size: 15px !important;
    min-height: 40px !important;
    border-radius: 20px !important;
  }

  .btn-send {
    min-width: 60px !important;
    height: 40px !important;
  }
}

/* ========================================
   iOS Safe Area 支持
   ======================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media screen and (max-width: 768px) {
    .tab-bar,
    .chat-footer,
    .chat-input-area,
    .bottom-actions,
    .modal-footer {
      padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    .mobile-header {
      padding-top: env(safe-area-inset-top) !important;
      height: calc(52px + env(safe-area-inset-top)) !important;
    }

    .main-content {
      padding-top: calc(52px + env(safe-area-inset-top)) !important;
    }

    .sidebar {
      padding-top: env(safe-area-inset-top) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
  }
}

/* ========================================
   横屏模式优化
   ======================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .mobile-header {
    height: 44px !important;
  }

  .main-content {
    padding-top: 44px !important;
  }

  .sidebar {
    max-width: 280px !important;
  }

  .tab-bar {
    height: 44px !important;
  }

  .modal-content {
    max-height: calc(100vh - 20px) !important;
  }

  .groups-sidebar {
    max-height: 30vh !important;
  }
}

/* ========================================
   暗色/亮色主题适配
   ======================================== */
@media screen and (max-width: 768px) {
  [data-theme="dark"] .mobile-header,
  :root:not([data-theme="light"]) .mobile-header {
    background: rgba(10, 10, 10, 0.9) !important;
  }

  [data-theme="light"] .mobile-header {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  }

  [data-theme="dark"] .sidebar-overlay,
  :root:not([data-theme="light"]) .sidebar-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
  }

  [data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
  }
}

/* ========================================
   特定设备适配
   ======================================== */

/* iPhone X 系列及以上 (带刘海) */
@media screen and (max-width: 428px) and (min-height: 800px) {
  .mobile-header {
    padding-top: 44px !important;
    height: 96px !important;
  }

  .main-content {
    padding-top: 96px !important;
  }
}

/* 折叠屏展开模式 */
@media screen and (min-width: 600px) and (max-width: 768px) {
  .sidebar {
    max-width: 320px !important;
  }

  .stats-row {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ========================================
   辅助功能
   ======================================== */
@media screen and (max-width: 768px) {
  /* 高对比度模式 */
  @media (prefers-contrast: high) {
    .btn,
    .card,
    .modal-content {
      border-width: 2px !important;
    }
  }

  /* 减少运动模式 */
  @media (prefers-reduced-motion: reduce) {
    .sidebar,
    .sidebar-overlay,
    .modal-content {
      transition: none !important;
    }
  }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
  .mobile-header,
  .sidebar-overlay,
  .fab-button,
  .tab-bar,
  .sidebar {
    display: none !important;
  }

  .main-content {
    padding-top: 0 !important;
  }
}

/* ========================================
   浏览器特定修复
   ======================================== */

/* Samsung Internet 浏览器修复 */
@supports (-webkit-appearance:none) and (stroke-color:transparent) {
  @media screen and (max-width: 768px) {
    input, textarea, select {
      -webkit-appearance: none !important;
    }
  }
}

/* Firefox 移动端修复 */
@-moz-document url-prefix() {
  @media screen and (max-width: 768px) {
    * {
      scrollbar-width: thin;
    }

    input, textarea {
      font-size: 16px !important;
    }
  }
}

/* ========================================
   登录页面移动端优化
   ======================================== */
@media screen and (max-width: 480px) {
  .login-card {
    padding: 20px 16px !important;
    margin: 12px !important;
    border-radius: 16px !important;
  }

  .login-card .logo {
    display: none !important; /* 移动端隐藏Logo */
  }

  .login-card .title {
    font-size: 1.4rem !important;
    margin-bottom: 8px !important;
  }

  .login-card .subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
  }

  .login-card .form-group {
    margin-bottom: 14px !important;
  }

  .login-card .form-group label {
    font-size: 13px !important;
  }

  .login-card .form-group input {
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .login-card .btn-login {
    padding: 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .social-login {
    gap: 10px !important;
    flex-direction: column !important;
  }

  .social-login .btn-social {
    width: 100% !important;
    justify-content: center !important;
  }

  .back-home {
    top: 10px !important;
    left: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ========================================
   访客页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  /* 网关/支付页面 */
  .gateway-container,
  .payment-container {
    padding: 16px !important;
    max-width: 100% !important;
  }

  .gateway-card,
  .payment-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .amount-display {
    font-size: 2rem !important;
  }

  .qr-code-container {
    padding: 16px !important;
  }

  .qr-code-container img,
  .qr-code-container canvas {
    max-width: 200px !important;
    max-height: 200px !important;
  }
}

/* ========================================
   下载/申请页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .download-section,
  .apply-section {
    padding: 40px 16px !important;
  }

  .download-card,
  .apply-card {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }

  .download-title,
  .apply-title {
    font-size: 1.5rem !important;
  }

  .download-desc,
  .apply-desc {
    font-size: 0.9rem !important;
  }

  .download-buttons,
  .apply-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .download-buttons .btn,
  .apply-buttons .btn {
    width: 100% !important;
  }
}

/* ========================================
   底部安全区域 - 全局
   ======================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .modal-footer,
  .chat-input-area,
  .bottom-actions,
  .tab-bar,
  .footer-actions {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* ========================================
   小米/华为等国产手机适配
   ======================================== */
@media screen and (max-width: 768px) {
  /* 部分国产浏览器不支持CSS变量的回退 */
  .btn {
    background-color: #3b82f6;
    background-color: var(--color-primary, #3b82f6);
  }

  .card {
    background-color: #141414;
    background-color: var(--bg-secondary, #141414);
  }

  /* 确保中文字体显示正常 */
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
                 Helvetica, Arial, sans-serif;
  }
}

/* ========================================
   超小屏幕极限优化 (iPhone SE 1代等)
   ======================================== */
@media screen and (max-width: 320px) {
  .page-container {
    padding: 8px !important;
  }

  .page-title {
    font-size: 1rem !important;
  }

  .card {
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .stat-card {
    padding: 8px 4px !important;
  }

  .stat-value {
    font-size: 1.1rem !important;
  }

  .stat-label {
    font-size: 10px !important;
  }

  .modal-content {
    margin: 4px !important;
    padding: 12px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px !important;
    font-size: 14px !important;
  }
}

/* ========================================
   通用页面头部移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  /* 页面头部 */
  .header {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .page-title {
    font-size: 1.25rem !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .page-title svg {
    width: 24px !important;
    height: 24px !important;
  }

  .page-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* 操作栏 */
  .action-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .action-bar .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 状态标签 */
  .status-container {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .status-badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

/* ========================================
   Bot资料页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .profile-preview {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .profile-avatar {
    width: 64px !important;
    height: 64px !important;
    font-size: 1.75rem !important;
  }

  .profile-name {
    font-size: 1.25rem !important;
  }

  .profile-stats {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .preview-box {
    padding: 16px !important;
  }
}

/* ========================================
   Bot员工/关键词页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .employee-list,
  .keyword-list {
    gap: 10px !important;
  }

  .employee-item,
  .keyword-item {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .employee-item .actions,
  .keyword-item .actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

  .add-form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .add-form input {
    width: 100% !important;
  }

  .add-form .btn {
    width: 100% !important;
  }
}

/* ========================================
   网关/API产品页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .product-card {
    padding: 16px !important;
  }

  .product-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .product-title {
    font-size: 1rem !important;
  }

  .product-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .product-actions .btn {
    width: 100% !important;
  }

  /* API配置表单 */
  .config-section {
    padding: 16px !important;
  }

  .config-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .config-label {
    min-width: auto !important;
  }
}

/* ========================================
   二维码工具页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .qr-container {
    padding: 16px !important;
  }

  .qr-display {
    max-width: 200px !important;
    margin: 0 auto !important;
  }

  .qr-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .qr-actions .btn {
    width: 100% !important;
  }

  .qr-input-group {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .qr-input-group input {
    width: 100% !important;
  }
}

/* ========================================
   我的小站页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .site-preview {
    padding: 16px !important;
  }

  .site-url {
    font-size: 12px !important;
    word-break: break-all !important;
  }

  .site-settings {
    gap: 16px !important;
  }

  .setting-group {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .setting-group label {
    min-width: auto !important;
  }
}

/* ========================================
   支付通道页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .channel-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .channel-card {
    padding: 16px !important;
  }

  .channel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .channel-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .channel-status {
    align-self: flex-start !important;
  }

  .channel-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .channel-actions .btn {
    width: 100% !important;
  }
}

/* ========================================
   会话链接页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .link-list {
    gap: 10px !important;
  }

  .link-item {
    padding: 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .link-url {
    font-size: 12px !important;
    word-break: break-all !important;
    max-width: 100% !important;
  }

  .link-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .link-actions .btn {
    flex: 1 !important;
    min-width: calc(50% - 3px) !important;
    justify-content: center !important;
  }
}

/* ========================================
   订单页面移动端优化
   ======================================== */
@media screen and (max-width: 768px) {
  .order-filters {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .order-filters select,
  .order-filters input {
    width: 100% !important;
  }

  .order-list {
    gap: 12px !important;
  }

  .order-item {
    padding: 14px !important;
  }

  .order-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .order-id {
    font-size: 12px !important;
  }

  .order-amount {
    font-size: 1.25rem !important;
  }

  .order-details {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .order-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .order-actions .btn {
    width: 100% !important;
  }
}

/* ========================================
   通用iframe内容页面
   ======================================== */
@media screen and (max-width: 768px) {
  .content-frame {
    border: none !important;
    border-radius: 0 !important;
  }

  /* 确保iframe内容可滚动 */
  iframe {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ========================================
   底部固定按钮优化
   ======================================== */
@media screen and (max-width: 768px) {
  .fixed-bottom-actions {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-secondary, #141414) !important;
    padding: 12px 16px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.1)) !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 10px !important;
  }

  .fixed-bottom-actions .btn {
    flex: 1 !important;
  }

  /* 为底部固定按钮预留空间 */
  .has-fixed-bottom {
    padding-bottom: 80px !important;
  }
}

/* ========================================
   空状态和加载状态
   ======================================== */
@media screen and (max-width: 768px) {
  .empty-state {
    padding: 40px 20px !important;
  }

  .empty-state svg,
  .empty-state img {
    max-width: 120px !important;
  }

  .empty-state h3 {
    font-size: 1.1rem !important;
  }

  .empty-state p {
    font-size: 0.875rem !important;
  }

  .loading-spinner {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ========================================
   通知和提示优化
   ======================================== */
@media screen and (max-width: 768px) {
  .toast,
  .notification {
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
  }

  .toast-top {
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  }

  .toast-bottom {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ========================================
   增强触摸交互优化
   ======================================== */
@media screen and (max-width: 768px) {
  /* 所有可点击元素增强触摸反馈 */
  button:not(:disabled),
  .btn:not(:disabled),
  a:not([href^="#"]),
  [role="button"],
  [onclick],
  .clickable {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.15);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* 触摸反馈动画 */
  button:active:not(:disabled),
  .btn:active:not(:disabled),
  a:active,
  [role="button"]:active,
  [onclick]:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }

  /* 列表项触摸优化 */
  .list-item,
  .card-item,
  .menu-item,
  .chat-item {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    touch-action: manipulation;
  }

  .list-item:active,
  .card-item:active,
  .menu-item:active,
  .chat-item:active {
    background: var(--bg-hover, rgba(255, 255, 255, 0.1)) !important;
    transform: scale(0.99);
    transition: all 0.1s ease;
  }

  /* 输入框触摸优化 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    -webkit-tap-highlight-color: rgba(88, 166, 255, 0.2);
    touch-action: manipulation;
  }

  /* 下拉菜单触摸优化 */
  .dropdown-menu,
  .select-menu {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    max-height: 60vh;
  }

  /* 模态框触摸优化 */
  .modal,
  .dialog {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 滑动操作优化 */
  .swipeable {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* 防止意外滚动 */
  .no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
}

/* ========================================
   性能优化 - 减少重绘和回流
   ======================================== */
@media screen and (max-width: 768px) {
  /* 使用 transform 和 opacity 进行动画（GPU加速） */
  .slide-in,
  .fade-in,
  .scale-in {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* 减少动画复杂度 */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 优化图片加载 */
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* 懒加载占位符 */
  img[loading="lazy"] {
    background: var(--bg-tertiary, #1a1a1a);
  }
}

/* ========================================
   表单增强 - 移动端专用
   ======================================== */
@media screen and (max-width: 768px) {
  /* 表单容器 */
  .form-container {
    padding: 16px;
  }

  /* 表单组间距 */
  .form-group {
    margin-bottom: 20px;
  }

  /* 标签样式 */
  .form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: var(--text-primary, #fff);
  }

  /* 输入框统一样式 */
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px !important; /* 防止iOS自动缩放 */
    min-height: 48px; /* 触摸目标大小 */
    border: 1.5px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    background: var(--bg-secondary, #141414);
    color: var(--text-primary, #fff);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: all 0.2s ease;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--accent, #5d9ed8);
    box-shadow: 0 0 0 3px rgba(93, 158, 216, 0.2);
  }

  /* 文本域 */
  .form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
  }

  /* 复选框和单选框 */
  .form-checkbox,
  .form-radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--border, rgba(255, 255, 255, 0.2));
    border-radius: 4px;
    background: var(--bg-secondary, #141414);
    cursor: pointer;
    position: relative;
    margin-right: 8px;
  }

  .form-checkbox:checked,
  .form-radio:checked {
    background: var(--accent, #5d9ed8);
    border-color: var(--accent, #5d9ed8);
  }

  .form-radio {
    border-radius: 50%;
  }

  /* 开关组件 */
  .form-switch {
    width: 44px;
    height: 24px;
    min-width: 44px;
    min-height: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--bg-tertiary, #1a1a1a);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
  }

  .form-switch:checked {
    background: var(--accent, #5d9ed8);
  }

  .form-switch::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
  }

  .form-switch:checked::after {
    transform: translateX(20px);
  }

  /* 按钮组 */
  .btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
  }

  .btn-group .btn {
    flex: 1;
  }

  /* 表单提示 */
  .form-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    margin-top: 6px;
    line-height: 1.4;
  }

  .form-error {
    font-size: 12px;
    color: var(--danger, #ef4444);
    margin-top: 6px;
  }
}

/* ========================================
   表格优化 - 移动端横向滚动
   ======================================== */
@media screen and (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin: 0 -16px;
    padding: 0 16px;
  }

  table {
    min-width: 100%;
    font-size: 14px;
  }

  th,
  td {
    padding: 12px 8px;
    white-space: nowrap;
  }

  th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* 表格卡片视图（可选） */
  .table-card-view {
    display: none;
  }

  @media (max-width: 480px) {
    .table-desktop {
      display: none;
    }

    .table-card-view {
      display: block;
    }
  }
}

/* ========================================
   安全区域适配 - iOS刘海屏
   ======================================== */
@media screen and (max-width: 768px) {
  /* 顶部安全区域 */
  .safe-area-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* 底部安全区域 */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 左侧安全区域 */
  .safe-area-left {
    padding-left: env(safe-area-inset-left, 0px);
  }

  /* 右侧安全区域 */
  .safe-area-right {
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* 固定顶部栏适配 */
  .fixed-top {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* 固定底部栏适配 */
  .fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}