/* ==========================================================================
   v7-cards.css —— 名片组件（用户名片 / 记录名片）
   --------------------------------------------------------------------------
   · .v7-card-host      可触发名片的宿主元素（表格里的姓名、记录号、@某人…）
   · .v7-win            名片窗口（桌面：点击打开，右下角停靠，可拖标题栏移动）
   · .v7-avatar         头像（支持 <img>，失败或被禁用时回退到文字首字母）
   · .v7-ucard          用户名片
   · .v7-rrecord        记录名片（记录号 / 影响对象 / 请求字段）
   移动端不渲染 .v7-win，改由 V7.mobile.sheet() 弹出 Bottom Sheet（同一份 DOM）。
   颜色：只引用既有令牌；头像色调从 --accent-* / --brand-* 既有令牌取，再用 color-mix 派生底色。
   ========================================================================== */

/* --------------------------------------------------------------------------
   宿主元素
   -------------------------------------------------------------------------- */
.v7-card-host {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--m-hover) var(--ease-standard), color var(--m-hover) var(--ease-standard);
}
.v7-card-host:hover { background: var(--bg-hover); }
.v7-card-host:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}
.v7-card-host--plain { display: inline; background: none; }
.v7-card-host--underline { border-bottom: 1px dashed var(--border-strong); border-radius: 0; }
.v7-card-host--block { display: flex; width: 100%; }

/* 记录号这类等宽标识 */
.v7-card-host--mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  padding: 1px var(--space-2);
  border: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}
.v7-card-host--mono:hover { color: var(--text-primary); border-color: var(--border-default); }

/* --------------------------------------------------------------------------
   名片窗口（桌面：点击打开，右下角停靠，可拖动）
   --------------------------------------------------------------------------
   不再做「hover 悬浮气泡」：名片本身是一个小窗口，有标题栏（可拖）、关闭按钮，
   多个名片会依次停靠叠放（最多 3 个），点标题栏拖动可放到任意位置。
   -------------------------------------------------------------------------- */
.v7-win {
  position: fixed;
  z-index: var(--z-modal);
  width: 372px;
  min-width: 300px;
  max-width: calc(100vw - var(--space-6));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  resize: both;                       /* 右下角拖拽改尺寸（位置/尺寸都会持久化） */
  animation: v7-win-in var(--m-panel-in) var(--ease-standard) both;
}
.v7-win.is-dragging { animation: none; }
/*
  ⚠️ 入场动画播完后必须把 animation 固定成 none：
     否则拖动结束、置顶、折叠等任何导致选择器重新匹配的操作，都会让
     `animation: v7-win-in` 重新生效 —— 表现就是「拖完窗口闪一下」。
  `.is-entered` 必须写在 `.is-leaving` 之前，让关闭动画仍然优先。
*/
.v7-win.is-entered { animation: none; }
.v7-win.is-leaving { animation: v7-win-out var(--m-panel-out) var(--ease-standard) both; }
.v7-win--wide { width: 432px; }

@keyframes v7-win-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes v7-win-out {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(6px); }
}

/* 标题栏 = 拖动把手 */
.v7-win__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--bg-muted);
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.v7-win.is-dragging .v7-win__head { cursor: grabbing; }
.v7-win__grip { display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; }
.v7-win__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-win__sub {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 6px;
}
.v7-win__close {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background-color var(--m-hover) var(--ease-standard), color var(--m-hover) var(--ease-standard);
}
.v7-win__close:hover { background: var(--bg-hover); color: var(--text-primary); }
.v7-win__close:active { background: var(--bg-active); }

.v7-win__body {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 折叠成只剩标题栏 */
.v7-win.is-collapsed .v7-win__body { display: none; }
.v7-win.is-collapsed { height: auto !important; resize: none; }

.v7-win__collapse {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background-color var(--m-hover) var(--ease-standard), color var(--m-hover) var(--ease-standard);
}
.v7-win__collapse:hover { background: var(--bg-hover); color: var(--text-primary); }

/* 窗口里已有头部信息时，不再重复画名片自己的顶栏背景 */
.v7-win__body .v7-ucard__head { background: transparent; }

@media (max-width: 767.98px) {
  /* 移动端不用窗口：名片走 Bottom Sheet，这些类不会出现 */
  .v7-win { display: none; }
}

/* --------------------------------------------------------------------------
   头像（预留自定义头像接口的渲染层）
   -------------------------------------------------------------------------- */
.v7-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--v7-avatar-size, 36px);
  height: var(--v7-avatar-size, 36px);
  border-radius: var(--radius-full);
  overflow: hidden;
  font-size: var(--v7-avatar-font, var(--text-xs));
  font-weight: 700;
  letter-spacing: 0.02em;
  /* 兜底色由接口给出（--v7-avatar-bg / --v7-avatar-fg），缺省用品牌淡染 */
  background: var(--v7-avatar-bg, var(--tint-brand));
  color: var(--v7-avatar-fg, var(--brand-600));
  user-select: none;
}
.v7-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v7-avatar--sm { --v7-avatar-size: 28px; --v7-avatar-font: 10px; }
.v7-avatar--lg { --v7-avatar-size: 48px; --v7-avatar-font: var(--text-sm); }
.v7-avatar--xl { --v7-avatar-size: 64px; --v7-avatar-font: var(--text-md); }
.v7-avatar--square { border-radius: var(--radius-md); }

