/* ============================================================
   心启能 · 心力赋能 — 表现层打磨层（theme-polish）
   ------------------------------------------------------------------
   定位：在 theme-2026 之上补齐「状态层」与通用微交互，让页面"看起来像 2026"。
   铁律：只改表现、不改尺寸/布局/业务/字段/接口；卡牌测评页不受影响。
   加载顺序：置于所有业务 CSS 之后（靠层叠顺序覆盖）。
   ============================================================ */

/* ==================== 状态层：空态 / 加载态 / 错误态 ==================== */

/* 通用空态：柔和占位 + 舒适留白 + 层次 */
.empty-tip {
  text-align: center;
  color: var(--c-mut, var(--c-mut));
  padding: 56px 20px;
  font-size: 14px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty-tip::before {
  content: '';
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--c-surface) 0 24%, transparent 25%),
    linear-gradient(135deg, var(--v-200, var(--v-100)), var(--v-100, var(--brand-purple-soft)));
  box-shadow: var(--sh-1, 0 1px 2px rgba(15,45,35,.04));
  opacity: .92;
}

/* 加载态：旋转圆环 spinner（不改变布局，仅占位图标） */
.empty-tip.is-loading::before {
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--v-100, var(--brand-purple-soft));
  border-top-color: var(--brand-2, var(--brand-2));
  animation: tp-spin .8s linear infinite;
  box-shadow: none;
}

/* 错误态：告警圆 + 感叹号 */
.empty-tip.is-error {
  color: var(--c-danger, var(--c-danger));
}
.empty-tip.is-error::before {
  content: '!';
  width: 42px;
  height: 42px;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-danger, var(--c-danger));
  background: var(--c-danger-bg, var(--c-danger-bg));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 后台/讲师端简版空态对齐（instructor-portal 等用 .empty） */
.empty {
  text-align: center;
  color: var(--c-mut, var(--c-mut));
  padding: 40px 16px;
  font-size: 14px;
  line-height: 1.7;
}

/* 骨架屏 shimmer（供加载占位复用） */
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-shimmer { 100% { background-position: 200% 0; } }
.tp-skeleton {
  background: linear-gradient(90deg, var(--c-surface-2, var(--c-surface-2)) 25%, var(--c-bg, var(--c-bg)) 37%, var(--c-surface-2, var(--c-surface-2)) 63%);
  background-size: 200% 100%;
  animation: tp-shimmer 1.4s ease infinite;
  border-radius: var(--r-sm, 10px);
}

/* ==================== 通用微交互（不改变尺寸/布局） ==================== */

input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,
textarea {
  transition: border-color var(--dur, .24s) var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow var(--dur, .24s) var(--ease, cubic-bezier(.22,1,.36,1));
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus,
textarea:focus {
  border-color: var(--brand-3, var(--brand-3));
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
  outline: none;
}

/* ==================== B 端 DataTable 状态层（后台表格） ==================== */

/* 加载态：spinner 圆环（保持原 block 布局，仅上方加居中 spinner） */
.wb-dt-state {
  padding: 48px 16px;
  text-align: center;
  color: var(--c-mut, var(--c-mut));
  font-size: 14px;
}
.wb-dt-state.is-loading::before {
  content: '';
  display: block;
  margin: 0 auto 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--v-100, var(--brand-purple-soft));
  border-top-color: var(--brand-2, var(--brand-2));
  animation: tp-spin .8s linear infinite;
}
.wb-dt-state.err {
  color: var(--c-danger, var(--c-danger));
}

/* 空态：柔和留白（表格内联，不加图标避免错位） */
.wb-dt-empty {
  text-align: center;
  color: var(--c-mut, var(--c-mut));
  padding: 52px 0;
  font-size: 14px;
}

/* ============================================================
   聊天框 + 工作台 · 品牌配色统一
   （Tailwind 紫 var(--brand-2) / slate 灰 → 心力紫 var(--brand-2) / 暖中性）
   只改颜色与柔和度，不改尺寸、布局、交互逻辑。
   ============================================================ */

/* --- 补充工作台遗漏的品牌变量映射（theme-2026 未覆盖的 workbench 私有变量） --- */
:root {
  --purple-dark: var(--brand-deep);
  --purple-light: var(--brand-purple-soft);
  --purple-lighter: var(--v-25);
  --text-soft: var(--c-sub);
  --text-faint: var(--c-mut);
}

/* --- 工作台顶栏 / 登录屏：深紫硬编码 → 品牌环境网格 --- */
.wb-top {
  background: linear-gradient(90deg, var(--brand-deep) 0%, var(--brand-2) 55%, var(--brand-1) 100%);
}
.login-screen {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(16,185,129,.5), transparent 45%),
    linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-2) 45%, var(--brand-3) 100%);
}

