/* ════════════════════════════════════════════════════════════
   17. 左侧助手卡列表(P402)— "联系人/长期助手"气质
   P415-fix4(按用户提供的 XHTML 参考实现整体重写,不再打补丁):
   - 卡片 padding 12 / 圆角 12 / 卡间距 8
   - 头像 32 / icon 12(在 19-agent-avatar.css)
   - 名字 14px / 600;副标题 12px / opacity 0.6
     (XHTML 参考 text-[10px] 起步,P415-fix4 提到 12px 以兼顾中文可读性)
   - active = 卡片底色 var(--bg-surface) + border-left 3px brand + 轻阴影
     未选中 = 透明 + 无边框(列表气质,不堆卡片感)
   - active 头像染金(brand-primary 底 + text-on-color icon)— 这是
     "选中态视觉锚点",与 P420 砍掉的"6 主题色身份"是两件事:身份色被砍,
     选中状态金色色块保留作 active 标记
   - border-left 在所有卡片预留 3px transparent,active 时变 brand-primary,
     避免选中时宽度抖动
   ════════════════════════════════════════════════════════════ */

.ac-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-left-color 0.18s ease, box-shadow 0.18s ease;
}

.ac-card:hover {
  background: var(--bg-hover);
}

/* active = 浮起的卡片(白底/深底)+ 左 3px 金线 + 轻阴影 */
.ac-card.active {
  background: var(--bg-surface);
  border-left-color: var(--brand-primary);
  box-shadow: var(--shadow-ambient);
}

/* active 头像染金 — 灰底 → brand-primary 金底,icon → text-on-color。
   注:这是"选中状态视觉锚点",不是"6 主题色身份"。P420 砍身份色,
   保留此条作为 active 标记(用户验证后明确要保留)。 */
.ac-card.active .agent-avatar.avatar-sidebar {
  background: var(--brand-primary);
  color: var(--text-on-color);
}

/* ─── 文本主体 ─── */
.ac-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ac-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ac-time {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* 副标题:小字 + 透明度营造层级感(P415-fix4:12px 提升可读性,沿用 opacity 0.6 层级感) */
.ac-row2 {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-main);
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ac-subtitle {
  /* 颜色由 .ac-row2 统一,此 class 仅作语义节点 */
}

/* ─── 有新消息:亮起的节点(同手机抽屉),在第二行右侧,不压右上角的时间 ─── */
.ac-unread-dot {
  position: absolute;
  bottom: 18px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-bright);
}
.ac-card:has(.ac-unread-dot) .ac-row2 { padding-right: 14px; }

/* ─── 空状态 ─── */
.ac-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   P403 助手置顶(右下角图钉,P415-fix4 位置跟随新尺寸)
   ════════════════════════════════════════════════════════════ */

.ac-pin-btn {
  position: absolute;
  bottom: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  padding: 2px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ac-pin-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

.ac-card:hover .ac-pin-btn,
.ac-pin-btn:focus-visible {
  opacity: 1;
}
.ac-pin-btn:hover {
  background: var(--bg-active);
  color: var(--text-main);
}

/* 已置顶:常显弱金图钉 */
.ac-pin-btn.is-pinned {
  color: var(--brand-primary);
  opacity: 0.4;
}
.ac-card:hover .ac-pin-btn.is-pinned {
  opacity: 1;
}
.ac-pin-btn.is-pinned:hover {
  background: var(--brand-bg);
  color: var(--brand-primary-hover);
}

.ac-pin-btn:active {
  transform: scale(0.88);
}

/* 触屏设备(无 hover 能力):置顶按钮常显 */
@media (hover: none) {
  .ac-pin-btn { opacity: 0.55; pointer-events: auto; }
  .ac-pin-btn.is-pinned { opacity: 1; }
}