/* 头像右上角的在线/状态小点 */
.v7-avatar--dot::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 28%;
  border-radius: var(--radius-full);
  background: var(--v7-avatar-dot, var(--success));
  box-shadow: 0 0 0 2px var(--bg-surface-raised);
}

/* --------------------------------------------------------------------------
   用户名片
   -------------------------------------------------------------------------- */
.v7-ucard__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}
.v7-ucard__id { flex: 1 1 auto; min-width: 0; }
.v7-ucard__name {
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-ucard__sub {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-ucard__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }

.v7-ucard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.v7-stat__label { font-size: var(--text-xs); color: var(--text-tertiary); }
.v7-stat__value {
  margin-top: 2px;
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v7-ucard__rows { display: flex; flex-direction: column; }
.v7-row-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: var(--text-sm);
}
.v7-row-item:last-child { border-bottom: none; }
.v7-row-item__key { color: var(--text-tertiary); }
.v7-row-item__val { color: var(--text-primary); overflow-wrap: anywhere; }

.v7-ucard__foot {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

/* --------------------------------------------------------------------------
   记录名片
   -------------------------------------------------------------------------- */
.v7-rrecord__head {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}
.v7-rrecord__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.v7-rrecord__no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-rrecord__time { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.v7-rrecord__title { margin-top: var(--space-2); font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }

.v7-rrecord__section { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.v7-rrecord__section:last-child { border-bottom: none; }
.v7-rrecord__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.v7-rrecord__legend-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* 影响对象 chips */
.v7-uchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 2px 10px 2px 2px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--m-hover) var(--ease-standard), border-color var(--m-hover) var(--ease-standard);
}
.v7-uchip:hover { background: var(--bg-hover); border-color: var(--border-default); }
.v7-uchip:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.v7-uchip--plain { padding: 2px 10px; color: var(--text-secondary); cursor: default; }
.v7-uchip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v7-uchip__role { font-size: var(--text-xs); color: var(--text-tertiary); }

/* 请求字段：键值 + 自动解析 */
.v7-rfields { display: flex; flex-direction: column; }
.v7-rfield {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: var(--text-sm);
}
.v7-rfield:last-child { border-bottom: none; }
.v7-rfield__key { color: var(--text-tertiary); overflow-wrap: anywhere; }
.v7-rfield__val { color: var(--text-primary); overflow-wrap: anywhere; }
.v7-rfield--muted .v7-rfield__val { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); }
.v7-rfield__more {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 展开/收起更多字段 */
.v7-rrecord__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min-desktop);
  margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: var(--bg-muted);
  transition: background-color var(--m-hover) var(--ease-standard), color var(--m-hover) var(--ease-standard);
}
.v7-rrecord__more:hover { background: var(--bg-hover); color: var(--text-primary); }

/* 请求体原始 JSON（默认折叠） */
.v7-rrecord__raw {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  box-shadow: var(--shadow-inset-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-secondary);
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   移动端：名片改由 Bottom Sheet 承载，这里只做体积与触控适配
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .v7-card-host { min-height: var(--tap-min); }
  .v7-ucard__foot .btn,
  .v7-rrecord__more { min-height: var(--tap-min); }
  .v7-uchip { min-height: 32px; }
}
.v7-force-mobile .v7-card-host { min-height: var(--tap-min); }
.v7-force-mobile .v7-ucard__foot .btn,
.v7-force-mobile .v7-rrecord__more { min-height: var(--tap-min); }

/* --------------------------------------------------------------------------
   reduced-motion：只保留透明度
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v7-win,
  .v7-win.is-leaving {
    animation: none !important;
    transform: none !important;
  }
  .v7-card-host,
  .v7-uchip,
  .v7-rrecord__more,
  .v7-win__close,
  .v7-win__collapse {
    transition-duration: 1ms;
  }
}
[data-reduce-motion='on'] .v7-win { animation-duration: 1ms !important; }