/**
 * Agent Card Component Styles - Professional UI/UX Redesign
 * 
 * Responsive design for 3 breakpoints:
 * - Mobile: 375px - 767px
 * - Tablet: 768px - 1023px  
 * - Desktop: 1024px+
 * 
 * Platform colors with refined palettes:
 * - Design OS: Modern coral with gradient
 * - Org OS: Professional teal with depth
 * - Space OS: Fresh mint with energy
 * - Marketplace: Unified brand color
 */

/* ===== Variables ===== */
:root {
	/* Platform Colors - Enhanced */
	--color-designos: #ff6b6b;
	--color-designos-light: #ffe5e5;
	--color-designos-medium: #ff8e8e;
	--color-designos-dark: #e63946;
	--color-designos-gradient: linear-gradient(
		135deg,
		#ff6b6b 0%,
		#ff5252 50%,
		#ff8e8e 100%
	); /* 优化9: 更鲜艳的渐变 */

	--color-orgos: #4ecdc4;
	--color-orgos-light: #e0f7f5;
	--color-orgos-medium: #6fd9d1;
	--color-orgos-dark: #2eb5ad;
	--color-orgos-gradient: linear-gradient(
		135deg,
		#4ecdc4 0%,
		#44b8b0 50%,
		#6fd9d1 100%
	); /* 优化9: 更鲜艳的渐变 */

	--color-spaceos: #95e1d3;
	--color-spaceos-light: #e8f8f5;
	--color-spaceos-medium: #ade8dc;
	--color-spaceos-dark: #5dccbd;
	--color-spaceos-gradient: linear-gradient(
		135deg,
		#95e1d3 0%,
		#7ed9ca 50%,
		#ade8dc 100%
	); /* 优化9: 更鲜艳的渐变 */

	--color-marketplace: #667eea;
	--color-marketplace-light: #e9ecff;
	--color-marketplace-medium: #8b9fff;
	--color-marketplace-gradient: linear-gradient(
		135deg,
		#667eea 0%,
		#764ba2 100%
	);

	/* Neutrals - Refined */
	--color-white: #ffffff;
	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;

	/* Semantic Colors */
	--color-success: #10b981;
	--color-warning: #f59e0b;
	--color-error: #ef4444;
	--color-info: #3b82f6;

	/* Spacing System */
	--spacing-xs: 0.25rem; /* 4px */
	--spacing-sm: 0.5rem; /* 8px */
	--spacing-md: 1rem; /* 16px */
	--spacing-lg: 1.5rem; /* 24px */
	--spacing-xl: 2rem; /* 32px */
	--spacing-2xl: 3rem; /* 48px */

	/* Border Radius */
	--radius-sm: 0.375rem; /* 6px */
	--radius-md: 0.5rem; /* 8px */
	--radius-lg: 0.875rem; /* 14px */
	--radius-xl: 1rem; /* 16px */
	--radius-full: 9999px;

	/* Professional Shadows */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
	--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08),
		0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12),
		0 4px 8px -4px rgba(0, 0, 0, 0.06);
	--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.16),
		0 8px 16px -8px rgba(0, 0, 0, 0.08);
	--shadow-2xl: 0 32px 64px -12px rgba(0, 0, 0, 0.2),
		0 12px 24px -12px rgba(0, 0, 0, 0.1);

	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Typography */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
		monospace;
}

/* ===== Base Card Styles - Compact Professional Design ===== */
.agent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 18px;
	overflow: hidden;
	transition: all var(--transition-base);
	cursor: pointer;
	font-family: var(--font-sans);
	box-shadow: var(--shadow-sm);
	padding: 1.5rem;
	min-height: 300px;
	width: 100%;
	max-width: none;
	margin: 0;
	justify-self: stretch;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: linear-gradient(to bottom, #ffffff 0%, #f7f9fc 100%);
}

/* Platform Accent Bar - Top gradient stripe */
.agent-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--color-gray-300);
	transition: all var(--transition-base);
}

