/* 咸鱼电竞设计系统 · 06-responsive
   职责：断点改写（最后一层）。≤1180 首页两列收紧；≤980 平板/手机：16px 页边、
   焦点卡居中、审核队列两行卡、批量条与 toast 浮在底部导航之上；≤380 小屏再收一档。
   动效：prefers-reduced-motion 下关掉常驻动画（光球/星星/脉冲/进场）。 */
@layer xy.responsive {
  @media (max-width: 1180px) {
    .dashboard-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .dashboard-focus { padding: 30px 30px; }
    .dashboard-focus-count { font-size: 72px; }
    .dashboard-queue-row { grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) 90px 84px 16px; gap: 14px; }
  }

  @media (max-width: 980px) {
    main { padding-left: 16px; padding-right: 16px; }
    .dashboard-page { gap: 18px; }

    .dashboard-lead { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    /* 咸鱼 2026-10-29：手机首页粉卡改成「待办条」——原来竖排居中一大块（约 220 高）只说一句话，像挡在脸上。
       现在左边 小标签 + 大数字一句话，右边一个主按钮；下面一行小胶囊（各阶段数量，点了能跳）。
       身份胶囊（右上角身份按钮已经有）、说明小字、第二个按钮（底栏已经有）在手机上不要。所有身份共用这一套。 */
    .dashboard-page .dashboard-focus { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; column-gap: 8px; min-height: 0; padding: 14px 10px 12px 16px; border-radius: 20px; text-align: left; }
    /* 鱼丸整只露出来站在右边（不再是淡淡的水印被字压着） */
    .dashboard-page .dashboard-focus .dashboard-focus-art { position: relative; z-index: 0; right: auto; top: auto; grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 118px; transform: none; opacity: 1;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); -webkit-mask-composite: source-in;
      mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 90%, transparent 100%); mask-composite: intersect; filter: drop-shadow(0 8px 14px rgba(140, 61, 99, .18)); }
    .dashboard-page .dashboard-focus .xy-focus-id, .dashboard-page .dashboard-focus .dashboard-focus-desc { display: none; }
    .dashboard-page .dashboard-focus .dashboard-focus-kicker { grid-column: 1; grid-row: 1; justify-content: flex-start; margin: 0; font-size: 12px; }
    .dashboard-page .dashboard-focus .dashboard-focus-kicker .latin { display: none; }
    .dashboard-page .dashboard-focus .dashboard-focus-title { grid-column: 1; grid-row: 2; justify-content: flex-start; max-width: none; margin: 4px 0 0; font-size: 16px; line-height: 1.2; }
    .dashboard-page .dashboard-focus .dashboard-focus-count { font-size: 38px; line-height: 1; }
    .dashboard-page .dashboard-focus .dashboard-focus-actions { grid-column: 1; grid-row: 3; flex-direction: row; justify-content: flex-start; width: auto; gap: 8px; margin: 10px 0 0; }
    .dashboard-page .dashboard-focus :is(.dashboard-focus-primary, .dashboard-focus-secondary) { flex: none; justify-content: center; gap: 6px; min-height: 32px; padding: 0 13px; font-size: 12.5px; white-space: nowrap; }
    .dashboard-page .dashboard-focus :is(.dashboard-focus-primary, .dashboard-focus-secondary) svg { width: 14px; height: 14px; }
    .dashboard-page:not([data-dashboard-role="customer"]) .dashboard-focus .dashboard-focus-secondary { display: none; }
    .dashboard-page .dashboard-focus .dashboard-focus-chips { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; gap: 6px; max-width: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(140, 61, 99, .1); }
    .dashboard-page .dashboard-focus .dashboard-focus-chip { min-height: 28px; padding: 0 10px; font-size: 12px; }
    .dashboard-page .dashboard-focus .dashboard-focus-chip .num { font-size: 12.5px; }

    /* 手机上名字长了也只占一行：身份顶栏已经写了，这里不重复；再长就省略 */
    .dashboard-hero h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .greeting-tag { display: none; }
    .greeting-date { font-size: 12px; }

    /* 队列卡：两行（标题+金额 / 人员+时间） */
    .dashboard-queue-row {
      grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amount" "people time";
      gap: 8px 12px; min-height: 0; padding: 14px 0;
    }
    .dashboard-queue-main { grid-area: main; }
    .dashboard-queue-amount { grid-area: amount; align-self: start; }
    .dashboard-queue-people { grid-area: people; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; }
    .dashboard-queue-time { grid-area: time; align-self: end; font-size: 12px; }
    .dashboard-queue-row > svg:last-child { display: none; }
    .dashboard-queue-item { padding-right: var(--card-pad); }
    .dashboard-queue-item .report-review-select { flex-basis: 30px; width: 30px; min-height: 44px; }
    /* 阶段切换在手机上加高到接近 44px 触摸下限 */
    .dashboard-queue-tabs > button { height: 38px; }

    /* 批量条与 toast：浮在底部导航之上 */
    .report-review-batchbar.dashboard-queue-batchbar, .reports-page .report-review-batchbar {
      bottom: calc(var(--bottom-nav-h) + 12px + env(safe-area-inset-bottom));
    }
    #toast { bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); }

    .dashboard-page .dashboard-overview { padding-top: 18px; }
    /* 10-27 业主：手机上大方框别太空——首页各分区卡上下内边距收一档 */
    .dashboard-page :is(.dashboard-records, .dashboard-owner-insights, .xy-trio, .xy-duo) > .card { padding-top: 16px; padding-bottom: 16px; }
    .dashboard-page .dashboard-overview .card.metric:first-child strong { font-size: 38px; }

    /* 客户表头三个排序按钮：等分三列后每格仅约 113px，图标（lucide 会把 <i> 换成 <svg>，
       不再命中 stage6 的 > i 规则）与「默认」占据同排，标签只剩约 44px，
       而「累计消费」在 11px 下需要 44.07px —— 差 0.4px 即触发 legacy 的 overflow-wrap:anywhere 折行。
       标签保持单行，让按钮自身横向滚动兜底，不裁切、不省略。 */
    .customer-sort-btn > span, .customer-sort-btn > small { white-space: nowrap; }
    .customer-sort-btn { overflow-x: auto; scrollbar-width: none; }
    .customer-sort-btn::-webkit-scrollbar { display: none; }
  }

  @media (max-width: 380px) {
    main { padding-left: 14px; padding-right: 14px; }
    .dashboard-focus { padding: 22px 16px 18px; }
    .dashboard-focus-count { font-size: 56px; }
    .dashboard-page .role-context > div { padding: 8px 6px; }
    .dashboard-page .dashboard-overview .card.metric strong { font-size: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dashboard-focus-pulse, .dashboard-focus-art,
    .dashboard-queue-item, .report-review-list > .report-review-item { animation: none; }
    .dashboard-queue-item:hover, .report-review-list > .report-review-item:hover { transform: none; }
  }
}