/* --- 聊天框（咨询师 / 倾听师 / 用户端共用）配色 → 品牌 token --- */
.im-box { background: var(--c-bg, var(--c-bg)); }
.im-bar, .im-input { background: var(--c-surface, var(--c-surface)); }
.im-bar { border-bottom-color: var(--c-line, var(--c-line)); }
.im-input { border-top-color: var(--c-line, var(--c-line)); }
.im-peer-name, .im-back, .im-more, .im-call-btn { color: var(--c-ink, var(--ink)); }
.im-peer-sub, .im-time, .im-sys, .im-day { color: var(--c-mut, var(--c-mut)); }
.im-call-btn.video, .im-more-btn, .im-voice-toggle.active { color: var(--brand-2, var(--brand-2)); }
.im-bubble.in { background: var(--c-surface, var(--c-surface)); color: var(--c-ink, var(--ink)); }
.im-bubble.in::before { border-right-color: var(--c-surface, var(--c-surface)); }
.im-bubble.out { background: var(--brand-grad, linear-gradient(135deg, var(--brand-1), var(--brand-2))); }
.im-bubble.out::before { border-left-color: var(--brand-3, var(--brand-3)); }
.im-avatar, .im-peer-avatar { background: var(--v-100, var(--brand-purple-soft)); }
.im-field { border-color: var(--c-line, var(--c-line)); background: var(--c-surface-2, var(--c-surface-2)); }
.im-field:focus { border-color: var(--brand-3, var(--brand-3)); background: var(--c-surface); }
.im-send { background: var(--brand-grad, linear-gradient(135deg, var(--brand-1), var(--brand-2))); }
.im-quick button, .im-voice-hold { background: var(--c-surface-2, var(--c-surface-2)); border-color: var(--c-line, var(--c-line)); }
.im-new-pill { background: var(--brand-2, var(--brand-2)); box-shadow: 0 6px 18px rgba(5, 150, 105, .32); }

/* ============================================================
   移动端聊天框细节（窄屏协调 + 触控目标 + iOS 防缩放 + 安全区）
   ============================================================ */
@media (max-width: 899px) {
  .im-row { max-width: 86%; }
  .im-bar { padding: 10px 10px; min-height: 54px; }
  .im-peer-avatar, .im-avatar { width: 36px; height: 36px; font-size: 18px; }
  .im-bubble { font-size: 15px; padding: 9px 12px; }
  .im-input { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .im-field { font-size: 16px; }
  .im-voice-toggle, .im-more-btn { width: 36px; height: 36px; }
  .im-send { padding: 0 16px; height: 36px; }
}

/* ============================================================
   工作台移动端顶栏 · 单行协调
   根因：flex 子项默认 min-width:auto，窄屏下左侧品牌区与右侧操作区
        互相挤压、文字换行成两行。
   方案：左侧品牌可收缩（超长省略号），右侧操作区固定完整、不换行。
   ============================================================ */
@media (max-width: 899px) {
  .wb-top {
    flex-wrap: nowrap;
    gap: 10px;
    height: 52px;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
  }
  /* 左侧品牌：允许收缩，超长省略，绝不换行 */
  .wb-brand {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    gap: 6px;
  }
  .wb-brand > span:not(.wb-role-badge) {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 角色徽章固定不压缩 */
  .wb-role-badge { flex: 0 0 auto; }
  /* 右侧操作区：固定不收缩、不换行，保持完整 */
  .wb-top-right {
    flex-shrink: 0;
    white-space: nowrap;
    gap: 8px;
  }
  .wb-status { flex-shrink: 0; }
  .wb-status-btn { white-space: nowrap; }
}

/* PC「手机视图预览」（body.wb-phone，容器 480px 但视口可能 >899px）同样单行协调 */
body.wb-phone .wb-top {
  flex-wrap: nowrap;
  gap: 10px;
  height: 52px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top);
}
body.wb-phone .wb-brand {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  gap: 6px;
}
body.wb-phone .wb-brand > span:not(.wb-role-badge) {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.wb-phone .wb-role-badge { flex: 0 0 auto; }
body.wb-phone .wb-top-right {
  flex-shrink: 0;
  white-space: nowrap;
  gap: 8px;
}
body.wb-phone .wb-status { flex-shrink: 0; }
body.wb-phone .wb-status-btn { white-space: nowrap; }

/* ============================================================
   阶段四 · 用户端状态层视觉统一（纯 CSS 增量，零逻辑改动）
   ------------------------------------------------------------------
   散落的自定义空态容器 → 统一文字/间距质感；
   暗色模式下空态占位图标同步适配（浅紫图标 → 深紫适配，避免突兀）。
   ============================================================ */
.mc-empty, .shop-empty, .emp-empty, .uc-empty, .cs-empty, .cd-empty, .hs-cd-empty {
  text-align: center;
  color: var(--c-mut);
  padding: 40px 20px;
  font-size: 14px;
  line-height: 1.7;
}

@media (prefers-color-scheme: dark) {
  .empty-tip::before, .xqn-empty::before {
    background:
      radial-gradient(circle at 50% 50%, var(--c-surface) 0 24%, transparent 25%),
      linear-gradient(135deg, var(--c-line), var(--c-surface-2));
  }
}