/* ===== Platform-Specific Accent Styles ===== */
.agent-card.platform-designos::before {
	background: var(--color-designos-gradient);
}

.agent-card.platform-designos:hover {
	border-color: var(--color-designos);
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-designos-light);
}

.agent-card.platform-orgos::before {
	background: var(--color-orgos-gradient);
}

.agent-card.platform-orgos:hover {
	border-color: var(--color-orgos);
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-orgos-light);
}

.agent-card.platform-spaceos::before {
	background: var(--color-spaceos-gradient);
}

.agent-card.platform-spaceos:hover {
	border-color: var(--color-spaceos);
	box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-spaceos-light);
}

/* ===== Interactive States - Refined ===== */

/* Hover State - Elevated with smooth motion */
.agent-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-gray-300);
	background: linear-gradient(to bottom, #ffffff 0%, #f3f6fb 100%);
}

.agent-card:hover::before {
	height: 6px;
}

/* Active/Press State */
.agent-card:active {
	transform: translateY(-2px) scale(0.99);
	box-shadow: var(--shadow-md);
	transition-duration: 100ms;
}

/* Focus State - Accessibility */
.agent-card:focus-visible {
	outline: 3px solid var(--color-gray-900);
	outline-offset: 3px;
	box-shadow: var(--shadow-lg);
}

/* Selected State */
.agent-card.selected {
	border-color: var(--color-gray-900);
	box-shadow: var(--shadow-xl), 0 0 0 3px var(--color-gray-200);
	transform: translateY(-4px);
}

/* Disabled State */
.agent-card:disabled,
.agent-card.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	pointer-events: none;
}

/* Loading State */
.agent-card.loading {
	opacity: 0.7;
	pointer-events: none;
}

.agent-card.loading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.5),
		transparent
	);
	animation: loading 1.5s infinite;
}

