/* ========================================================================== */
/* Mobile Responsive Adaptation                                              */
/* ========================================================================== */

/* 小屏手机（< 380px） */
@media (max-width: 380px) {
  header h1 {
    font-size: 0.875rem !important;
  }

  .preset-chip {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
}

/* 平板（641px - 1024px） */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 消息区域适度 padding */
  .chat-messages {
    padding: 16px 16px !important;
  }

  /* 用户消息最大宽度 85% */
  .flex.justify-end > div {
    max-width: 85% !important;
  }

  /* 助手消息 */
  .assistant-turn-container {
    max-width: 95% !important;
  }

  /* 输入区域宽度 */
  .max-w-4xl {
    max-width: 95% !important;
  }

  /* 预设栏适度紧凑 */
  .preset-bar {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Sidebar 宽度适配 */
  .chat-sidebar {
    width: 260px !important;
  }

  /* 设置面板适配 */
  .settings-overlay {
    max-width: 90vw !important;
  }

  /* 代码块适度圆角 */
  .xbot-codeblock {
    border-radius: 10px !important;
  }
}

@media (max-width: 640px) {
  /* Header 更紧凑 */
  header {
    padding: 8px 12px !important;
  }
  header h1 {
    font-size: 1rem !important;
  }

  /* 消息区域减少 padding */
  .chat-messages {
    padding: 12px 8px !important;
  }

  /* 用户消息放宽到 92% */
  .msg-fade-in > div[class*="rounded-xl"].bg-blue-600,
  .flex.justify-end > div {
    max-width: 92% !important;
  }

  /* 助手消息放宽 */
  .assistant-turn-container {
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* 输入区域 */
  .px-4.py-3.bg-slate-800 {
    padding: 8px !important;
  }
  .max-w-4xl {
    max-width: 100% !important;
  }

  /* Tiptap 编辑器 */
  .tiptap-wrapper {
    border-radius: 10px !important;
  }
  .tiptap-wrapper .tiptap-editor {
    max-height: 120px !important;
    padding: 8px 10px !important;
  }

  /* 预设栏水平滚动 */
  .preset-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .preset-bar::-webkit-scrollbar {
    display: none;
  }
  .preset-chip {
    flex-shrink: 0;
  }

  /* 代码块 */
  .xbot-codeblock {
    border-radius: 8px !important;
  }
  .xbot-codeblock-header {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* 进度面板 */
  .progress-panel-active {
    border-radius: 12px !important;
  }

  /* SubAgent 树 */
  .subagent-node {
    margin-left: 8px !important;
  }

  /* 设置面板全屏 */
  .settings-overlay {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* AskUser 弹窗 */
  .askuser-panel {
    margin: 16px !important;
    border-radius: 16px !important;
  }

  /* Scroll to bottom 按钮 */
  .scroll-to-bottom-btn {
    bottom: 80px !important;
    right: 16px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* Cancel 按钮 */
  .cancel-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* 文件标签 */
  .file-tag {
    font-size: 11px !important;
  }

  /* Runner 卡片 */
  .runner-card {
    padding: 10px !important;
  }

  /* Sidebar toggle button on mobile */
  .chat-sidebar-toggle {
    position: fixed;
    bottom: 80px;
    left: 12px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(100, 116, 139, 0.3);
    color: var(--xbot-text-primary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 0;
  }
  .chat-sidebar-toggle:hover {
    background: rgba(51, 65, 85, 0.95);
  }
  .sidebar-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #6366f1;
    color: white;
    font-size: 9px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar overlay on mobile */
  .chat-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: flex-start;
  }
  .chat-sidebar-mobile {
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: var(--xbot-bg-primary);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
  }
}

/* ---- Sidebar Light Theme Overrides (mobile) ---- */
[data-theme="light"] .chat-sidebar-toggle {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(203, 213, 225, 0.5);
  color: #334155;
}
[data-theme="light"] .chat-sidebar-toggle:hover {
  background: rgba(226, 232, 240, 0.95);
}
[data-theme="light"] .chat-sidebar-overlay {
  background: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .chat-sidebar-mobile {
  background: #f7f5f2;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
}

/* ---- Table Mobile Responsive ---- */

@media (max-width: 640px) {
  .markdown-body .table-wrapper {
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 8px;
    border: 1px solid var(--xbot-border, #334155);
  }
  .markdown-body table {
    font-size: 0.85em;
  }
  .markdown-body thead th,
  .markdown-body tbody td {
    padding: 5px 8px;
    font-size: 0.9em;
  }
}

/* ====== Foldable Screen Support ====== */

/* 折叠屏展开状态 — 宽屏模式 */
@media (min-width: 1024px) and (max-width: 1280px) and (orientation: portrait) {
  /* 消息区域适度 padding */
  .chat-messages {
    padding: 16px 32px !important;
  }
  /* 输入区域加宽 */
  .max-w-4xl {
    max-width: 85% !important;
  }
  /* Sidebar 展开宽度 */
  .chat-sidebar {
    width: 320px !important;
  }
  /* 设置面板宽度 */
  .settings-overlay {
    max-width: 70vw !important;
  }
}

/* 折叠屏 Spanned 模式 (Dual Screen API) */
@media (spanning: single-fold-vertical) {
  .chat-messages {
    padding: 16px env(fold-left, 16px) 16px env(fold-right, 16px) !important;
  }
}

@media (spanning: single-fold-horizontal) {
  .chat-messages {
    padding: env(fold-top, 16px) 16px env(fold-bottom, 16px) !important;
  }
  /* 输入区域避免被折叠区域遮挡 */
  .px-4.py-3.bg-slate-800 {
    padding-bottom: env(fold-bottom, 12px) !important;
  }
}

/* ====== Landscape Mode ====== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Header 高度压缩 */
  header {
    padding: 4px 12px !important;
    min-height: 40px !important;
  }
  header h1 {
    font-size: 0.875rem !important;
  }
  
  /* 消息区域全高 */
  .chat-messages {
    padding: 8px 16px !important;
  }
  
  /* 输入区域紧凑 */
  .px-4.py-3.bg-slate-800 {
    padding: 6px 12px !important;
  }
  .tiptap-wrapper .tiptap-editor {
    max-height: 60px !important;
    padding: 6px 10px !important;
  }
  
  /* 预设栏紧凑 */
  .preset-bar {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .preset-chip {
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
  
  /* 进度面板半透明 */
  .progress-panel-active {
    max-height: 120px !important;
    overflow-y: auto !important;
  }
  
  /* 设置面板宽度限制 */
  .settings-overlay {
    max-height: 100vh !important;
  }
  
  /* 侧边栏宽度 */
  .chat-sidebar {
    width: 240px !important;
  }
  .chat-sidebar-mobile {
    width: 240px !important;
  }
  
  /* Scroll to bottom 按钮位置 */
  .scroll-to-bottom-btn {
    bottom: 60px !important;
  }
  
  /* Sidebar toggle */
  .chat-sidebar-toggle {
    bottom: 60px !important;
  }
  
  /* 代码块高度限制 */
  .xbot-codeblock pre {
    max-height: 200px !important;
  }
  
  /* 灯箱 toolbar 紧凑 */
  .lightbox-toolbar {
    padding: 4px 8px !important;
  }
}

/* ====== Safe Area (iPhone Notch / Home Indicator) ====== */

/* 为整个应用添加安全区域内边距 */
@supports (padding: env(safe-area-inset-top)) {
  /* Header 顶部安全距离 */
  header {
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }
  
  /* 底部输入区域安全距离 */
  .px-4.py-3.bg-slate-800 {
    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    padding-left: calc(16px + env(safe-area-inset-left)) !important;
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
  }
  
  /* Sidebar 左侧安全距离 */
  .chat-sidebar {
    padding-left: env(safe-area-inset-left) !important;
  }
  
  /* 设置面板安全距离 */
  .settings-overlay {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  }
  
  /* 侧边栏 overlay */
  .chat-sidebar-mobile {
    padding-left: env(safe-area-inset-left) !important;
  }
  
  /* 灯箱全屏模式安全距离 */
  .lightbox-overlay {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  }
  
  /* Scroll to bottom 按钮避免安全区域 */
  .scroll-to-bottom-btn {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    right: calc(16px + env(safe-area-inset-right)) !important;
  }
  
  /* Sidebar toggle 避免 safe area */
  .chat-sidebar-toggle {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
  }
  
  /* AskUser 弹窗安全距离 */
  .askuser-panel {
    margin: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)) !important;
  }
  
  /* 键盘帮助面板安全距离 */
  .keyboard-help-panel {
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  }
  
  /* 书签面板安全距离 */
  .bookmark-panel {
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
  }
}

/* ====== Viewport meta tag helper ====== */
/* 确保在 index.html 中 viewport meta 包含 viewport-fit=cover */
