/* ============================================================
   26-empty-art.css · 空态品牌插画容器  v1.0.0
   ------------------------------------------------------------
   配套：/m/shared/empty-art.js（window.ZxEmptyArt）
         配合 core/globals.js 的 renderGcEmptyState() 自动注入

   风格：单色暖灰线稿 + 一抹品牌色点缀（Linear / Notion / Stripe 同路子）
   为什么不用多色：老手机小屏上多色会糊成一团噪点，且与全站极简调性打架。

   铁律：插画是纯装饰（aria-hidden），用品牌原色不受对比度约束；
         但"品牌色 ≠ 文字色"依然生效——插画旁边的文字仍须用 ink 变体。

   ⚠️ 本文件必须在 12-global-components.css 之后加载，否则 .empty-state
      的旧 padding 会盖掉 .empty-state--art。
   ============================================================ */

/* ── 1. 容器 ──────────────────────────────────────────────── */
.zx-art {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  line-height: 0;   /* 消 inline-svg 基线空隙 */
  font-size: 0;     /* 收敛容器内残留文本节点 */
  flex: none;
}
.zx-art__svg { display: block; width: 100%; height: 100%; }

/* ── 2. 三档尺寸（375 基准宽） ────────────────────────────── */
.zx-art--sm { width: 72px;  height: 72px;  }
.zx-art--md { width: 96px;  height: 96px;  }
.zx-art--lg { width: 112px; height: 112px; }

/* ── 3. soft：品牌浅底圆角块（知识库皮肤，色板已统一到竹星蓝） ── */
.zx-art--soft {
  border-radius: 24px;
  background: linear-gradient(145deg, #eef3fe 0%, #dce7fd 100%);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.14);
}
.zx-art--soft .zx-art__svg { width: 78%; height: 78%; }

/* ── 4. 与 .empty-state 的配合 ────────────────────────────── */
/* 有插画时上内距收紧：插画自带视觉重量，48px 会把它推得太低 */
.empty-state--art { padding-top: 34px; }
.empty-state--art .empty-state-icon { display: none; }  /* 双保险：避免 emoji 与插画同现 */

/* 防爆层：旧空态容器里塞了 .zx-art 时，抵消 emoji 的 48px / 0.4 透明度。
   不用 :has()，避免安卓旧内核（X5）不支持。 */
.empty-state-icon > .zx-art,
.empty-icon > .zx-art,
.note-tab-empty-icon > .zx-art {
  opacity: 1;
  margin: 0 auto 14px;
}

/* ── 5. 空态内在间距微调（有插画时更紧凑） ────────────────── */
.empty-state--art .empty-state-title { margin-bottom: 6px; }
.empty-state--art .gc-empty-action { margin-top: 16px; }

/* ── 5b. 失败态（renderGcFailedState）─────────────────────── */
/* .failed-icon 是 40px emoji；有插画时隐藏它，避免 emoji 与线稿同现。 */
.failed-state--art .failed-icon { display: none; }
.failed-state--art { padding-top: 40px; }
.failed-state--art .failed-title { margin-bottom: 8px; }

/* ── 5c. 悟空位保护（品牌 IP，插画不得覆盖）───────────────── */
/* 速记 Feed 空态 = wukong-walk.mp4；微信收件箱空态 = 悟空头像。
   两者是**有意设计**的品牌露出，不是未统一的旧写法。
   empty-art.js 的 hydrate() 已显式跳过；此处再加一道样式防线：
   万一有 .zx-art 被塞进这些容器，直接不显示。 */
.empty-state-fig .zx-art,
.wx-inbox-empty-wukong .zx-art,
.empty-wukong .zx-art { display: none !important; }

/* ── 6. 静态 DOM 宿主（HTML 里 data-zx-art 的装配点） ──────── */
/* 宿主多半是旧的 emoji 容器（.note-tab-empty-icon 等），
   它们的 font-size:48px / opacity 会污染插画，这里一次抹平。 */
.zx-art-host {
  margin: 0;
  padding: 0;
  opacity: 1;
  font-size: 0;
  line-height: 0;
  min-height: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}