/**
 * AgentCard 智能体卡片样式
 * 
 * 100%还原原型图V11
 */

/* === 卡片基础样式 === */
.agent-card {
  background-color: #F6F9FF;
  border: 1px solid #E0E7FF;
  border-radius: 10px;
  padding: 14px;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.agent-card:hover {
  transform: translateY(-3px);
  border-color: #4F6EF2;
  border-width: 1.5px;
  background-color: #EEF4FF;
  box-shadow: 0 8px 16px rgba(79, 110, 242, 0.12);
  margin: -0.5px;
}

/* === 工具卡片（青色主题） === */
.agent-card.tool-card {
  background-color: #F0FDFA;
  border-color: #CCFBF1;
}

.agent-card.tool-card:hover {
  border-color: #0D9488;
  background-color: #E0F2F1;
  box-shadow: 0 8px 16px rgba(13, 148, 136, 0.15);
}

/* === 头部布局 === */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === 图标容器 === */
.icon-box {
  background-color: #FFFFFF;
  border: 1px solid #DCE6FF;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.agent-card:hover .icon-box {
  background-color: #DBEafe;
  border-color: #93C5FD;
  transform: scale(1.05);
}

.agent-icon {
  width: 20px;
  height: 20px;
  color: #4F6EF2;
}

/* 工具卡片图标 */
.agent-card.tool-card .icon-box {
  border-color: #CCFBF1;
}

.agent-card.tool-card .agent-icon {
  color: #0D9488;
}

.agent-card.tool-card:hover .icon-box {
  background-color: #CCFBF1;
  border-color: #5EEAD4;
}

/* 黄色主题图标 */
.agent-card.theme-yellow .icon-box {
  border-color: #FEF08A;
}

.agent-card.theme-yellow .agent-icon {
  color: #CA8A04;
}

.agent-card.theme-yellow:hover {
  border-color: #CA8A04;
  background-color: #FEF9C3;
}

.agent-card.theme-yellow:hover .icon-box {
  background-color: #FEF08A;
  border-color: #FACC15;
}

/* 紫色主题图标 */
.agent-card.theme-purple .icon-box {
  border-color: #E9D5FF;
}

.agent-card.theme-purple .agent-icon {
  color: #9333EA;
}

.agent-card.theme-purple:hover {
  border-color: #9333EA;
  background-color: #F3E8FF;
}

.agent-card.theme-purple:hover .icon-box {
  background-color: #E9D5FF;
  border-color: #C084FC;
}

/* === 标题 === */
.card-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

/* === 序号水印 === */
.num-watermark {
  color: #E0E7FF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.agent-card:hover .num-watermark {
  color: #C7D2FE;
}

.agent-card.tool-card .num-watermark {
  color: #CCFBF1;
}

.agent-card.tool-card:hover .num-watermark {
  color: #99F6E4;
}

.agent-card.theme-yellow .num-watermark {
  color: #FEF08A;
}

.agent-card.theme-yellow:hover .num-watermark {
  color: #FDE047;
}

.agent-card.theme-purple .num-watermark {
  color: #E9D5FF;
}

.agent-card.theme-purple:hover .num-watermark {
  color: #D8B4FE;
}

/* === 描述文本 === */
.desc-text {
  text-align: justify;
  line-height: 1.5;
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === 跳转图标（工具类） === */
.link-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  color: #94A3B8;
  opacity: 0.6;
  transition: all 0.2s;
}

.agent-card:hover .link-icon {
  opacity: 1;
  color: #0D9488;
  transform: translate(2px, -2px);
}