/* [FIX] 折叠屏/手机适配 (2026-09-20)
   背景: 客户用二折叠屏手机访问, 顶部面包屑在窄屏被挤成 3 行(高度 70px > header 56px)导致重叠;
   仪表盘/转化分析卡片与表格在窄屏被裁切。
   策略: 只做窄屏覆盖, 不动桌面端布局。 */

/* ========== 1. 顶部面包屑: 窄屏只留当前页, 单行省略 ========== */
@media (max-width: 900px) {
  .agent-app .agent-header {
    overflow: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .header-left {
    gap: 6px !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  .header-left .el-breadcrumb {
    height: auto !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .header-left .el-breadcrumb__item {
    display: inline !important;
    float: none !important;
  }
  /* 只保留最后一级(当前页面), 前面层级在窄屏隐藏, 避免换行重叠 */
  .header-left .el-breadcrumb__item:not(:last-child) {
    display: none !important;
  }
  .header-left .el-breadcrumb__separator {
    display: none !important;
  }
  .header-left .el-breadcrumb__inner {
    font-size: 13px !important;
  }
}

/* ========== 2. 侧边栏: 窄屏收窄, 给内容区留空间 ========== */
@media (max-width: 900px) {
  .agent-app,
  .agent-layout-root,
  .agent-layout-body {
    --agent-sider-width: 132px !important;
  }
  .agent-sider .el-menu-item,
  .agent-sider .el-sub-menu__title {
    font-size: 13px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  .agent-sider .sider-logo {
    padding: 0 10px !important;
  }
}
@media (max-width: 560px) {
  .agent-app,
  .agent-layout-root,
  .agent-layout-body {
    --agent-sider-width: 56px !important;
  }
  .agent-sider .sider-logo > *:not(.sider-logo-icon) {
    display: none !important;
  }
  .agent-sider .sider-logo {
    justify-content: center !important;
  }
}

/* ========== 3. 内容区留白: 窄屏收紧 ========== */
@media (max-width: 900px) {
  .agent-main {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .page-dashboard,
  .page-conversion,
  .page-customers {
    gap: 12px !important;
  }
}

/* ========== 4. KPI 卡片: 数值不裁切, 字号随屏宽收缩 ========== */
@media (max-width: 900px) {
  .kpi-card {
    padding: 12px 12px !important;
    min-width: 0 !important;
  }
  .kpi-card .kpi-card-value,
  .kpi-card-value {
    font-size: clamp(15px, 4.2vw, 22px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .kpi-card .kpi-card-label,
  .kpi-card-label {
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .kpi-card .kpi-card-split,
  .kpi-split {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    font-size: 11.5px !important;
  }
  .metric-grid {
    gap: 10px !important;
  }
}

/* ========== 5. 表格: 窄屏允许横向滑动, 字号收紧 ========== */
@media (max-width: 900px) {
  .el-table .cell {
    font-size: 12.5px !important;
    padding: 0 6px !important;
  }
  .el-table th.el-table__cell > .cell {
    font-size: 12px !important;
  }
  .el-scrollbar__wrap {
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== 6. 明细抽屉: 窄屏全宽 ========== */
@media (max-width: 820px) {
  #fxcd {
    width: 100vw !important;
  }
}