/**
 * 灵犀引擎 - 移动端响应式样式
 * 
 * 适配手机屏幕：
 * - 底部 Tab 导航（替代侧边栏）
 * - 聊天列表/对话页全屏
 * - 安全区域适配（iPhone 刘海/底部横条）
 * - 键盘弹出时自动调整
 * - 触摸优化（更大的点击区域）
 */

/* ═══ 安全区域变量 ═══ */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --mobile-nav-height: 56px;
  --mobile-header-height: 48px;
}

/* ═══ 移动端检测：max-width 768px ═══ */
@media (max-width: 768px) {

  /* ── 全局重置 ── */
  body {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 顶部导航栏 ── */
  .topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-header-height) + var(--safe-top));
    padding-top: var(--safe-top);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .topnav .logo {
    font-size: 16px;
  }

  .topnav select {
    max-width: 120px;
    font-size: 11px;
  }

  .topnav .spacer {
    flex: 1;
  }

  /* ── 主区域布局 ── */
  .main-area {
    position: fixed;
    top: calc(var(--mobile-header-height) + var(--safe-top));
    bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── 侧边栏 → 全屏抽屉 ── */
  .sidebar {
    position: fixed;
    top: calc(var(--mobile-header-height) + var(--safe-top));
    bottom: calc(var(--mobile-nav-height) + var(--safe-bottom));
    left: 0;
    width: 85vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 900;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 899;
  }

  .sidebar-overlay.active {
    display: block;
  }

  /* ── 聊天区域全屏 ── */
  .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    padding-bottom: 8px;
  }

  /* ── 消息气泡优化 ── */
  .message {
    max-width: 85%;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
  }

  .message.own {
    border-bottom-right-radius: 4px;
  }

  .message.other {
    border-bottom-left-radius: 4px;
  }

  /* ── 输入区域 ── */
  .chat-input-area {
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }

  .chat-input-area textarea,
  .chat-input-area input[type="text"] {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 15px;
    resize: none;
  }

  .chat-input-area button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* ── 底部 Tab 导航 ── */
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bg2, #1a1a2e);
    border-top: 1px solid var(--border, #333);
    z-index: 1000;
  }

  .mobile-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--text3, #888);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav .nav-item.active {
    color: var(--accent, #4a9eff);
  }

  .mobile-nav .nav-item .nav-icon {
    font-size: 22px;
    line-height: 1;
  }

  /* ── 桌面端导航隐藏 ── */
  .nav-tab {
    display: none !important;
  }

  /* ── 面板切换 ── */
  .content-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 模态框全屏 ── */
  .modal-overlay {
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  /* ── 市场/工具面板 ── */
  .listing-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  /* ── Agent 卡片 ── */
  .agent-card {
    padding: 14px;
  }

  /* ── 触摸优化 ── */
  button, .btn-sm, a {
    min-height: 44px;
    min-width: 44px;
  }

  /* ── 隐藏桌面端专属元素 ── */
  .desktop-only {
    display: none !important;
  }

  /* ── 键盘弹出适配 ── */
  .keyboard-up .chat-input-area {
    padding-bottom: 8px;
  }

  .keyboard-up .mobile-nav {
    display: none;
  }
}

/* ═══ 超小屏幕（< 375px）═══ */
@media (max-width: 375px) {
  .topnav .logo span {
    display: none;
  }

  .message {
    max-width: 90%;
    font-size: 14px;
  }

  .mobile-nav .nav-item {
    font-size: 9px;
  }
}

/* ═══ 横屏适配 ═══ */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-nav {
    height: 44px;
  }

  .mobile-nav .nav-item .nav-icon {
    font-size: 18px;
  }

  .mobile-nav .nav-item span:last-child {
    display: none;
  }

  .topnav {
    height: 36px;
  }
}

/* ═══ 移动端专属组件 ═══ */

/* 引擎状态指示器 */
.engine-status {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
}

@media (max-width: 768px) {
  .engine-status {
    display: flex;
  }
}

.engine-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.engine-status.running .dot {
  background: #4caf50;
  animation: pulse 2s infinite;
}

.engine-status.stopped .dot {
  background: #f44336;
}

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

/* 下拉刷新指示器 */
.pull-refresh {
  display: none;
  text-align: center;
  padding: 12px;
  color: var(--text3, #888);
  font-size: 13px;
}

@media (max-width: 768px) {
  .pull-refresh {
    display: block;
  }
}

/* 滑动删除 */
.swipe-delete {
  position: relative;
  overflow: hidden;
}

.swipe-delete .delete-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 72px;
  background: #f44336;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.2s;
}

.swipe-delete.swiped .delete-btn {
  transform: translateX(0);
}