/* ============================================
   iPad Mini / iPad Air 等平板（768px–1366px 逻辑宽）
   含 Air 横屏约 1180px、Pro 横屏至 1366px；原 1024 上限会导致 Air 横屏整段样式不生效
   在 mobile.css 之后加载，覆盖原平板断点样式
   ============================================ */

@media screen and (min-width: 768px) and (max-width: 1366px) {
  :root {
    --sidebar-width: 90px;
  }

  .sidebar {
    width: var(--sidebar-width) !important;
    padding: 8px 0 !important;
    box-sizing: border-box !important;
  }

  .sidebar .nav-item {
    padding: 8px 4px !important;
    gap: 2px !important;
  }

  .sidebar .nav-item .nav-icon {
    width: 22px !important;
    height: 22px !important;
    margin-bottom: 2px !important;
  }

  .sidebar .nav-item .nav-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .nav-item .nav-label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 0 1px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .nav-item.profile .nav-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .nav-item.profile .nav-icon.settings-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

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

  .main-content > .app-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
  }

  .main-content > .settings-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .main-content > .dashboard-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .email-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    /* 预留给侧栏与列表之间的折叠轨，避免列表内容与轨重叠 */
    padding-left: 16px !important;
    box-sizing: border-box !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* 邮件页主区去内边距，由 .email-page 自行控制左侧轨区域 */
  .main-content:has(.email-page) {
    padding: 0 !important;
  }

  /* 折叠轨：固定在导航栏右缘与邮件列表之间（横竖屏同一套逻辑） */
  .email-page .email-list-expand-btn {
    display: flex !important;
    position: fixed !important;
    left: var(--sidebar-width) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 80px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 250 !important;
    background: var(--bg-primary) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  .email-page .email-list-expand-btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
  }

  /* 列表隐藏后箭头朝右表示「展开」 */
  body.email-list-collapsed .email-page .email-list-expand-btn svg {
    transform: rotate(180deg) !important;
  }

  /* 仅用侧缘轨折叠，隐藏列表标题栏内重复按钮 */
  .email-page .email-list-header .email-list-toggle {
    display: none !important;
  }

  /* 列表与详情：横竖屏均为左右分栏；折叠后列表宽度为 0 */
  .email-list-panel {
    flex: 0 0 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border-color) !important;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease, border-color 0.25s ease !important;
  }

  .email-list-panel:not(.collapsed) {
    width: min(32vw, 280px) !important;
    min-width: min(32vw, 280px) !important;
    max-width: min(32vw, 280px) !important;
  }

  .email-list-panel.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-right: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !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-detail-panel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-height: none !important;
  }

  .email-list-header {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  /* ---------- 横屏：左右分栏 + 折叠轨（提高优先级，压过 mobile.css 横屏里 display:none 等） ---------- */
  @media (orientation: landscape) {
    .main-content .email-page {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      display: flex !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      height: 100% !important;
      max-height: none !important;
      overflow: hidden !important;
      padding-left: 16px !important;
      gap: 0 !important;
    }

    .email-list-panel {
      max-height: none !important;
      height: 100% !important;
      flex-shrink: 0 !important;
    }

    .email-list-panel:not(.collapsed) {
      width: 260px !important;
      min-width: 260px !important;
      max-width: 260px !important;
    }

    /* 横屏下同样完全收起列表（覆盖 mobile 横屏仅用 width:0 时仍占纵向条等差异） */
    .email-list-panel.collapsed {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      border-right: none !important;
      overflow: hidden !important;
      padding: 0 !important;
      margin: 0 !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;
    }

    /* 特异性高于 body.email-list-collapsed .email-list-expand-btn，横屏展开/折叠都显示轨 */
    body .main-content .email-page .email-list-expand-btn {
      display: flex !important;
      position: fixed !important;
      left: var(--sidebar-width) !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      z-index: 250 !important;
    }
  }

  /* ---------- 竖屏：与横屏相同三栏逻辑（非手机式上下堆叠） ---------- */
  @media (orientation: portrait) {
    .email-page {
      flex-direction: row !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      flex: 1 1 auto !important;
    }

    .email-list-panel:not(.collapsed) {
      width: min(40vw, 300px) !important;
      min-width: min(40vw, 300px) !important;
      max-width: min(40vw, 300px) !important;
    }

    /* 覆盖 mobile.css 竖屏「折叠后留一条」规则，改为完全收起 */
    .email-list-panel.collapsed {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      border-bottom: none !important;
    }

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

  /* ---------- AI 智能助手：头尾按钮换行、禁止重叠 ---------- */
  #emailDetailContent .ai-assistant-zone {
    margin: 6px 8px 12px !important;
  }

  #emailDetailContent .ai-header {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px 10px !important;
    padding: 8px 10px !important;
  }

  #emailDetailContent .ai-header-left {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
  }

  #emailDetailContent .ai-title {
    flex-shrink: 0 !important;
  }

  #emailDetailContent .approval-buttons-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }

  #emailDetailContent .approval-btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  #emailDetailContent .ai-header-actions {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #emailDetailContent .ai-header-actions .translate-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #emailDetailContent .ai-header-actions .ai-btn,
  #emailDetailContent .ai-header-actions button {
    flex-shrink: 0 !important;
  }

  #emailDetailContent .ai-footer {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  #emailDetailContent .ai-footer-left {
    flex: 0 0 auto !important;
  }

  #emailDetailContent .ai-footer-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #emailDetailContent .ai-footer-right .tone-select,
  #emailDetailContent .ai-footer-right .ai-btn,
  #emailDetailContent .ai-footer-right button {
    flex-shrink: 0 !important;
  }

  /* ---------- 统计看板（平板）：数据分析区可滚动 + 横屏压缩图表高度，避免饼图被裁出视口 ---------- */
  .dashboard-page .charts-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-page .charts-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: stretch !important;
    align-items: stretch !important;
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100% !important;
  }

  .dashboard-page .chart-panel {
    min-height: 0 !important;
  }

  .dashboard-page .chart-panel--distribution .chart-container-pie {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    justify-content: center !important;
  }

  @media (orientation: landscape) {
    .dashboard-page .page-header {
      margin-bottom: 10px !important;
    }

    .dashboard-page .stats-cards {
      margin-bottom: 10px !important;
      gap: 10px !important;
    }

    .dashboard-page .section-header {
      margin-bottom: 10px !important;
    }

    .dashboard-page .chart-container:not(.chart-container-pie) {
      max-height: min(240px, 32vh) !important;
      min-height: 120px !important;
    }

    .dashboard-page .chart-container:not(.chart-container-pie) canvas {
      max-height: min(200px, 28vh) !important;
    }

    .dashboard-page .chart-container-pie .pie-chart-surface {
      width: min(100%, min(220px, 28vh)) !important;
      max-width: min(220px, 28vh) !important;
    }
  }

  /* 竖屏（Mini / Air）：看板指标卡 2×2；饼图略收紧；AI 顶栏单行不换行 */
  @media (orientation: portrait) {
    .dashboard-page .stats-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dashboard-page .chart-container-pie .pie-chart-surface {
      width: min(100%, min(300px, 42vh)) !important;
      max-width: min(300px, 42vh) !important;
    }

    #emailDetailContent .ai-header {
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 6px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    #emailDetailContent .ai-header-left {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      flex-wrap: nowrap !important;
    }

    #emailDetailContent .approval-buttons-inline {
      flex-wrap: nowrap !important;
      gap: 4px !important;
    }

    #emailDetailContent .ai-header-actions {
      flex: 0 0 auto !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
    }

    #emailDetailContent .ai-header-actions .translate-wrap {
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 4px !important;
    }

    #emailDetailContent .ai-title {
      white-space: nowrap !important;
    }

    #emailDetailContent .approval-btn {
      padding: 4px 8px !important;
      font-size: 10px !important;
    }

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

    #emailDetailContent .ai-header-actions .translate-wrap select {
      max-width: 72px !important;
      font-size: 10px !important;
      padding: 2px 4px !important;
    }
  }

  /* Air 略宽：尝试一行排下更多操作 */
  @media (min-width: 821px) and (orientation: landscape) {
    #emailDetailContent .ai-header-left {
      flex: 1 1 45% !important;
    }

    #emailDetailContent .ai-header-actions {
      flex: 1 1 45% !important;
      justify-content: flex-end !important;
    }

    #emailDetailContent .ai-footer-right {
      flex: 0 1 auto !important;
    }
  }
}

