/* ============================================
   AI-email v0.0.2 - 移动端适配样式
   主要优化：手机/平板访问体验
   ============================================ */

/* ============================================
   响应式断点定义
   ============================================ */
/*
   - 手机：小于 768px
   - 平板：768px - 1366px（与 tablet-ipad.css 一致，含 iPad Air 横屏）
   - 桌面：大于 1366px（纯平板规则）；窄屏桌面仍可能命中 max-width:1200 等
*/

/* ============================================
   手机端适配 (< 768px)
   ============================================ */
@media screen and (max-width: 767px) {
  
  /* ----------- 移动端顶部导航栏 ----------- */
  .mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-sidebar);
    color: var(--text-inverse);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 56px;
  }
  
  .mobile-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
  }
  
  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--text-inverse);
    cursor: pointer;
  }
  
  .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
  }
  
  .mobile-back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--text-inverse);
    cursor: pointer;
  }
  
  /* ----------- 隐藏桌面端侧边栏 ----------- */
  .sidebar {
    display: none;
  }
  
  /* ----------- 移动端侧边栏（抽屉式） ----------- */
  .mobile-sidebar {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--bg-sidebar);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  
  .mobile-sidebar.active {
    transform: translateX(0);
  }
  
  .mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 250;
  }
  
  .mobile-sidebar-overlay.active {
    display: block;
  }
  
  .mobile-sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .mobile-sidebar-logo {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
  }
  
  .mobile-sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--text-inverse);
    cursor: pointer;
  }
  
  .mobile-nav {
    padding: 12px 0;
  }
  
  .mobile-nav-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
  }
  
  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: var(--color-primary);
    background: rgba(134, 188, 37, 0.1);
    border-left-color: var(--color-primary);
  }
  
  .mobile-nav-icon {
    width: 24px;
    height: 24px;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-nav-label {
    font-size: 16px;
  }
  
  /* ----------- 主内容区调整 ----------- */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 58px 10px max(12px, env(safe-area-inset-bottom, 12px)) 10px !important;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 防止 flex 子项按内容最小宽度把整页撑出视口（统计看板等） */
  .app-container {
    max-width: 100%;
    overflow-x: hidden;
    min-width: 0;
  }
  
  /* ----------- 统计卡片移动端 ----------- */
  .stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  
  .stat-card {
    padding: 12px 10px !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .stat-content {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* 统计看板整页约束 */
  .dashboard-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dashboard-page .charts-section {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 12px !important;
    overflow-x: hidden;
  }

  .dashboard-page .charts-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .dashboard-page .chart-panel {
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .dashboard-page .chart-container,
  .dashboard-page .chart-container-pie {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .dashboard-page .chart-container:not(.chart-container-pie) canvas {
    max-width: 100% !important;
  }

  .dashboard-page .pie-chart-surface {
    max-width: 100% !important;
  }
  
  .stat-icon {
    width: 40px !important;
    height: 40px !important;
  }
  
  .stat-title {
    font-size: 13px !important;
  }
  
  .stat-value {
    font-size: 24px !important;
  }
  
  /* 隐藏平板专用元素 */
  .email-list-expand-btn {
    display: none !important;
  }

  /* ----------- 移动端头部邮件列表按钮 ----------- */
  .mobile-email-list-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: var(--text-inverse);
    cursor: pointer;
  }
  
  .mobile-email-list-btn svg {
    width: 22px;
    height: 22px;
  }
  
  .mobile-email-list-btn.active {
    background: var(--color-primary);
  }
  
  /* ----------- 邮件列表页面移动端布局 ----------- */
  .main-content:has(.email-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    /* 避免底部被安全区或滚动条裁切 */
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .email-page {
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  
  /* 邮件列表面板 - 移动端改为右侧抽屉 */
  .email-list-panel {
    position: fixed !important;
    top: 56px !important;
    right: 0 !important;
    left: auto !important;
    width: 85% !important;
    max-width: 320px !important;
    height: calc(100vh - 56px) !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    z-index: 180 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3) !important;
  }
  
  .email-list-panel.active {
    transform: translateX(0) !important;
  }
  
  .email-list {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }
  
  /* 邮件列表遮罩层 */
  .email-list-overlay {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 170;
  }
  
  .email-list-overlay.active {
    display: block;
  }
  
  .email-list-controls {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px !important;
  }
  
  .email-list-controls .control-group {
    flex: 1;
    min-width: 100px;
  }
  
  .email-list-controls select {
    width: 100%;
  }
  
  /* ----------- 邮件详情面板移动端 ----------- */
  .email-detail-panel {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 与桌面一致：AI 助手不超过详情区高度的 50% */
  .email-detail-panel > #emailDetailContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
  }

  /* 邮件正文与 AI 各占约一半详情高度（约为先前过严上限的大致 2 倍），区内滚动 */
  #emailDetailContent > .email-content-area {
    flex: 1 1 50% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: hidden !important;
  }

  #emailDetailContent > .ai-assistant-zone {
    flex: 0 1 50% !important;
    max-height: 50% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    margin: 4px 8px 8px !important;
  }

  #emailDetailContent .email-content-area .email-context {
    padding: 10px 14px 8px !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  #emailDetailContent .email-detail-header-new {
    padding: 10px 12px !important;
  }

  /* 摘要只读区：保证可读，不做过低硬上限 */
  #emailDetailContent .ai-assistant-zone .ai-textarea-readonly {
    min-height: 72px !important;
    max-height: min(36dvh, 320px) !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  
  .email-detail-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  /* 邮件详情头部 */
  .email-detail-header {
    padding: 16px !important;
  }
  
  .email-detail-subject {
    font-size: 18px !important;
    line-height: 1.4;
  }
  
  .email-detail-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .email-detail-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .email-detail-actions button {
    flex: 1;
    min-width: 80px;
  }
  
  /* 邮件正文 */
  .email-detail-body {
    padding: 16px !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  
  /* ----------- AI智能助手面板移动端 ----------- */
  .ai-assistant-section {
    margin-top: 12px;
  }
  
  .ai-assistant-card {
    border-radius: 12px !important;
    margin-bottom: 12px;
  }
  
  /* AI智能助手头部 - 标题在上，按钮在下 */
  .ai-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  
  /* 标题区域 - 第一行 */
  .ai-header-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }
  
  /* AI助手标题 */
  .ai-header-left .ai-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  
  /* 隐藏标题图标 */
  .ai-header-left .ai-title-icon {
    display: none !important;
  }
  
  /* 审批按钮区域 - 第二行 */
  .ai-header-left .approval-buttons-inline {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    order: 2 !important;
  }
  
  /* 右侧操作按钮 - 移到第三行 */
  .ai-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    order: 3 !important;
  }
  
  /* 审批按钮样式 - 紧凑边框样式，与操作按钮一致 */
  .approval-buttons-inline .approval-btn {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc((100% - 16px) / 3) !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  
  /* 审批按钮悬停/激活状态 */
  .approval-buttons-inline .approval-btn:active {
    background: var(--bg-secondary) !important;
  }
  
  /* 批准按钮 - 绿色边框文字 */
  .approval-buttons-inline .approval-btn.approve {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
  }
  
  /* 驳回按钮 - 红色边框文字 */
  .approval-buttons-inline .approval-btn.reject {
    border-color: #f44336 !important;
    color: #f44336 !important;
  }
  
  /* 转审按钮 - 蓝色边框文字 */
  .approval-buttons-inline .approval-btn.forward {
    border-color: #2196f3 !important;
    color: #2196f3 !important;
  }
  
  /* 已审批状态的按钮高亮样式 */
  .approval-buttons-inline .approval-btn.approve.active {
    background: #4caf50 !important;
    color: #fff !important;
    border-color: #4caf50 !important;
    opacity: 1 !important;
  }

  .approval-buttons-inline .approval-btn.reject.active {
    background: #f44336 !important;
    color: #fff !important;
    border-color: #f44336 !important;
    opacity: 1 !important;
  }

  .approval-buttons-inline .approval-btn.forward.active {
    background: #2196f3 !important;
    color: #fff !important;
    border-color: #2196f3 !important;
    opacity: 1 !important;
  }
  
  /* 操作按钮样式 - 带边框紧凑样式 */
  .ai-header-actions > button,
  .ai-header-actions > .ai-btn {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc((100% - 16px) / 3) !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }
  
  /* 操作按钮悬停/激活状态 */
  .ai-header-actions button:active,
  .ai-header-actions .ai-btn:active {
    background: var(--bg-secondary) !important;
  }
  
  /* 操作按钮显示图标 */
  .ai-header-actions button svg,
  .ai-header-actions .ai-btn svg {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 2px !important;
  }
  
  /* 状态图标 - 紧凑样式显示在按钮内 */
  .ai-header-actions .status-icon {
    display: inline-flex !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
    border-radius: 50% !important;
    margin-right: 4px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  
  /* 未完成状态 - 灰色叉号 */
  .ai-header-actions .status-icon.pending {
    color: #9ca3af !important;
    border: 1px solid #9ca3af !important;
    background: transparent !important;
  }
  
  /* 已完成状态 - 绿色对号 */
  .ai-header-actions .status-icon.completed {
    color: #10b981 !important;
    border: 1px solid #10b981 !important;
    background: #d1fae5 !important;
  }
  
  /* 审批按钮显示小图标 */
  .approval-buttons-inline .approval-btn svg {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 2px !important;
  }
  
  /* 翻译下拉框调整 - 占2个按钮的宽度 */
  .ai-header-actions .translate-wrap {
    flex: 2 !important;
    min-width: calc((100% - 16px) / 3 * 2 + 8px) !important;
    max-width: calc((100% - 16px) / 3 * 2 + 8px) !important;
    display: flex !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .ai-header-actions .translate-wrap button,
  .ai-header-actions .translate-wrap .ai-btn {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc((100% - 8px) / 2) !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    gap: 4px !important;
    box-sizing: border-box !important;
  }

  .ai-header-actions .translate-wrap select {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc((100% - 8px) / 2) !important;
    padding: 6px 4px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    box-sizing: border-box !important;
  }
  
  /* 润色风格下拉框 - 与翻译方向样式一致 */
  .ai-footer-right .tone-select {
    font-size: 13px !important;
    padding: 6px 4px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    min-width: 60px !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }
  
  /* 移动端底部操作区按钮样式统一 */
  .ai-footer-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: space-between !important;
  }
  
  .ai-footer-right .tone-select,
  .ai-footer-right button,
  .ai-footer-right .ai-btn {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc((100% - 16px) / 3) !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    height: auto !important;
  }
  
  /* 回复按钮保持绿色主色调 */
  .ai-footer-right .ai-btn-primary {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
  }
  
  .ai-tab-content {
    padding: 10px 12px !important;
  }
  
  /* AI摘要和回复区域 */
  .ai-summary-text,
  .ai-translation-text {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  
  .ai-reply-area-inner textarea {
    min-height: 100px !important;
    max-height: min(36dvh, 280px) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  #emailDetailContent .ai-assistant-zone .ai-footer {
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }
  
  /* ----------- 邮件列表项移动端 ----------- */
  .email-item {
    padding: 10px 12px !important;
  }
  
  .email-item-header {
    flex-direction: column;
    gap: 4px;
  }
  
  .email-item-sender {
    font-size: 14px !important;
  }
  
  .email-item-time {
    font-size: 12px !important;
    color: var(--text-tertiary);
  }
  
  .email-item-subject {
    font-size: 15px !important;
    line-height: 1.4;
    margin-top: 4px;
  }
  
  .email-item-preview {
    font-size: 13px !important;
    margin-top: 4px;
  }
  
  /* ----------- 管理页面移动端 ----------- */
  .manage-page {
    padding: 0 !important;
  }
  
  .manage-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .manage-card {
    border-radius: 12px !important;
  }
  
  /* 仅横向滑动；overflow-x:auto 时部分内核会把 overflow-y 变成 auto 从而出现竖向滚动条 */
  .prompt-mail-subtabs {
    overflow-x: auto;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2px 6px !important;
    touch-action: pan-x;
  }

  .prompt-mail-subtab {
    flex-shrink: 0;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  
  .manage-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* ----------- 设置页面移动端 ----------- */
  .settings-content {
    max-width: 100% !important;
  }
  
  .settings-form {
    padding: 12px !important;
  }
  
  .form-group {
    margin-bottom: 14px !important;
  }
  
  .form-input {
    font-size: 16px !important; /* 防止iOS缩放 */
    padding: 10px 12px !important;
  }
  
  /* ----------- 页面标题移动端 ----------- */
  .page-header {
    margin-bottom: 8px !important;
  }
  
  .page-title {
    font-size: 17px !important;
  }
  
  /* ----------- 图表移动端 ----------- */
  .chart-container:not(.chart-container-pie) {
    height: 220px !important;
    padding: 8px 10px !important;
  }

  .chart-container-pie {
    height: auto !important;
    padding: 8px 10px !important;
  }

  .chart-container-pie .pie-chart-surface {
    width: min(100%, 300px) !important;
  }
  
  /* ----------- Toast提示移动端 ----------- */
  .toast {
    left: 16px !important;
    right: 16px !important;
    max-width: none !important;
    bottom: 20px !important;
  }
  
  /* ----------- 底部安全区域（适配iPhone X+） ----------- */
  .mobile-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }
}

/* ============================================
   平板横屏适配 (768px - 1366px 且 横屏)
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  /* 导航栏宽度 - 能看到文字的最小宽度 */
  :root {
    --sidebar-width: 120px;
  }

  .sidebar {
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
  }

  .main-content {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    padding: 16px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  /* 页面头部 */
  .main-content > .page-header {
    flex-shrink: 0 !important;
    margin-bottom: 12px !important;
  }

  .page-header .page-title {
    font-size: 18px !important;
    margin-bottom: 0 !important;
  }

  /* 导航栏样式 - 紧凑但显示文字 */
  .sidebar-logo {
    font-size: 14px !important;
    padding: 16px 8px !important;
    text-align: center !important;
  }

  .sidebar .nav-item {
    padding: 12px 8px !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .sidebar .nav-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 0 !important;
  }

  .nav-item .nav-label {
    font-size: 11px !important;
    display: block !important;
    text-align: center !important;
  }

  /* 隐藏移动端元素 */
  .mobile-header,
  .mobile-sidebar,
  .mobile-sidebar-overlay {
    display: none !important;
  }

  /* 统计卡片 - PC端布局 */
  .stats-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* 邮件页面布局 - 横屏左右布局，使用 flex 填充剩余空间 */
  .email-page {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* 邮件列表区域 - 铺满高度 */
  .email-list-panel {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    position: relative !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border-right: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
  }

  /* 邮件列表折叠状态 */
  .email-list-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    border-right: none !important;
    overflow: hidden !important;
  }

  .email-list-panel.collapsed .email-list-header,
  .email-list-panel.collapsed .email-list-controls,
  .email-list-panel.collapsed .email-list {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 邮件列表头部 */
  .email-list-header {
    padding: 12px 16px !important;
    flex-shrink: 0 !important;
  }

  /* 邮件列表折叠按钮 - 在头部右侧 */
  .email-list-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
  }

  .email-list-toggle:hover {
    background: var(--bg-tertiary) !important;
  }

  .email-list-toggle svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
  }

  .email-list-panel.collapsed .email-list-toggle svg {
    transform: rotate(180deg) !important;
  }

  /* 折叠展开按钮 - 垂直居中于导航栏右侧 */
  .email-list-expand-btn {
    display: none !important;
    position: fixed !important;
    left: 120px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 60px !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15) !important;
    z-index: 100 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .email-list-expand-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--text-secondary) !important;
  }

  /* 折叠时显示展开按钮 */
  body.email-list-collapsed .email-list-expand-btn {
    display: flex !important;
  }

  .email-list-panel .email-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .email-detail-panel {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .email-detail-panel > #emailDetailContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
  }

  #emailDetailContent > .email-content-area {
    flex: 1 1 50% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  #emailDetailContent > .ai-assistant-zone {
    flex: 0 1 50% !important;
    max-height: 50% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* 邮件详情头部 - 平板端紧凑 */
  .email-detail-header {
    padding: 10px 12px !important;
    flex-shrink: 0 !important;
  }

  .email-detail-subject {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .email-detail-meta {
    font-size: 12px !important;
  }

  /* 邮件内容区域 - 平板端 */
  .email-detail-content {
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  /* AI助手区域 - 平板端 */
  .ai-assistant-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: 240px !important;
    max-height: 45% !important;
  }

  .ai-assistant-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 240px !important;
  }

  /* AI标签页内容区域 */
  .ai-tab-content {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  /* 回复区域 - 平板端 */
  .ai-reply-area {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .ai-reply-area-inner textarea {
    min-height: 60px !important;
    max-height: 80px !important;
  }

  /* AI助手底部 - 确保可见 */
  .ai-footer {
    flex-shrink: 0 !important;
    padding: 6px 10px !important;
    border-top: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .ai-footer-left {
    font-size: 11px !important;
  }

  .ai-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ai-footer-right .tone-select,
  .ai-footer-right button,
  .ai-footer-right .ai-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    height: 28px !important;
  }
  
  /* 管理页面 - PC端布局 */
  .manage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* AI助手头部 - 平板端紧凑布局 */
  .ai-header {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .ai-header-left {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .ai-header-left .ai-title {
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* 隐藏AI标题图标节省空间 */
  .ai-header-left .ai-title-icon {
    display: none !important;
  }

  .ai-header-actions {
    flex: 1 !important;
    width: auto !important;
    order: 0 !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }

  /* 审批按钮区域 - 平板端紧凑样式 */
  .ai-header-left .approval-buttons-inline {
    width: auto !important;
    order: 0 !important;
    gap: 4px !important;
  }

  .approval-buttons-inline .approval-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* 操作按钮 - 平板端紧凑样式 */
  .ai-header-actions > button,
  .ai-header-actions > .ai-btn {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* 翻译下拉框 - 平板端紧凑样式 */
  .ai-header-actions .translate-wrap {
    flex: 0 0 auto !important;
    min-width: auto !important;
    max-width: none !important;
    gap: 4px !important;
  }

  .ai-header-actions .translate-wrap button,
  .ai-header-actions .translate-wrap .ai-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* AI助手底部 - 平板端样式 */
  .ai-footer {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .ai-footer-left {
    gap: 6px !important;
  }

  .ai-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
  }

  .ai-footer-right .tone-select,
  .ai-footer-right button,
  .ai-footer-right .ai-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* 回复按钮保持绿色主色调 */
  .ai-footer-right .ai-btn-primary {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
  }

  /* 回复区域 */
  .ai-reply-area-inner textarea {
    min-height: 80px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   平板竖屏适配 (768px - 1366px 且 竖屏)
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  /* 导航栏宽度 - 竖屏可以更窄 */
  :root {
    --sidebar-width: 100px;
  }

  .sidebar {
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
  }

  .main-content {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    padding: 16px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 导航栏样式 - 竖屏更紧凑 */
  .sidebar-logo {
    font-size: 12px !important;
    padding: 12px 4px !important;
    text-align: center !important;
  }

  .sidebar .nav-item {
    padding: 10px 4px !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .sidebar .nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
  }

  .nav-item .nav-label {
    font-size: 10px !important;
    display: block !important;
    text-align: center !important;
  }

  /* 隐藏移动端元素 */
  .mobile-header,
  .mobile-sidebar,
  .mobile-sidebar-overlay {
    display: none !important;
  }

  /* 邮件页面布局 - 竖屏上下布局 */
  .email-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: calc(100vh - 70px) !important;
    min-height: calc(100vh - 70px) !important;
    max-height: calc(100vh - 70px) !important;
    position: relative !important;
  }

  /* 邮件列表头部 - 竖屏 */
  .email-list-header {
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }

  .email-list-title {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .email-count {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    margin-left: auto !important;
    margin-right: 8px !important;
  }

  /* 邮件列表折叠按钮 - 竖屏 */
  .email-list-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 4px !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .email-list-toggle:hover {
    background: var(--bg-tertiary) !important;
  }

  .email-list-toggle svg {
    width: 14px !important;
    height: 14px !important;
    transition: transform 0.3s ease !important;
  }

  .email-list-panel.collapsed .email-list-toggle svg {
    transform: rotate(180deg) !important;
  }

  /* 邮件列表区域 - 竖屏顶部 */
  .email-list-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 35% !important;
    min-height: 150px !important;
    max-height: 200px !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s ease !important;
  }

  /* 邮件列表折叠状态 - 竖屏折叠到很小 */
  .email-list-panel.collapsed {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
  }

  .email-list-panel.collapsed .email-list-controls,
  .email-list-panel.collapsed .email-list {
    display: none !important;
  }

  /* 折叠展开按钮 - 竖屏显示在导航栏右侧 */
  .email-list-expand-btn {
    display: none !important;
    position: fixed !important;
    left: 100px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 60px !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15) !important;
    z-index: 100 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .email-list-expand-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--text-secondary) !important;
  }

  /* 折叠时显示展开按钮 */
  body.email-list-collapsed .email-list-expand-btn {
    display: flex !important;
  }

  .email-list-panel .email-list {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .email-detail-panel {
    flex: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 65% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .email-detail-panel > #emailDetailContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
  }

  #emailDetailContent > .email-content-area {
    flex: 1 1 50% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  #emailDetailContent > .ai-assistant-zone {
    flex: 0 1 50% !important;
    max-height: 50% !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ============================================
   桌面端 (> 1024px) - 保持原有样式
   ============================================ */
@media screen and (min-width: 1025px) {
  /* 桌面端隐藏移动端元素 */
  .mobile-header,
  .mobile-sidebar,
  .mobile-sidebar-overlay {
    display: none !important;
  }
}

/* ============================================
   横屏模式优化
   ============================================ */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .email-list-panel {
    max-height: 70vh !important;
  }
  
  .email-list {
    max-height: calc(70vh - 120px) !important;
  }
  
  .mobile-sidebar {
    width: 280px;
  }
}

/* ============================================
   触摸设备优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  /* 增大触摸目标 */
  .email-item,
  .mobile-nav-item,
  .ai-tab,
  .action-btn {
    min-height: 44px;
  }
  
  /* 按钮点击效果 */
  .email-item:active,
  .mobile-nav-item:active,
  .ai-tab:active {
    opacity: 0.7;
  }
  
  /* 移除hover效果 */
  .email-item:hover,
  .mobile-nav-item:hover,
  .ai-tab:hover {
    transform: none;
  }
}

/* ============================================
   iOS Safari 特殊优化
   ============================================ */
@supports (-webkit-touch-callout: none) {
  /* 防止iOS双击缩放 */
  body {
    touch-action: manipulation;
  }
  
  /* iOS安全区域 */
  .mobile-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  
  .main-content {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* ============================================
   深色模式支持（可选）
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* 可根据需要添加深色模式样式 */
}

/* ============================================
   打印样式（可选）
   ============================================ */
@media print {
  .mobile-header,
  .mobile-sidebar,
  .sidebar,
  .ai-assistant-section {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}