/* ==================== 销售名片卡片组件样式（三栏布局） ==================== */

/*
 * 名片卡片容器 — 注入到 .bubble.assistant 内部时，
 * 必须消除父级 .bubble 的背景/padding/圆角，避免双重嵌套背景
 */
.card-container {
  display: block !important;
  /* ★ 消除父级 .bubble 的背景和内边距（根除双重背景） */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
  line-height: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

/*
 * ★ card-mode：当 bubble 被渲染为卡片时，消除气泡自身的背景/内边距/圆角
 * 这样只有 .contact-card 一层白底，不会出现双层叠加
 */
.bubble.card-mode {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.contact-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8ecf0;
  width: 100%;
  max-width: 480px;          /* 加宽：从 430px → 480px */
  overflow: hidden;
  font-size: 14px;           /* 字体也稍大一点 */
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  animation: cardSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Header ---- */
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #fdfdfd; border-bottom: 1px solid #f1f3f5;
}
.card-header .company { font-weight: 600; color: #19a05e; font-size: 13px; }
.card-header .status {
  display: flex; align-items: center; gap: 4px;
  background: #e6f6ed; color: #19a05e; padding: 5px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 500;
}
.card-header .status .dot {
  width: 6px; height: 6px; background: #19a05e; border-radius: 50%;
  animation: pulse 2s infinite;
}

/* ---- Body 三栏布局 ---- */
.card-body { display: flex; align-items: center; padding: 20px; gap: 16px; }

/* 左：头像 */
.card-avatar { flex-shrink: 0; }
.card-avatar img {
  width: 76px; height: 76px; border-radius: 50%;   /* 加大：从 58px → 76px */
  border: 2.5px solid #e6f6ed; object-fit: cover;
}

/* 中：信息区 */
.card-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.card-info .name { font-size: 18px; font-weight: bold; margin-bottom: 4px; color: #1f2937; }  /* 名字稍大 */
.card-info .title { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.card-info .contact-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4b5563; margin-bottom: 5px;
}
.card-info .contact-item a { color: #19a05e; text-decoration: none; }
.card-info .contact-item a:hover { text-decoration: underline; }

/* 右：二维码 */
.card-qr {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  border-left: 1px dashed #e5e7eb; padding-left: 14px;
}
.card-qr img { width: 70px; height: 70px; border-radius: 4px; margin-bottom: 4px; }
.card-qr span { font-size: 11px; color: #9ca3af; transform: scale(0.9); }

/* 呼吸灯动画 */
@keyframes pulse {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 160, 94, 0.7); }
  70%  { transform: scale(1);     box-shadow: 0 0 0 4px rgba(25, 160, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(25, 160, 94, 0); }
}

/* 暗色模式适配 */
.page[data-theme="dark"] .contact-card {
  background: #1e293b; border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.page[data-theme="dark"] .card-header { background: transparent; border-bottom-color: rgba(255,255,255,0.06); }
.page[data-theme="dark"] .card-info .name { color: #e2e8f0; }
.page[data-theme="dark"] .card-info .contact-item { color: #cbd5e1; }
.page[data-theme="dark"] .card-qr { border-left-color: rgba(255,255,255,0.08); }