@keyframes loading {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* ===== Badges - Professional Design ===== */
.card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.1;
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all var(--transition-fast);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Platform Badges with modern gradients */
.badge-platform.designos {
	background: var(--color-designos-gradient);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-platform.orgos {
	background: var(--color-orgos-gradient);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-platform.spaceos {
	background: var(--color-spaceos-gradient);
	color: var(--color-gray-900);
	border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Status Badges */
.badge-featured {
	background: linear-gradient(135deg, #ffd93d 0%, #f6c842 100%);
	color: var(--color-gray-900);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(255, 217, 61, 0.3);
}

.badge-popular {
	background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-new {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Badge Icons */
.badge::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

/* ===== Header - Enhanced Typography ===== */
.card-header {
	margin-bottom: 1rem;
}

.card-title {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
	margin: 0 0 0.5rem 0;
	letter-spacing: -0.01em;

	/* Clamp to 2 lines */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* Smooth rendering */
	text-rendering: optimizeLegibility;
}

.card-title:hover {
	color: #1e293b; /* 优化: 悬浮颜色变化 */
}

.card-subtitle {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-gray-500);
	margin: 0 0 0.75rem 0;
	line-height: 1.45;
	letter-spacing: -0.003em;
}

.card-category {
	display: inline-flex;
	align-items: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-gray-700);
	background-color: var(--color-gray-100);
	padding: 0.3rem 0.65rem;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	border: 1px solid var(--color-gray-200);
}

.card-category:hover {
	background-color: var(--color-gray-200);
	border-color: var(--color-gray-300);
}

/* ===== Description - Professional Typography ===== */
.card-description {
	flex: 1;
	margin-bottom: 1rem;
}

.card-description p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #64748b;
	margin: 0;
	letter-spacing: -0.002em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===== Meta Info - Tags Only ===== */
.card-meta {
	padding: 0.75rem 0 0.5rem;
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: 0.75rem;
}

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--color-gray-700);
	background-color: var(--color-gray-100);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	letter-spacing: -0.003em;
}

.tag:hover {
	background-color: var(--color-gray-200);
	border-color: var(--color-gray-300);
	color: var(--color-gray-900);
	transform: translateY(-1px);
}

/* Platform-specific tag colors */
.agent-card.platform-designos .tag {
	background-color: var(--color-designos-light);
	border-color: var(--color-designos-medium);
	color: var(--color-designos-dark);
}

.agent-card.platform-designos .tag:hover {
	background-color: var(--color-designos-medium);
	color: white;
}

.agent-card.platform-orgos .tag {
	background-color: var(--color-orgos-light);
	border-color: var(--color-orgos-medium);
	color: var(--color-orgos-dark);
}

.agent-card.platform-orgos .tag:hover {
	background-color: var(--color-orgos-medium);
	color: white;
}

.agent-card.platform-spaceos .tag {
	background-color: var(--color-spaceos-light);
	border-color: var(--color-spaceos-medium);
	color: var(--color-spaceos-dark);
}

.agent-card.platform-spaceos .tag:hover {
	background-color: var(--color-spaceos-medium);
	color: var(--color-gray-900);
}

/* ===== Actions - Professional CTAs ===== */
.card-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.75rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.1;
	border-radius: var(--radius-lg);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all var(--transition-base);
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

/* Primary Button - Modern gradient */
.btn-primary {
	flex: 1;
	background: linear-gradient(
		135deg,
		var(--color-gray-900) 0%,
		var(--color-gray-700) 100%
	);
	color: white;
	border-color: var(--color-gray-900);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.1) 0%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity var(--transition-base);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	border-color: var(--color-gray-700);
}

.btn-primary:hover::before {
	opacity: 1;
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Secondary Button - Outlined style */
.btn-secondary {
	background-color: white;
	color: var(--color-gray-700);
	border-color: var(--color-gray-300);
	box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
	background-color: var(--color-gray-50);
	border-color: var(--color-gray-400);
	color: var(--color-gray-900);
	box-shadow: var(--shadow-sm);
}

.btn .icon {
	width: 18px;
	height: 18px;
	transition: transform var(--transition-fast);
}

.btn:hover .icon {
	transform: translateX(2px);
}

/* ===== Animations ===== */
.agent-card.animated {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.agent-card.animated.visible {
	opacity: 1;
	transform: translateY(0);
}

.agent-card.deleting {
	animation: slideOut var(--transition-slow) forwards;
}

@keyframes slideOut {
	to {
		opacity: 0;
		transform: translateX(-100%);
	}
}

/* ===== Featured Card Styling ===== */
.agent-card.featured {
	border: 2px solid #ffd93d;
	background: linear-gradient(135deg, #fffbeb 0%, white 100%);
}

/* ===== Responsive Breakpoints ===== */

/* Tablet: 768px - 1023px */
@media (min-width: 768px) {
	.agent-card {
		padding: 1.75rem;
		min-height: 320px;
	}

	.card-title {
		font-size: 1.3rem;
	}

	.card-description p {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
	.agent-card {
		padding: 2rem;
		min-height: 340px;
	}

	.card-title {
		font-size: 1.35rem;
	}

	.card-subtitle {
		font-size: 0.9rem;
	}

	.meta-item {
		font-size: 0.875rem;
	}

	.btn {
		padding: 0.65rem 1.1rem;
		font-size: 0.875rem;
	}
}

/* ===== Accessibility ===== */

/* Focus visible for keyboard navigation */
.agent-card:focus-visible {
	outline: 2px solid var(--color-gray-900);
	outline-offset: 4px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
	.agent-card,
	.agent-card.animated,
	.btn {
		transition: none;
		animation: none;
	}

	.agent-card:hover {
		transform: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.agent-card {
		border-width: 2px;
	}

	.badge {
		border: 1px solid currentColor;
	}
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
	:root {
		--color-gray-900-dark: #0f172a;
		--color-gray-800-dark: #1e293b;
	}

	.agent-card {
		background-color: #1e293b;
		border-color: #334155;
		color: #e2e8f0;
		background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);
	}

	.agent-card::before {
		background: var(--color-gray-500);
	}

	.agent-card:hover {
		border-color: #475569;
		box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.5),
			0 4px 8px -4px rgba(0, 0, 0, 0.3);
		background: linear-gradient(to bottom, #22384f 0%, #0f172a 100%);
	}

	.card-title {
		color: #f1f5f9;
		font-weight: 700;
	}

	.card-title:hover {
		color: #e2e8f0;
	}

	.card-subtitle {
		color: #cbd5e1;
	}

	.card-description p {
		color: #cbd5e1;
		font-weight: 500;
	}

	.card-category {
		background-color: #334155;
		color: #e2e8f0;
		border-color: #475569;
	}

	.card-category:hover {
		background-color: #475569;
		border-color: #64748b;
		color: #f1f5f9;
	}

	.tag {
		color: #e2e8f0;
		background-color: #334155;
		border-color: #475569;
	}

	.tag:hover {
		background-color: #475569;
		border-color: #64748b;
		color: #f1f5f9;
	}

	.card-meta {
		border-top-color: #334155;
	}

	.badge {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	}

	/* Platform Badges - In dark theme, maintain white text for brand colors */
	.badge-platform {
		color: white !important;
	}

	.badge-platform.designos {
		background: var(--color-designos-gradient);
		color: white !important;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.badge-platform.orgos {
		background: var(--color-orgos-gradient);
		color: white !important;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

	.badge-platform.spaceos {
		background: var(--color-spaceos-gradient);
		color: white !important;
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	/* Status Badges in dark theme */
	.badge-featured {
		color: white !important;
	}

	.badge-popular {
		color: white !important;
	}

	.badge-new {
		color: white !important;
	}

	.btn-primary {
		background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
		color: #0f172a;
		border-color: #e2e8f0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	}

	.btn-primary:hover {
		background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
		border-color: #cbd5e1;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
		color: #0f172a;
	}

	.btn-primary:active {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}

	.btn-secondary {
		background-color: #334155;
		color: #e2e8f0;
		border-color: #475569;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	}

	.btn-secondary:hover {
		background-color: #475569;
		border-color: #64748b;
		color: #f1f5f9;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	}

	/* Tag hover states - override white text for dark theme */
	.agent-card.platform-designos .tag:hover {
		background-color: var(--color-designos-medium);
		color: white;
	}

	.agent-card.platform-orgos .tag:hover {
		background-color: var(--color-orgos-medium);
		color: white;
	}

	.agent-card.platform-spaceos .tag:hover {
		background-color: var(--color-spaceos-medium);
		color: white;
	}

	/* Dark theme hover effects for platform cards */
	.agent-card.platform-designos:hover {
		border-color: var(--color-designos);
		box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 107, 107, 0.2);
	}

	.agent-card.platform-orgos:hover {
		border-color: var(--color-orgos);
		box-shadow: var(--shadow-lg), 0 0 0 1px rgba(78, 205, 196, 0.2);
	}

	.agent-card.platform-spaceos:hover {
		border-color: var(--color-spaceos);
		box-shadow: var(--shadow-lg), 0 0 0 1px rgba(149, 225, 211, 0.2);
	}

	/* Ensure all white text remains readable in dark theme */
	.agent-card .btn-primary:not(:has(*)) {
		color: white;
	}

	/* Ensure badges maintain white text */
	.agent-card .badge {
		color: white !important;
	}

	/* Ensure tag hover states show white */
	.agent-card .tag {
		color: inherit;
	}

	.agent-card .tag:hover {
		color: white;
	}
}

/* ===== Print Styles ===== */
@media print {
	.agent-card {
		break-inside: avoid;
		box-shadow: none;
		border: 1px solid var(--color-gray-300);
	}

	.card-actions {
		display: none;
	}
}