/* iPad Mini（更窄逻辑宽度）：侧栏再收一档 */
@media screen and (min-width: 768px) and (max-width: 820px) {
  :root {
    --sidebar-width: 76px !important;
  }

  .nav-item .nav-label {
    font-size: 9px !important;
    -webkit-line-clamp: 2;
  }

  .sidebar .nav-item .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  @media (orientation: landscape) {
    .email-list-panel:not(.collapsed) {
      width: 240px !important;
      min-width: 240px !important;
      max-width: 240px !important;
    }
  }

  @media (orientation: portrait) {
    .email-list-panel:not(.collapsed) {
      width: min(38vw, 260px) !important;
      min-width: min(38vw, 260px) !important;
      max-width: min(38vw, 260px) !important;
    }
  }
}

/* iPad Air 及同档略宽设备 */
@media screen and (min-width: 821px) and (max-width: 1366px) {
  :root {
    --sidebar-width: 96px !important;
  }

  .nav-item .nav-label {
    font-size: 10.5px !important;
  }

  @media (orientation: landscape) {
    .email-list-panel:not(.collapsed) {
      width: 276px !important;
      min-width: 276px !important;
      max-width: 276px !important;
    }
  }

  @media (orientation: portrait) {
    .email-list-panel:not(.collapsed) {
      width: min(42vw, 308px) !important;
      min-width: min(42vw, 308px) !important;
      max-width: min(42vw, 308px) !important;
    }
  }
}